苦手ながらも頑張ってPageSpeed Insightsで40点→86点にしました。
ウェブ界の神にまで上り詰めたGoogle。
Googleによってサイトの診断をしてくれる「PageSpeed Insights」という機能があります。
こちらで高得点を取るとウェブサイトのデザインは別としてがいい感じだね！という評価が頂けます。
今回は私が行いPageSpeed Insightsで40点を86点まで上げた対策を紹介します。
画像を最適化する
まず、使っている画像サイズが無駄に大きいと「画像サイズがでかすぎるぞ！」と怒られます。
レスポンシブデザインで画像の大きさ指定をwidth=”○○%”やhigth=”○○%”にしていると、ブラウザ側で縮小されてしまうので画像サイズが無駄に大きかったということに気づかなかったりします。
1，画像の大きさを縮小する。JPEG画像を圧縮する。(Image Resizer)
2,PNG画像を圧縮する。(TinyPNG)
上の２つのサイトで画像サイズをガリガリ削りましょう。
ブラウザのキャッシュを活用する
ブラウザのキャッシュを利用するということは
「閲覧者もこのサイトのデータをちょっと覚えててね、そうしてくれたら読み込み早くなるわ」ってことです。
一斉を風靡したモンスターハンターポータブル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 bMSIEs(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点くらいだったので、かなり良くなったほうだと思います。
この対策後、ウェブマスターツールに大きな変化があり効果があったことが確認できました。