最近はブロードバンドが普及して、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、js、画像ファイルあたりに有効期限を設定します。

画像を最適化する

gulpのプラグイン(gulp-imageminpngquantの組み合わせ)やweb上のサイトやアプリを使って、画像が劣化しない程度にファイルサイズを減らしてみてください。onlineサービスだと あたりでしょうか。 これをやるとPageSpeed Insightsの点数がかなり上がります。つまりそれだけ重要だということですかね。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

jsファイルの非同期読み込み

「このページには、ブロッキングスクリプトリソースが1個あります。これが原因で、ページのレンダリングに遅延が発生しています。」の後に「レンダリングをブロックする JavaScript を除去してください」とかって言われる場合は、<script defer="defer" src="js/index.min.js"></script> みたいな感じで、scriptタグのところでdefer属性を設定してあげてください。こうしておけばhead要素の中でscriptを読み込んでも非同期で読み込まれるので遅延は起こりません。 ただしIE9以下ではdefer属性の挙動がおかしかったりそもそもサポートしてなかったりするので、HTMLの条件付きコメントを使って のように、head内ではIE以外とIE10以上向けにdeferで読み込み、body要素の終了タグ直前ではIE9以下向けに同じファイルを読み込むようにしてください。

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 圧縮してデータ転送量を少なくする方法。を参照)

JavaScript を縮小する

jsファイルをminifyしてください。エディタのプラグインでもありますし、Online Javascript Compression Toolでコピペしてもいけます。gulpならtaskに登録しておくだけです。

全部やったら点数が跳ね上がります

もともとどれくらい対策されているかにもよりますが、例えば40点50点台のスコアしか出なかったサイトの場合だとここに書いたことを全部やると90点以上になると思います。仕事で自分が手がけたサイトで90点越えないとかありえない感じです。 ちなみにこのブログはあんまり対策してません…まぁ仕事じゃないからいいかなぁって…