バイクでどっかいこ

世界中の珍スポットへ バイクメインの旅行ブログ

ブログの表示を高速化!PageSpeed Insightsで86点にしました。

   

苦手ながらも頑張ってPageSpeed Insightsで40点→86点にしました。

Screenshot 2015-07-15 at 14.19.41.png

ウェブ界の神にまで上り詰めたGoogle
Googleによってサイトの診断をしてくれる「PageSpeed Insights」という機能があります。
こちらで高得点を取るとウェブサイトのデザインは別としてがいい感じだね!という評価が頂けます。

今回は私が行いPageSpeed Insightsで40点を86点まで上げた対策を紹介します。

 - ハック・思考・プラン

画像を最適化する

まず、使っている画像サイズが無駄に大きいと「画像サイズがでかすぎるぞ!」と怒られます。
レスポンシブデザインで画像の大きさ指定をwidth=”○○%”やhigth=”○○%”にしていると、ブラウザ側で縮小されてしまうので画像サイズが無駄に大きかったということに気づかなかったりします。

1,画像の大きさを縮小する。JPEG画像を圧縮する。(Image Resizer)
2,PNG画像を圧縮する。(TinyPNG)

上の2つのサイトで画像サイズをガリガリ削りましょう。

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

ブラウザのキャッシュを利用するということは
「閲覧者もこのサイトのデータをちょっと覚えててね、そうしてくれたら読み込み早くなるわ」ってことです。
一斉を風靡したモンスターハンターポータブル2ndGに「メディアインストール」ってありましたよね?アレのことです。

方法は「.htaccess」に以下の記述を行ってやるだけ!!
================================================

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 30 minutes”
ExpiresByType text/html “access plus 10 seconds”
ExpiresByType image/jpg “access plus 7 days”
ExpiresByType image/jpeg “access plus 7 days”
ExpiresByType image/gif “access plus 7 days”
ExpiresByType image/png “access plus 7 days”
ExpiresByType text/css “access plus 7 days”
ExpiresByType application/pdf “access plus 7 days”
ExpiresByType text/x-javascript “access plus 7 days”
ExpiresByType application/javascript “access plus 7 days”
ExpiresByType application/x-javascript “access plus 7 days”
ExpiresByType application/x-shockwave-flash “access plus 7 days”
ExpiresByType image/x-icon “access plus 7 days”
</ifModule>

================================================
※この方法は、
Apacheのmod_expiresというモジュールがインストールされている場合にのみ行える設定になります。

キャッシュによるサイトの速度改善!!

上の記述をワードプレスルートフォルダにある「.httaccess」に記述してあげればオッケーです。
“access plus ○ days”ってのが対象のファイルをどれくらいの期間、キャッシュし続けてもらうかの指示になっています。

圧縮を有効にする

サイトの情報を圧縮させて、閲覧者側で解凍してもらうといいよ。ってこと。

# mod_deflateを利用して Gzip圧縮する設定

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系、IE7、8の古いブラウザでは無効にする
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

  # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布しないようにする
  Header append Vary Accept-Encoding env=!dont-vary

  # 各コンテンツを圧縮する設定を記述
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

SEO対策!.htaccessのmod_deflateでファイル圧縮送信で高速化
詳しいことはよく理解できなかったので、引用元のサイトさんを参考にしてください。

Javascript、CSSを圧縮

JavascriptとCSSにある見やすくするための改行やコメントはGoogleにとっては無駄な要素でしかないので改行やコメントを削除。
これが圧縮となります。

Online JavaScript/CSS Compressor

上のサイトでJavascriptやCSSをコピーし貼り付け、圧縮されたデータを上書きすることで圧縮が完了します。
訂正を行うときのための見やすい状態でのバックアップを残しておくと良いでしょう。

よくわかないけど点数があがるプラグイン

得点を上げるためワードプレスで様々なプラグインをインストールしては削除しての繰り返しでしたが
「W3 Total Cache」というプラグインを利用すると75点が86点くらいまで上がりました。

設定方法については「W3 Total Cache のおすすめの設定方法」を参考にしました。

最後に

得点を上げるために様々なサイトを見て、対策を行うの繰り返しでした。
fc2ブログ時代のバイクでどっかいこは驚きの3点くらいだったので、かなり良くなったほうだと思います。

Screenshot 2015-07-15 at 15.06.05

この対策後、ウェブマスターツールに大きな変化があり効果があったことが確認できました。

 - ハック・思考・プラン

このブログで今週人気の記事です