［PageSpeed Insights実績］獲得点数99点｜塗装リフォーム会社様

今回事例として取り上げるのは塗装会社様です。既に弊社にてリニューアル済みであるのですが、数年経ちPageSpeed Insightsの点数が低くなっていました。今回訴求点の見直しも含めて改めてPageSpeed Insights対策を実施しました。

対応前の点数63点

まずは対応前の状況です。ご覧のようにパフォーマンスが63点です。

ユーザー補助、おすすめの方法、SEOは100点ですが、パフォーマンスのスコアが低い。今回、PageSpeed Insightsの改善を対応しました。

PageSpeed Insightsでの指摘は以下4点です。

1. 「最大コンテンツの描画」要素
2. 第三者コードの影響を抑えてください
3. Largest Contentful Paint の画像が遅延読み込みされています
4. 使用していない JavaScript の削減

②④は現在使用していない不要な外部JavaScriptを削除しました。③はファーストビューの要素に遅延読み込みが適用されていたので解除しました。①は今回なかなか骨が折れる対応を行っています（詳細は後述）。

PageSpeed Insights点数99点

さて改善後の結果はこちらです。最終的にPageSpeed Insightsの点数は99点となりました。

今回、LCPのスコアが低く、特に「最大コンテンツの描画」要素がなかなか改善できず80点台に留まっていました。「最大コンテンツの描画」要素はファーストビューにおける最大のコンテンツ要素が表示されるまでの時間です。PageSpeed Insightsでは「最大コンテンツの描画」要素の該当箇所をこのように指摘してくれます。

しかし、PageSpeed Insightsに取り組むとわかりますが指摘箇所への対応では改善効果が現ないことがあります。これ以上の改善は「最大コンテンツの描画」要素の内訳を見て予測する必要があります。

「最大コンテンツの描画」要素では「TTFB」「読み込み遅延」「読み込み時間」「レンダリング時間」と4つの指標でLCPへの影響度合いを示します。今回は「読み込み遅延」が50％とLCPスコアへ大きく影響を与えていることがわかります。

「読み込み遅延」の割合が高いと言うことはLCPリソースの読み込み開始までの時間が遅いことになります。つまりLCPで対象となっている要素を改善するのではなく、LCPが開始される前の部分で影響を受けていることがわかります。ということで以前の記事にある通りの対策を行いましたが、それでもスコアが80点までしかいきませんでした。

PageSpeed Insights施策のポイント

今回、特に注視したのは以下2点です。

• CSS軽量化
• 画像の総数を減らす

CSSの軽量化とはまずCSSネストを利用してCSSの記述量を減らすことです。その上で使用していないCSSは読み込まないようにしました。トップページ専用のCSSはトップページのみ読み込む、というようなことです。

ある程度の規模のページはこれだけで改善ができるのですが、今回のお客様の場合はこれでも改善が見えませんでした。そのため画像の総数を減らしました。これが効果的で一気にスコアが99点となりました。

画像の総数を減らすと言うのはIMGタグの数を減らすと言うことです。具体的にいうとIMGタグで表示していた画像を背景画像にしました。なので見た目は変わりません。IMGタグと背景画像はHTMLレンダリングでは扱いが異なります。IMGタグの数を減らすことで「読み込み遅延」の改善ができました。

あと1点の減点対応について

今回PageSpeed Insightsの点数は99点です。1点の減点は何なのかと気になりますね。指摘箇所はこちらです。

JavaScriptを削除するように指摘されています。該当ページで使用しているJavaScriptはGoogle AnayticsとjQueryです。jQueryは動画再生部分で使用しているので、これを控えることで100点も可能かなと考えます。ただPageSpeed Insights対策のためにどこまで表現を控えるのかという話にもなるので今回はここまでとしています。PageSpeed Insights対策についてはこちらの記事もご覧ください。