Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875

Warning: sprintf(): Too few arguments in /home/hamata/hamatawww.com/public_html/blog/wp-includes/theme.php on line 875
class="home blog paged paged-2 has-sidebar">

トライデントコンピュータ専門学校でWebデザインの勉強をしている学生です。将来はエンジニアを目指しています。

WCAN2017winterのライトニングトークでお話させていただいた内容がざっくりとしたものだったので、詳しく記事にしていきます。

目次

  1. マークアップ
  2. 画像の最適化
  3. CSSの最適化
  4. アイコンフォント
  5. ブラウザキャッシュの設定
  6. 結果
  7. まとめ

マークアップ

夏休みに作った自分のブログは、「この要素使ってないじゃん・・・。」とか、「これは何をいじってるんだろう・・・。」など、使っていない要素をほったらかしにしていたり、class名を適当に付けていて何をCSSに書き込んでいるのかデータをみただけではわからなくなっていました。

ということもあり、まずは初めからマークアップしました。

命名規則

CSSコーディングルールというものをご存知でしょうか?

CSSコーディングルール
ルールを標準化してメンテ性・チーム作業効率を高めていこうという動きで作られたもの。

ということなのですが、ルールと言っても色々あります。

  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS

などがあります。

今回僕が、適用したルールはSMACSSに則って命名しました。理由としては、学校で習っていて書き方が慣れている、メンテがしやすいからです。

気をつけたこと

class名をつける際になるべくcssセレクタをclassセレクタで書くことです。cssに書いたものは,
例えば、

