読み込みの遅いページ
Silktide は実際のブラウザでページを読み込み、メインコンテンツが画面に表示されるまでの時間を測定します。これは、最大の画像またはテキストブロックが表示されるタイミングを測る、業界標準の指標である「最大コンテンツの描画(Largest Contentful Paint)」を使用します。
最大コンテンツの描画(LCP)は、Google の の1つです。すべてのファイルのダウンロードが完了するまで待つといった従来の指標よりも、「ページが読み込まれた」と人々が自然に感じる状態を的確に反映します。
重要な理由
訪問者は最初の数秒でウェブサイトを判断します。メインコンテンツの表示が遅いページでは、何も読まれないうちに訪問者が離脱します。多くの調査で、読み込み時間が1秒増えるごとに離脱率が測定可能なほど上昇することが示されています。特にモバイルではその傾向が顕著です。LCP は Core Web Vital であるため、遅いページは検索結果で下位に表示される可能性もあります。つまり、遅いページは実際に訪れる訪問者を失うだけでなく、本来訪れるはずだった訪問者の一部も失うことになります。
修正方法
Silktide は、ページ上で最も大きい要素を表示します。その要素をより早く表示できるようにする必要があります。
- 画像の場合は、より小さく、より速く表示できるようにします。圧縮し、最新の形式を使用し、表示サイズに合わせて配信します。画像の最適化を参照してください。メイン画像をしないでください。
- スタイルシートやページの表示をブロックするスクリプトなど、レンダリングを遅らせるものを削除するか、後から読み込むようにします。レンダリングをブロックするリソースを参照してください。
- サーバーの最初の応答を高速化します。その他の処理はすべて を待つためです。キャッシュと が役立ちます。
Silktide によるテスト方法
- 実際のブラウザでページを読み込み、最大コンテンツの描画にかかった時間をミリ秒単位で測定します。
- その時点で最も大きかった要素を特定し、表示します。
- 標準の LCP 閾値を使用して結果を評価します。2.5秒以下は良好で、4秒を超えると不良とみなされます。
トラブルシューティング
測定結果よりページが速く感じられる
LCP は空の を使った初回訪問を測定します。これは新しい訪問者が体験する状態です。同じページへの再訪問ではキャッシュされたファイルが再利用されるため、はるかに速く感じられます。
最大の要素が重要な要素ではない
LCP は、最も大きい要素の表示タイミングを測定します。通常は、ヒーロー画像や見出しが該当します。背景画像など、付随的な要素が LCP になっている場合でも、それを高速化すれば訪問者が感じる表示速度も向上します。周囲のすべての要素の描画が同じ修正によって改善されるためです。
詳しく見る
- ページ速度と Core Web Vitals - LCP とその他の指標に優先順位を付けるためのフレームワーク
- 最大コンテンツの描画(web.dev)
- LCP の最適化(web.dev)
- レンダリングをブロックするリソース