PageSpeed Insightsを使ってWebページの改善箇所を探る

2018/07/22
development
blog

PageSpeed InsightsはGoogle謹製のWebページ解析ツールです。Webページを解析して読み込み時間を短くする方法を提案してくれます。

URLを入力するとモバイル、パソコンそれぞれについてページの速度や最適化度合いの指標が表示されます。また、最適化すべき箇所を提案してくれるので、何を直せばいいかも分かります。

解析

試しにこのblogのひとつ前の記事を解析してみました。

  • パソコン
    • ページの速度: Unavailable
    • 最適化: Good (87 / 100)
  • モバイル
    • ページの速度: Unavailable
    • 最適化: Medium (65 / 100)

ページの速度はある程度のアクセスがあるページじゃないと測定されないようです。弱小blogには縁がない機能ですね．．．

最適化はそれなりにできているけど改善の余地あり、という感じ。

最適化の提案は

  • パソコン
    • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
    • ブラウザのキャッシュを活用する
    • CSS を縮小する
    • 画像を最適化する
  • モバイル
    • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
    • ブラウザのキャッシュを活用する

となっていました。

最適化

提案された改善案をいくつか試してみます。

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

このblogはロリポップにホスティングしています。ロリポップはmod_expiresモジュールに対応しているので、.htaccessファイルにこんな感じの記述を足してあげます。

<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 7 days"
    ExpiresByType image/png "access plus 7 days"
    ExpiresByType text/css "access plus 7 days"
    ExpiresByType text/javascript "access plus 7 days"
    ExpiresByType application/javascript "access plus 7 days"
    ExpiresByType application/x-javascript "access plus 7 days"
</ifModule>

最初はcssやjsのキャッシュ期間を1日にしていたのですが、そうすると指摘が消えませんでした。キャッシュ期間が短すぎると効果なしと判定されるみたいです。

これだけだと

https://www.google-analytics.com/analytics.js (2 時間)

の指摘が残りますが、いったんはこのままで。

パソコン: 87 => 89、モバイル: 65 => 66とスコアがちょっと改善します。analytics.jsの指摘を消せればそれぞれあと1点ずつ上がるはず。

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

次はこれ。JavaScriptやCSSをインライン化したり非同期読み込みにしたりするのが正攻法です。

JavaScriptはjQueryなのでちょっと厳しい。jQueryがロードされている前提で書かれているスクリプトが点在しているのですよね．．．

なのでCSSを試してみます。CSSフレームワークにBulmaを使っていてインライン化は難しいので非同期読み込みにトライ。<link rel="preload">は対応しているブラウザが限られているのでloadCSSを使ってみます。

すると、なんということでしょう！パソコンは83、モバイルに至っては39までスコアが下がってしまいました．．．

表示可能コンテンツの優先順位を決定するという指摘が増えています。

HTML レスポンス全体だけを使用した場合、スクロールせずに見える範囲のコンテンツが、最終的に表示される内容の約 66% しかレンダリングできませんでした。

とのこと。速くなっても表示が崩れまくってたら意味ないでしょ、ってことでしょうか。 一筋縄ではいかないので対応は見送り．．．

このあたりはHTMLの書き方とかCSSフレームワークとかによっても違ってきそうです。上手くハマるサイトならloadCSSは有力だと思います。

CSS を縮小する

HTMLはminifyしているのですが、CSSはそのままになっていました。

タスクランナーにgulpを使っているのでgulp-clean-cssを導入します。 Gulpを利用してJavaScriptとCSSを圧縮する - takedajs ログ を参考にセットアップ。

対応後はパソコン: 89 => 89で変化なし、モバイル: 66 => 68とスコアやや改善。もともと小さめのCSSなので効果薄だったようです。

画像を最適化する

自前で用意している画像は全て最適化済み。指摘されているのはAmazonから拝借している商品画像なので対応できないです．．．

まとめ

もうちょっと簡単に高スコア取れるかなーと思っていましたが甘かった．．．

スコアが全てじゃないですが「速さは正義」というのは事実。PageSpeed Insightsはスコアと改善点を具体的に示してくれるので、できる対策はちゃんとやっておきましょう。

参考URL

コメント欄を表示する

関連(するかもしれない)記事

おススメ