サイトやブログを運営している人が絶対に知っておかなければいけないのが「サイトの表示速度」です。
PVを上げるためにはこれが超重要！
今回はこのブログの表示速度を例に、改善方法やどのくらい良くなったかをまとめたいと思います。
運営者が絶対に知っておくべきこと
サイトやブログの運営者は必ずと言っていいほど所有サイトの表示速度は把握しなければいけません。
中には全く無視してもそれなりにPVがある人もいるとは思いますが、改善すればさらにアクセスは増えることでしょう。
以前にも書いたことがありますが、ユーザーは運営者が思った以上に表示速度に影響されます。
その速度は3秒以上かかってしまってはアウトです。
自分のサイトをスマホでチェックする際に「ちょっと表示が遅いかな…」なんて少しでも感じることがあったら今すぐ改善を施しましょう。
自分が感じるということはユーザーも同じことを感じているということです。
サイトの表示速度を調べる方法
まずは自分のサイトがどのくらいの表示速度か調べます。その方法は主に二つ。
グーグルアナリティクス「サイトの速度」
必須ツールでもあるアナリティクスで調べることができます。
「行動」→「サイトの速度」→「概要」の順に進むと、平均読み込み時間やサーバーの応答時間を見ることができます。
時間や日によって速度にはばらつきがあるので、一ヶ月など長い期間でチェックしましょう。
PageSpeed Insights
グーグルの「PageSpeed Insights」では、表示速度を点数で知ることができます。テストの採点のようですね。
モバイルとPCそれぞれの速度が点数と色で評価され、色でも要改善かどうかがわかります。
- 緑：改善の必要なし
- 黄色：改善の余地あり
- 赤：要改善
アナリティクスとは違いURLを入力するだけでいいので、「シミラーウェブ」のように気になるサイトやブログ何でも調べることができます。
このブログの表示速度が最悪だった！
そんなわけでこのブログも「PageSpeed Insights」で表示速度を調べてみました。全く何もしていない改善前の結果がこちら。
59点…
パソコンの方は黄色ですが、モバイルでは色が真っ赤。
これは対策をしなければいけません。
あの有名ブログも意外な数値！？
改善の前に自分が普段読んでいるブログなど気になる他人のURLも調べてみました。
すると意外や意外、点数が悪い人は結構多くいるんですね。
ブログ名を書けばそのジャンルでは超有名な人のブログもなんと30点台。
100点の人はさすがにいませんでしたが、モバイルもPCも緑で90点近くという高得点を叩き出している人もいました。
表示速度の最適化を図る方法
私と同じように点数が悪かった人は改善していきましょう。
以下で改善した内容が表示速度を落としている原因でもあります。
画像を最適化する
運営をそれなりに続けていると画像の容量が増えてきたという人もいますよね。
プラグインの「EWWW Image Optimizer」で圧縮されているとは思いますが、改めてサーバー内にある画像を再最適化しましょう。
ということで早速このブログにある画像を全て再最適化。これで少しは点数が上がるでしょうか。
2点アップ！
微々たるものかもしれませんが、これでもし0.1秒でも表示速度が上がるかもしれないならやっておくに越したことはありません。
ブラウザキャッシュを設定する
次に行った対策が「ブラウザのキャッシュ設定」です。
名前を聞いただけではピンと来ない人もいるかもしれません。
要は、画像やファイルなどのキャッシュする期間を設定するということです。
これは人により設定内容が異なります。いろんな人の設定内容を調べた結果、私は以下の通りにしました。
# ブラウザキャッシュ
ExpiresActive On
ExpiresDefault “access plus 2 days”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType text/css “access plus 1 days”
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”# ブラウザキャッシュ
# フォントキャッシュ
ExpiresByType application/vnd.ms-fontobject “access plus 1 year”
ExpiresByType application/x-font-ttf “access plus 1 year”
ExpiresByType application/x-font-opentype “access plus 1 year”
ExpiresByType application/x-font-woff “access plus 1 year”
ExpiresByType image/svg+xml “access plus 1 year”
# フォントキャッシュ引用元：ぱそらっく
ぱそらっくさんでは、ブラウザキャッシュだけではなくフォントキャッシュもされていたので参考にさせていただきました。
このブログのテーマ「simplicity」の開発者わいひらさんはもっとシンプルな記述をされています。
設定をする場合は「.htaccess」に追記しましょう。
重要ファイルなので必ず事前にバックアップを取り、編集は自己責任でお願いします。
そしてブラウザキャッシュを設定した後の点数がこちら！
69点！
7点もアップ！
どうやらブラウザキャッシュの設定は高い効果が見られるようですね。
赤の状態から黄色になったのでひとまず安心です。パソコンの方は83点とかなり高い点数まで上がりました。
JavaScriptやCSSファイルを縮小する
こちらは上記二つに比べて難易度が上がるため私はまだ行っていません。
JSやCSSファイルを縮小してサイトを軽くさせます。
画像を圧縮したりブラウザキャッシュを設定しても評価が酷い場合はこちらも行いましょう。
まとめ
サイトの表示速度はネットビジネスにおいて無視できない問題の一つです。
SEOはもちろんのこと、ユーザーの滞在時間や離脱率などあらゆることに影響を及ぼすので、必ず調べて悪ければ改善を図りましょう。
改善方法も今回書いたこと以外にも色々あります。例えば画像についてなら、表示させている画像の枚数を減らしたり、必要以上にサイズを大きくしないということも大切。
何より今は、どのサイトもパソコンよりスマホからの流入が圧倒的にメインなので、スマホを意識したサイト作りを目指しましょう。