【PageSpeed Insights沼】絶賛ハマり中!モバイルパフォーマンス30点台から抜け出す
別運用しているサイトのスマホからのアクセスがイマイチなので、本腰入れて調べたらいろいろと問題がありすぎで笑っています。
PageSpeed InsightsというGoogleが提供しているサイトのパフォーマンス評価ツールによれば、なんと不合格を付きけられ、実際の点数は33点ということになりました(汗)
自慢じゃありませんが学生時代にも取ったことのない点数です。
せめて合格点を叩き出そうということで、あえて沼に飛び込んで奮闘している様子をレポートしたいと思います。
もくじ
PageSpeed Insightsの評価
サイトのパフォーマンス評価の結果はこちら。
パフォーマンスの問題を診断した結果がこちら。
ズタボロです(汗)
用語理解
さて、あまり聞き覚えのない用語が出てきているのですが、ひとつずつ解説します。
対象はこちらの4つの指標です。
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
First Contentful Paint (FCP)
ユーザーがURLをクリックしてからサイトが表示されるまでの時間です。
サイトが表示されることを「レンダリング」と言いますが、このレンダリングという言葉の意味を知らない方もいるでしょうけど、まあ、同じ意味と認識しておればよいです。。
専門的な解説が必要ならば、「レンダリングとは」といった感じで検索してください。
Largest Contentful Paint (LCP)
直訳すると「最大コンテンツの描画」となるのですが、最も大きな画像やコンテンツを読み込む時間とも言えます。
サッと表示される方が良いわけですが、画像も大き目で見せたいというジレンマがあると、よくココで引っかかります。
First Input Delay (FID)
直訳すると「最初の入力の遅延」ということになりますが、これでは意味不明ですよね。
例えば、あるページのURLをクリックあるいはタップしてページが表示された後、ヘージ内のリンクをクリックあるいはタップなどの初動までの時間と言えます。
今回の評価では「なし」となってますが、そりゃそうです、アクセスが無いからね!!
ここで大概問題となるのは、大量JavaScript実行のためにユーザーが次の行動に移せない、つまりクリックやタップができない状況だと、評価が悪くなりがちです。
Cumulative Layout Shift (CLS)
いつものように直訳しますと「累積レイアウト入り替わり」になるかと思いますが、こんな経験ありません?
リンクをクリックしようとしたら画像で出てきてリンクが下に移動した
文章を読もうとしたら画像が出現して下に追いやられてしまった
つまりページが完全に表示されるまでレイアウトがズレたりすると評価が下がる指標です。
評価改善の方法
たくさんありすぎて困っちゃう(汗)
PageSpeed Insightsでは、
- 改善できる項目
- 診断
として具体的に指摘していますので、それを粛々と改善していくのみですが、これはまた次の機会に・・・。
まとめ
「【PageSpeed Insights沼】絶賛ハマり中!モバイルパフォーマンス30点台から抜け出す」というテーマで、PageSpeed Insightsの指標の解説をしました。
改善の前に指標の理解が必要な印象を受けましたので、このような記事を書きました。
それにしても33点はヒドイので、これから何とかします。