div li a{background-color:#fff;}

と書いているとします。cssは右から左へ読み込まれるみたいで、初めにHTMLの中からa要素を探します。a要素をいくつか見つけたら次はa要素を囲っているli要素、li要素を囲っているdiv要素、というように何回も探しては見つけて、というのを繰り返します。
なので、こうします。

.sample{background-color:#fff}

こうすると、class名は自分のつけたところにしかないので、何回も探したりということをしなくても済むのです。すると、マッチング処理を軽減することができ、サイトパフォーマンスを向上させることができます。

 

画像の最適化

次に画像の最適化なのですが、今回はGoogleが開発したGuetzli(グェツリ)というJPEGエンコーダーを使いました。ターミナルを使う圧縮方法なので少々やり方は難しかったです。色々インストールするなど準備が必要なのでこちらのサイトを参考にしてください。

書き方はこんな感じです。

guetzli --quality ○○(圧縮率) --verbose original.png output.jpg

注意すること

一つ目は、guetzliでは圧縮率を最大84%までしか指定できません。圧縮し足りなかったり、一度画像をみてまだ圧縮できそうなら2回圧縮をしても良いかもしれません。

二つ目は、JPEGエンコーダーなので、JPEG形式以外にはできません。そのため、PNG画像をPNG形式のまま圧縮したい場合は、他のエンコーダー、もしくはWebサービスを利用すると良いと思います。

画像圧縮Webサービス
optimizilla
TinyPNG
Kraken.io

CSSの最適化

元々、自分のstyleの書いてあるstylesheetとリセットCSSのsanitize.cssを読み込んでいたのですが、どちらともレンダリングをブロックしていると出ていました。そもそも自分の場合は”レンダリング”という言葉の意味を知らなかったので、そこを調べることになりました。

レンダリング
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

簡単にいうと、“HTMLやCSSで書かれた記述を画面にWebサイトとして変換して表示すること”です。

外部CSSから読み込むとどうやらレンダリングがブロックされているようで、表示スピードが少し落ちてしまうみたいです。

今回それを回避する方法として、ファーストビューの部分の装飾(CSS)だけHTML文書にインライン化することにしました。

HTML文書

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

CSS文書

 

.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}

これを

HTML文書(インライン化)

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <style type="text/css">
        .sample1{
            border: 1px dashed #00A8FF;
            border-left: 5px solid #00A8FF;
            background-color: #eee;
            padding:5px;
        }
        </style>
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

こうすることでインライン化ができます。

これでインライン化はできたのですが、インライン化させる前にCSSを圧縮させた方がさらに高速化ができるのでおすすめします。

CSS圧縮Webサービス
Online JavaScript/CSS/HTML Compressor
CSS Compressor

アイコンフォント

アイコンフォントは元々FontAwesome(フォントオーサム)というフリーでアイコンフォントが使えるサービスを使っていました。ですが、これもまたレンダリングをブロックしている、と出てしました。簡単な話、FontAwesomeを使わなければレンダリングをブロックされることはないのですが、デザイン的にどうしても使いたかったので、解決法を探しました。その結果、Icomoon(アイコムーン)というFontAwesomeと似ているフリーでアイコンフォントが使えるサービスを使うことにしました。

「違いがわからない」という方もいるかと思いますので、FontAwesomeではできないIcomoonを利用する利点をご紹介します。

Icomoonを利用する利点

  • 自分が使いたいアイコンだけを選び、ダウンロードできる
  • CSSに直接書き込める
  • 自分で作ったSVGファイルをアイコンフォントにできる

などがあります。

CSSに直接書き込める、ということはそれをインライン化すればレンダリングをブロックするものは完全に無くなります。さらに、自分が使いたいアイコンだけを選んでダウンロードすることができるので、CSSに書き込む量は最小限で済みます。

とは言え、僕はFontAwesomeのアイコンは好きなので、「Webサイトのスピードにそれほど拘らないよ」という方は、FontAwesomeでも良いと思います。

FontAwesome
Icomoon

キャッシュの設定

最後にキャッシュの設定をしました。ですが、「キャッシュってなに?」って感じだったので、またしてもキャッシュの意味を調べるところから入ります。

キャッシュ
CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。

簡単に言うと、“一時的に貯めておくデータ”ということだと思います。

設定の仕方は、よくわからなかったので、色々な方々の記事をコピペをさせていただきました。キャッシュの設定は”.htaccess”というファイルに書き込むのですが、なにやらこのファイルを書くときに違うファイルに書き込んでしまうと大変なことが起こるということなので、キャッシュの設定をする際には気をつけましょう。


<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

意味はだいたい見ればわかると思います。

結果

これらのことをした結果・・・。

無事、PC・モバイル共に100点を取ることができました!
当初目的としていた阿部寛のホームページはPC92点、モバイル93点です。なんとか超えることができました!

まとめ

今回のライトニングトークで高速化についてお話させていただいたのですが、自分自身高速化のことに興味はあったものの全然わからないことだらけで、探り探りやってく形になったのですが、調べながら一つ一つの課題を解決していくことに自分自身の成長を感じることができました。

そんなこんなな感じだったので、間違っている点や、勘違いなどしている点があるかもしれないので、ご指摘くださると幸いです。

自分自身やり切ったつもりではありますが、まだまだ「ここはこうした方がいい」というところもあるかと思いますので、これからも高速化については勉強していきたいたいと思います。

おすすめ書籍

・超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる

WCAN2017winterのライトニングトークでお話させていただいた内容がざっくりとしたものだったので、詳しく記事にしていきます。

目次

  1. マークアップ
  2. 画像の最適化
  3. CSSの最適化
  4. アイコンフォント
  5. ブラウザキャッシュの設定
  6. 結果
  7. まとめ

マークアップ

夏休みに作った自分のブログは、「この要素使ってないじゃん・・・。」とか、「これは何をいじってるんだろう・・・。」など、使っていない要素をほったらかしにしていたり、class名を適当に付けていて何をCSSに書き込んでいるのかデータをみただけではわからなくなっていました。

ということもあり、まずは初めからマークアップしました。

命名規則

CSSコーディングルールというものをご存知でしょうか?

CSSコーディングルール
ルールを標準化してメンテ性・チーム作業効率を高めていこうという動きで作られたもの。

ということなのですが、ルールと言っても色々あります。

  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS

などがあります。

今回僕が、適用したルールはSMACSSに則って命名しました。理由としては、学校で習っていて書き方が慣れている、メンテがしやすいからです。

気をつけたこと

class名をつける際になるべくcssセレクタをclassセレクタで書くことです。cssに書いたものは,
例えば、

div li a{background-color:#fff;}

と書いているとします。cssは右から左へ読み込まれるみたいで、初めにHTMLの中からa要素を探します。a要素をいくつか見つけたら次はa要素を囲っているli要素、li要素を囲っているdiv要素、というように何回も探しては見つけて、というのを繰り返します。
なので、こうします。

.sample{background-color:#fff}

こうすると、class名は自分のつけたところにしかないので、何回も探したりということをしなくても済むのです。すると、マッチング処理を軽減することができ、サイトパフォーマンスを向上させることができます。

 

画像の最適化

次に画像の最適化なのですが、今回はGoogleが開発したGuetzli(グェツリ)というJPEGエンコーダーを使いました。ターミナルを使う圧縮方法なので少々やり方は難しかったです。色々インストールするなど準備が必要なのでこちらのサイトを参考にしてください。

書き方はこんな感じです。

guetzli --quality ○○(圧縮率) --verbose original.png output.jpg

注意すること

一つ目は、guetzliでは圧縮率を最大84%までしか指定できません。圧縮し足りなかったり、一度画像をみてまだ圧縮できそうなら2回圧縮をしても良いかもしれません。

二つ目は、JPEGエンコーダーなので、JPEG形式以外にはできません。そのため、PNG画像をPNG形式のまま圧縮したい場合は、他のエンコーダー、もしくはWebサービスを利用すると良いと思います。

画像圧縮Webサービス
optimizilla
TinyPNG
Kraken.io

CSSの最適化

元々、自分のstyleの書いてあるstylesheetとリセットCSSのsanitize.cssを読み込んでいたのですが、どちらともレンダリングをブロックしていると出ていました。そもそも自分の場合は”レンダリング”という言葉の意味を知らなかったので、そこを調べることになりました。

レンダリング
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

簡単にいうと、“HTMLやCSSで書かれた記述を画面にWebサイトとして変換して表示すること”です。

外部CSSから読み込むとどうやらレンダリングがブロックされているようで、表示スピードが少し落ちてしまうみたいです。

今回それを回避する方法として、ファーストビューの部分の装飾(CSS)だけHTML文書にインライン化することにしました。

HTML文書

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

CSS文書

 

.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}

これを

HTML文書(インライン化)

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <style type="text/css">
        .sample1{
            border: 1px dashed #00A8FF;
            border-left: 5px solid #00A8FF;
            background-color: #eee;
            padding:5px;
        }
        </style>
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

こうすることでインライン化ができます。

これでインライン化はできたのですが、インライン化させる前にCSSを圧縮させた方がさらに高速化ができるのでおすすめします。

CSS圧縮Webサービス
Online JavaScript/CSS/HTML Compressor
CSS Compressor

アイコンフォント

アイコンフォントは元々FontAwesome(フォントオーサム)というフリーでアイコンフォントが使えるサービスを使っていました。ですが、これもまたレンダリングをブロックしている、と出てしました。簡単な話、FontAwesomeを使わなければレンダリングをブロックされることはないのですが、デザイン的にどうしても使いたかったので、解決法を探しました。その結果、Icomoon(アイコムーン)というFontAwesomeと似ているフリーでアイコンフォントが使えるサービスを使うことにしました。

「違いがわからない」という方もいるかと思いますので、FontAwesomeではできないIcomoonを利用する利点をご紹介します。

Icomoonを利用する利点

  • 自分が使いたいアイコンだけを選び、ダウンロードできる
  • CSSに直接書き込める
  • 自分で作ったSVGファイルをアイコンフォントにできる

などがあります。

CSSに直接書き込める、ということはそれをインライン化すればレンダリングをブロックするものは完全に無くなります。さらに、自分が使いたいアイコンだけを選んでダウンロードすることができるので、CSSに書き込む量は最小限で済みます。

とは言え、僕はFontAwesomeのアイコンは好きなので、「Webサイトのスピードにそれほど拘らないよ」という方は、FontAwesomeでも良いと思います。

FontAwesome
Icomoon

キャッシュの設定

最後にキャッシュの設定をしました。ですが、「キャッシュってなに?」って感じだったので、またしてもキャッシュの意味を調べるところから入ります。

キャッシュ
CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。

簡単に言うと、“一時的に貯めておくデータ”ということだと思います。

設定の仕方は、よくわからなかったので、色々な方々の記事をコピペをさせていただきました。キャッシュの設定は”.htaccess”というファイルに書き込むのですが、なにやらこのファイルを書くときに違うファイルに書き込んでしまうと大変なことが起こるということなので、キャッシュの設定をする際には気をつけましょう。


<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType text/html "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/x-icon "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>

意味はだいたい見ればわかると思います。

結果

これらのことをした結果・・・。

無事、PC・モバイル共に100点を取ることができました!
当初目的としていた阿部寛のホームページはPC92点、モバイル93点です。なんとか超えることができました!

まとめ

今回のライトニングトークで高速化についてお話させていただいたのですが、自分自身高速化のことに興味はあったものの全然わからないことだらけで、探り探りやってく形になったのですが、調べながら一つ一つの課題を解決していくことに自分自身の成長を感じることができました。

そんなこんなな感じだったので、間違っている点や、勘違いなどしている点があるかもしれないので、ご指摘くださると幸いです。

自分自身やり切ったつもりではありますが、まだまだ「ここはこうした方がいい」というところもあるかと思いますので、これからも高速化については勉強していきたいたいと思います。

おすすめ書籍

・超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる

こんにちは。北濱です。今回は、エックスサーバーでサーバーを借りたのでご報告したいと思います。とりあえず、3ヶ月分借りてきました。お値段はなんと、3ヶ月で約7000円!まあまあ、お高いですね…。でも、今エックスサーバーでサーバーを借りると、ドメインが1つ無料でもらうことができます!今がチャンスです!!

サーバーをレンタルした経緯

今回、サーバーを急遽レンタルしたわけですが、その理由は名刺を作るためです。というのも、wcanと懇親会がそろそろ迫っているということもあって人脈を増やすために作りました。名刺を作るに当たって、自分のサーバーは持っておいた方がいいということで、急遽レンタルさせてもらったというわけですね。

ちなみにこちらが今回借りたサーバーともらったドメインです。

hamatawww.com

自分でサーバーを持つと、少しだけ成長したような感覚になります。みなさんも借りてみてはいかがでしょうか。

作った名刺

そしてこれがこれから作る予定の名刺デザインです。頑張って点は好きな食べ物のイラストです。

表面
裏面

誰かに渡せるといいですけどね・・・。

こんにちは。北濱です。今回は、エックスサーバーでサーバーを借りたのでご報告したいと思います。とりあえず、3ヶ月分借りてきました。お値段はなんと、3ヶ月で約7000円!まあまあ、お高いですね…。でも、今エックスサーバーでサーバーを借りると、ドメインが1つ無料でもらうことができます!今がチャンスです!!

サーバーをレンタルした経緯

今回、サーバーを急遽レンタルしたわけですが、その理由は名刺を作るためです。というのも、wcanと懇親会がそろそろ迫っているということもあって人脈を増やすために作りました。名刺を作るに当たって、自分のサーバーは持っておいた方がいいということで、急遽レンタルさせてもらったというわけですね。

ちなみにこちらが今回借りたサーバーともらったドメインです。

hamatawww.com

自分でサーバーを持つと、少しだけ成長したような感覚になります。みなさんも借りてみてはいかがでしょうか。

作った名刺

そしてこれがこれから作る予定の名刺デザインです。頑張って点は好きな食べ物のイラストです。

表面
裏面

誰かに渡せるといいですけどね・・・。

こんにちは。北濱です。今回は重い箱と軽い箱のイージングと質感AfterEffectを使って表現してみたのでみなさんにもみてもらおうと思います。落下速度や跳ね方、振動などに注意して作りました。

ストーリー

空から落ちてきた箱をどけようとする人間。「軽」と書かれた箱は軽々と持ち上げ、放り投げることができました。しかし、「重」と書かれた箱はなかなか持ち上げることができません。その時、キノコが突如現れた。人間はそのキノコを食べてしまう。ところがなんと、そのキノコはスーパーキノコでした。人間はたちまち大きくなり、「重」と書かれた箱を軽々と押し倒します。人間はドヤ顔をしたのだった…。

コンセプト

人間が持ち上げて、一つは軽々としているが、もう一つは踏ん張っても持ち上がらないという動きをさせて重い箱と軽い箱の表現をわかりやすくしてみました。

作ってみた感想

今回、AfterEffectを初めて使ったのですが、率直な感想としては、楽しかったです。図形を自分の思ったように動かすことができるのはみていて楽しいし、日々よくみているものの動きをよく考えさせられるいい機会だと思いました。これからまたAfterEffectを触る機会はあると思うので、使い方など忘れないようにしたいです。

こんにちは。北濱です。今回は重い箱と軽い箱のイージングと質感AfterEffectを使って表現してみたのでみなさんにもみてもらおうと思います。落下速度や跳ね方、振動などに注意して作りました。

ストーリー

空から落ちてきた箱をどけようとする人間。「軽」と書かれた箱は軽々と持ち上げ、放り投げることができました。しかし、「重」と書かれた箱はなかなか持ち上げることができません。その時、キノコが突如現れた。人間はそのキノコを食べてしまう。ところがなんと、そのキノコはスーパーキノコでした。人間はたちまち大きくなり、「重」と書かれた箱を軽々と押し倒します。人間はドヤ顔をしたのだった…。

コンセプト

人間が持ち上げて、一つは軽々としているが、もう一つは踏ん張っても持ち上がらないという動きをさせて重い箱と軽い箱の表現をわかりやすくしてみました。

作ってみた感想

今回、AfterEffectを初めて使ったのですが、率直な感想としては、楽しかったです。図形を自分の思ったように動かすことができるのはみていて楽しいし、日々よくみているものの動きをよく考えさせられるいい機会だと思いました。これからまたAfterEffectを触る機会はあると思うので、使い方など忘れないようにしたいです。

Webサイトパフォーマンスによる影響

Google
サイト表示が0.5秒遅くなると、検索数が20%減少する
Amazon
サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する
Aberdeen Groupの調査結果
表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

このように、Webサイトの表示速度はかなり重要であることがわかります。今回は、Webサイトのパフォーマンスを向上させる方法を書いていきます。

画像の最適化

できるだけ画像を使わない

文字は画像ではなく、標準フォントかアイコンフォント、Webフォントを使う。

適切な画像サイズにする

画像サイズが大きいと、容量も大きくなってしまうので、実際の表示よりも大きいサイズにはしない。

PC用とスマートフォン用で画像を分ける。

画像を圧縮して軽量化する

<画像圧縮のWebサービス>

TinyPNG
JPEGmini(JPEGのみ)

CSSスプライト

使いたい画像を1つの画像ファイルにまとめてCSSで使いたい画像のpositionを指定する方法。画像リクエスト数を減らせる。

CSS・JavaScriptファイルを圧縮(ミニファイ化)

ミニファイ(minify)とは
簡単に言うとコードの圧縮化のことです。縮小化・軽量化とも言われます。
具体的には余分なスペース・改行・インデントなどの不要な部分を取り除き、軽いファイルに変換します。可読性が悪いため編集することを目的とせず、ライブラリとして使用するために圧縮されることが多いです。

CSS・JavaScriptファイルをミニファイ化するサービス

Online JavaScript/CSS Compressor
Minify your CSS

ブラウザのキャッシュを活用する

ブラウザキャッシュとは
Webブラウザが表示したWebサイトのデータを一時的にパソコンに保存しておく機能です。
次に同じWebサイトを表示したときに、サーバーにアクセスして情報を取得してくる手間を省き、パソコンに保存されたデータを表示するため、初回よりも速くページを表示することができます。

つまり、最初のサイト訪問時にダウンロードされたデータは、2回目のサイト訪問時のときにはダウンロードする必要がないため、数個のダウンロードでページを速く表示することができるらしい。

キャッシュを有効にするには、.htaccessで設定しなくてはならない。ブログ主はまだいまいち説明ができないので、こちらを参考にして欲しいです。

まとめ

今まとめたものはわずかな部分でしかありませんが、これらをすることでページの表示速度があがることがわかりました。そこで、実際に授業で作ったサイトを以上のポイント(ブラウザキャッシュを除く)に気を付けて作ってみました。結果、83点くらいというまあまあいい得点が出たので、自分のブログなどにも活かしていきたいと思います。

Webサイトパフォーマンスによる影響

Google
サイト表示が0.5秒遅くなると、検索数が20%減少する
Amazon
サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する
Aberdeen Groupの調査結果
表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

このように、Webサイトの表示速度はかなり重要であることがわかります。今回は、Webサイトのパフォーマンスを向上させる方法を書いていきます。

画像の最適化

できるだけ画像を使わない

文字は画像ではなく、標準フォントかアイコンフォント、Webフォントを使う。

適切な画像サイズにする

画像サイズが大きいと、容量も大きくなってしまうので、実際の表示よりも大きいサイズにはしない。

PC用とスマートフォン用で画像を分ける。

画像を圧縮して軽量化する

<画像圧縮のWebサービス>

TinyPNG
JPEGmini(JPEGのみ)

CSSスプライト

使いたい画像を1つの画像ファイルにまとめてCSSで使いたい画像のpositionを指定する方法。画像リクエスト数を減らせる。

CSS・JavaScriptファイルを圧縮(ミニファイ化)

ミニファイ(minify)とは
簡単に言うとコードの圧縮化のことです。縮小化・軽量化とも言われます。
具体的には余分なスペース・改行・インデントなどの不要な部分を取り除き、軽いファイルに変換します。可読性が悪いため編集することを目的とせず、ライブラリとして使用するために圧縮されることが多いです。

CSS・JavaScriptファイルをミニファイ化するサービス

Online JavaScript/CSS Compressor
Minify your CSS

ブラウザのキャッシュを活用する

ブラウザキャッシュとは
Webブラウザが表示したWebサイトのデータを一時的にパソコンに保存しておく機能です。
次に同じWebサイトを表示したときに、サーバーにアクセスして情報を取得してくる手間を省き、パソコンに保存されたデータを表示するため、初回よりも速くページを表示することができます。

つまり、最初のサイト訪問時にダウンロードされたデータは、2回目のサイト訪問時のときにはダウンロードする必要がないため、数個のダウンロードでページを速く表示することができるらしい。

キャッシュを有効にするには、.htaccessで設定しなくてはならない。ブログ主はまだいまいち説明ができないので、こちらを参考にして欲しいです。

まとめ

今まとめたものはわずかな部分でしかありませんが、これらをすることでページの表示速度があがることがわかりました。そこで、実際に授業で作ったサイトを以上のポイント(ブラウザキャッシュを除く)に気を付けて作ってみました。結果、83点くらいというまあまあいい得点が出たので、自分のブログなどにも活かしていきたいと思います。