「LCP リクエストの検出」と言われる時

PageSpeed Insights で「LCP リクエストの検出」と言われる時にどうすればよいかについて書く．

「fetchpriority=high」を適用する必要があります

と言われる場合，img タグを使っているところが指摘されている場合は，その img タグに属性として，

fetchpriority="high"

を入れればよいので，これで終了．

img タグでなく，別のタグが指摘されている場合

そして，その画像がスタイルシートで

background: #ededed url(/images/mains.avif) no-repeat center center;

のように background で指定されている場合，どうすればよいか困る．
このような場合は

<link rel="preload" fetchpriority="high" as="image" href="/images/mains.avif">

を head 部分に入れて先読みさせて，その時に pre タグの属性に fetchpriority="high" を入れてやればよい．

これでこの警告は消える．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• テキスト圧縮の有効化
• タップ ターゲットのサイズが適切に設定されていません
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• 背景色と前景色には十分なコントラスト比がありません
• リンクに識別可能な名前が指定されていません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした
• 「INP の問題」の改善方法