Google PageSpeed InsightsやGTmetrixでの点数を上げる方法を書いてみた
最近はブロードバンドが普及して、PC で Web ページを閲覧するときに回線速度を特に意識しなくてもいいくらい快適な環境になってきました。一方のモバイル端末では PC での閲覧とは状況が異なっていて、特に速度制限なんかを受けたときの Web ページの読み込み速度は結構イライラさせられたりします。ここでは Web ページの読み込み速度を少しでも上げて PageSpeed Insights や GTmetrix での点数を上げる方法をまとめてみました。
目次
PageSpeed Insights って？
ここにアクセスしてみてください。
なんか URL を打ち込むとそのページについての点数を出してくれます。
自分が普段見ているサイトの URL とかを入れてみて試してみて下さい。
対策してないとあれこれケチつけられてると思います。
他にスコアを出してくれるサイトとして GTmetrix なんかもあります。
ページの読み込み速度を上げるというのは UX 的にも SEO 的にもいいことなので対策してみてください。
ブラウザのキャッシュを活用する
.htaccess ファイルにキャッシュの有効期限を書いておくといいみたいです。（Leverage browser caching: How to add Expires headersを参照）
HTML ファイル、CSS ファイル、JavaScript ファイル、画像ファイルあたりに有効期限を設定します。
# Leverage browser caching
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 7 day"
# CSS
ExpiresByType text/css "access 1 month"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# favicon
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>画像を最適化する
gulp のプラグイン（gulp-imageminとpngquantの組み合わせ）や Web 上のサイトやアプリを使って、画像が劣化しない程度にファイルサイズを減らしてみてください。オンラインサービスだと
あたりでしょうか。
これをやると PageSpeed Insights の点数がかなり上がります。つまりそれだけ重要だということですかね。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
js ファイルの非同期読み込み
「このページには、ブロッキングスクリプトリソースが1個あります。これが原因で、ページのレンダリングに遅延が発生しています。」の後に「レンダリングをブロックする JavaScript を除去してください」とかって言われる場合は、<script defer="defer" src="js/index.min.js"></script> みたいな感じで、script タグのところで defer 属性を設定してあげてください。こうしておけば head 要素の中で script を読み込んでも非同期で読み込まれるので遅延は起こりません。
CSSで@import を使わない
「このページには、ブロッキング CSS リソースが3個あります。これが原因で、ページのレンダリングに遅延が発生しています。」とかって言われる場合は、CSS 内で @import を使ってないか疑いましょう。
@import で読み込むと、パラレルじゃなくてシーケンシャルにファイルがダウンロードされるようです。（don’t use @importを参照）
CSS ファイルの非同期読み込み
「以下のリソースによる読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを約67%しかレンダリングできませんでした。ブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。」みたいなことを言われる場合は、CSS を非同期に読み込むようにしてみてください。loadCSSを使うといいと思います。loadCSS.js に CSS 読み込み部分を加えたものを minify して loadCSS.min.js として、これに defer 属性をつけて非同期に読み込みましょう。JavaScript がオフになっている場合のことも考えて、noscript タグの中で link 要素を使って CSS 自体も読み込んでおくといいです。
CSS のインライン化
「以下のリソースによる読み込みが終わるまで、このページでスクロールせずに見えるコンテンツを約67%しかレンダリングできませんでした。ブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。」みたいなことを言われる場合は、ファーストビュー（PageSpeed Insights の結果画面の右に表示されている部分です）を表示するのに必要なCSSをHTMLのheadタグの中に<style></style>で囲んで直接書き込んでみてください。CSS ファイルからコピペしてもいいですし、SCSS のようなプリプロセッサを使っている場合はファーストビュー用のファイルを作ってそのアウトプットをコピペするといいと思います。注意すべきなのは、CSS ファイルをcssディレクトリに入れていると、html ファイルから見た場合とパスが変わるため、例えば background-attachment の URL なんかは適切に修正する必要があります。SCSSでファーストビュー用のファイルを作る場合は画像のパスを SCSS の変数にしておいてそれを適切に変更すれば良いだけなのでそちらの方が便利です。この CSS のインライン化は結構大事かもしれないと個人的に思ってます。
圧縮を有効にする
「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。」とかって言われたりする場合は .htaccess を編集してファイルの圧縮を有効にしてください。
（.htaccess で gzip 圧縮してデータ転送量を少なくする方法。を参照）
# compress files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>JavaScript を縮小する
js ファイルを minify してください。エディタのプラグインでもありますし、Online Javascript Compression Toolでコピペしてもいけます。gulp なら task に登録しておくだけです。
全部やったら点数が跳ね上がります
もともとどれくらい対策されているかにもよりますが、例えば40点50点台のスコアしか出なかったサイトの場合だとここに書いたことを全部やると90点以上になると思います。仕事で自分が手がけたサイトで90点越えないとかありえない感じです。
ちなみにこのブログはあんまり対策してません…まぁ仕事じゃないからいいかなぁって…