テクニカル
preload
重要なリソースを優先的に先読みさせるリソースヒント。LCP要素の表示を早める。
preloadとは？
preloadは<link rel="preload">で記述し、「このリソースは重要なので早めに取得して」とブラウザに優先読み込みを指示するリソースヒントです。
LCP対象のメイン画像や、重要なWebフォント・CSSをpreloadすると、発見と取得が早まり表示が速くなります。
ただし優先度の付けすぎは逆効果です。
preloadの使い方・実践方法
preloadの効果的な使い方は次のとおりです。
- LCP対象のヒーロー画像をpreload
- 重要なWebフォントをpreloadしてちらつき防止
- 本当に重要なリソースだけに絞る
- preconnect・prefetchと役割を区別
preloadで押さえるべきポイント
preloadは「あれもこれも」付けると、本来優先すべきリソースの取得を奪い合い、かえって遅くなります。
LCP要素1つに絞って効果を測定するなど、対象を厳選して使うのが鉄則です。
preloadを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「preload」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
preloadについてよくある質問
preloadとprefetchの違いは？
preloadは現在のページで今すぐ必要なリソース、prefetchは次に訪れそうなページ用の先読みです。
何をpreloadすべき？
LCP対象の画像や重要フォントなど、表示の鍵を握る少数のリソースに絞ります。
付けすぎるとどうなる？
優先度の競合で本当に重要なリソースの取得が遅れ、逆効果になります。