どんな状況だったかというと
メインランディングの LCP が 3.8 秒と出ました。ちょっと遅いですよね。
LCP は画面で一番大きい要素が描き終わるまでの時間です。利用者が「あ、もう見られるな」と感じる時点なので、体感速度とほぼ直結します。なので largest-contentful-paint 指標を基準にボトルネックを一つずつ追いかけてみました。
どう直したかというと
まずヒーロー画像に priority を付けました。これを付けると、ブラウザが「これは先に受け取るべきものだな」と気づいてくれます。
次にフォントの preload を整理しました。必要ないものまで先に読み込んでいたんです。critical-rendering-path の観点で言うと、描画をブロックして立ち止まっているリソースを減らす作業でした。
import Image from "next/image";
export function Hero() {
return <Image src="https://picsum.photos/seed/hero/1200/630" alt="Hero" width={1200} height={630} priority />;
}
結果はというと
LCP が 2.1 秒まで下がりました。3.8 秒から 1.7 秒を削ったことになります。
学んだ点
リソースに優先度を付けるだけで体感速度がぐっと変わります。 ファイルを小さくしたわけでもなく、受け取る順番を変えただけなのに、です。
ブラウザは、こちらが何を先に見せたいのかを知りません。教えてあげれば、その通りにしてくれます。