PageSpeed Insights数値向上策 パフォーマンス低評価３悪 CSS・JavaScript・画像 Googleサイトは成績優秀か？

PageSpeed Insightsの指標の意味

Googleは検索の帝国を築き上げているので、検索経由で自サイトに集客したいWebサイトは隷属せざるをえない

PageSpeed Insightsにからむ用語もろもろとしては

Core Web Vitals

• LCP(Largest Contentful Paint)：ページの表示速度/読み込み時間
• FID(First Input Delay)：インタラクティブ性
• CLS(Cumulative Layout Shift)：レイアウトがくずれる可能性

それらのgoogleの解説ページ

• https://web.dev/lcp/
• https://web.dev/fid/
• https://web.dev/cls/

PageSpeed Insightsの重要項目

First Paint

First Paint を速くするには

1. HTML マークアップから DOM ツリーを構築する
2. CSS マークアップから CSSOM ツリーを構築する
3. DOM ツリーと CSSOM ツリーを組み合わせてレンダリングツリーを構築する
4. レンダリングツリーを使って画面にピクセルをレンダリングする（= ペイントする）

FCP：First Contentful Paint

ブラウザーがURL認識してから、Webページの何らかのパーツがレンダリング(ブラウザー表示)されはじめるまでの時間が、First Contentful Paint
また、ややこしいが、コンテンツとして意味のある部分が表示されることがFirst Meaningful Paint(FMP)

CLS：Cumulative Layout Shift

UX指標のCore Web Vitalsに含まれる指標の1つ
文字どおり、レイアウトがくずれる可能性のDOM・CSSOMが問題
ユーザーに、視覚的に安定していて使いやすいUI/UXのページになるように
とくに、あとから読み込まれる箇所の場所や大きさが、先に読まれた箇所のレイアウトを壊すことに注意

Googleサイトの成績は優秀なのか？

さて、意地悪く、GoogleサイトをGoogleのPageSpeed Insightsでチェックしてみよう

android.comのPageSpeed Insights成績

https://www.android.com/

あえてGoogleの画像多めのサイトを選んでPageSpeed Insightsチェック
案の定、成績はよくない

apple.comのPageSpeed Insights成績

さらに絶対にPageSpeed Insightsの成績が悪いと予想されるAppleのサイトをチェック

https://www.apple.com/jp/

まあ、こちらも成績はかんばしくなく、こういうサイトを作れば、PageSpeed Insights成績はよくないという証左だろう

material.ioのPageSpeed Insights成績

https://m3.material.io/

次に、やはりGoogleサイトでとくにビジュアルに凝っているサイトを選んでPageSpeed Insightsでチェックしてみると、これまた予想どおりの低成績
ソースを見ずにブラウザー画面を見るだけでも、画像多めの場合はそれに付随していろいろ仕掛けもあるだろうから、重く遅くなるのは想定内か

Androidヘルプは画像少なめだが…

https://support.google.com/android

コンテンツが少なく、画像もほとんどないページでも、パフォーマンスは不合格ながら60程度が精一杯
結局、これが世の中の真実の姿、Webサイトもユーザーのことを考え、ビジネス的な成果かを考えると、PageSpeed Insightsの成績はほどほどでもいいということかもしれない

スピードアップ、PageSpeed Insights、３悪はCSS・JavaScript・画像

結局、Web表示を重く遅くする”戦犯”は、CSS・JavaScript・画像
記述や容量を少なく、削除・削減・圧縮・サイズダウンすることが望ましい

PageSpeed Insightsを語るWebページの成績はどうなのか？

本家のGoogleさえもPageSpeed Insights成績はよろしくない
同様に、下記の検索ワードで上位表示されているページも、PageSpeed Insightsのパフォーマンス数値はグダグダなものが多い

• PageSpeed Insights
• LCP
  • Largest Contentful Paint
• FID
  • First Input Delay
• CLS
  • Cumulative Layout Shift
• First Paint
• FCP
  • First Contentful Paint
• FMP
  • First Meaningful Paint

さらに、PageSpeed Insightsの警告メッセージ

• レンダリングを妨げるリソースの除外
• 使用していない JavaScript の削減
• 使用していない CSS の削減
• テキスト圧縮の有効化
• 適切なサイズの画像
• CSS の最小化
• メインスレッド処理の最小化
• 第三者コードの影響を抑えてください
• 過大なネットワーク ペイロードの回避
• クリティカル リクエスト チェーンを回避してください
• レイアウトが大きく変わらないようにする
• オフスクリーン画像の遅延読み込み
• JavaScript の最小化
• 過大な DOM サイズの回避

これらの検索ワードで上位表示されているページの90％以上は、PageSpeed Insightsの成績はかんばしくない
客観的に相対的に他者サイトをチェックして安心するか、成績不振で心配するか、自サイトの方針を決定するべきだろう

そのほかの注目するべきPageSpeed Insightsのチェック項目

ユーザー補助

• 見出し要素は降順になっていません
• 背景色と前景色には十分なコントラスト比がありません

テキスト要素は、背景に対して十分な色のコントラストを持っている必要があります

おすすめの方法

• 不適切なアスペクト比の画像が表示されています

レスポンシブな画像を配信する

SEO

• 画像要素に [alt] 属性が指定されていません
• タップ ターゲットのサイズが適切に設定されていません

タップターゲットのサイズが適切でない – Chrome for Developers

モダンWebとPageSpeed Insights

モダンWebとしては、モバイルファースト、スマートフォン最適化、画像多め、テキスト少なめ、小画面に情報が多い、動画やアニメーションなど動く画面

そうなると、従来型のレガシーWebよりも、どうしてもCSS・JavaScript・画像はボリュームアップしてしまう

Googleが、PageSpeed Insightsチェックを強調し、検索アルゴリズムでCore Web Vitalsを採用するのも、逆説的にモダンWebではスピードダウンさせるCSS・JavaScript・画像が増加している、動的Webページが多くなっているということだろう

最終的には、ビジュアル(見栄え)かスピードか、という選択肢となりそうだ