走ったことがあるなら ページスピードインサイト 分析してみると、改善の余地の 1 つとして、「オフスクリーン画像の延期」（遅延読み込みとも呼ばれる）が表示される可能性があります。この記事では、コアウェブバイタルと画像最適化に関する 3 部構成のシリーズの最終回です。遅延読み込みとは何か、なぜ重要なのか、どのように実装するのかについて説明します。
シリーズのパート2では、適切な画像圧縮、サイズ変更、および次世代の画像変換を使用して、Largest Contentful Paintを改善する方法について説明しました。シリーズ全体をフォローし、ウェブパフォーマンスと SEO を改善する方法については、以下のリンクをご覧ください。
レイジーローディングとは
靴の高解像度写真が100枚掲載された電子商取引ページを想像してみてください。ブラウザがすべての写真を一度に読み込むと、スクロールする前にページの下部にある写真が表示されても、ビューポートの写真は表示されないことがあります。これにより、ユーザーエクスペリエンスが低下する可能性があります。
遅延読み込みは、訪問者がスクロールして画像がビューポートに入るまで、画面外の画像の読み込みを遅らせる手法です。これにより、いつでも読み込む画像の数が減り、各画像の読み込み時間が短縮されるため、Largest Contentful Paint を改善できます。
遅延読み込みは初回入力遅延 (FID) も改善できます。FID は、ページがユーザーの最初の操作 (クリックなど) に応答するまでにかかる時間です。画像などの大きなコンポーネントの読み込みを戦略的に遅らせることで、Web サイトは JavaScript を処理し、インタラクションに迅速に応答できます。
遅延読み込みの実装方法
遅延読み込みの実装方法は、コードベースとサポートしているブラウザによって異なります。さらに 読み込み中=「レイジー」は Chrome でサポートされている HTML 属性です。デベロッパーは JavaScript を使用したり、または 交差点オブザーバー API 要求。次のチャートは caniuse.com どのブラウザが HTML 遅延読み込み属性をサポートしているかを示します。
しかし、ブラウザの変化の速さとその独自の機能を考えると、開発者は lazysizes.js JavaScript をベストプラクティスとして使用することを検討する人が増えています。次のビデオでは、Cantilever のパートナーが Cantilever のデモンストレーションと比較を行っています。 読み込み中=「レイジー」 および lazysizes.js の実装です。
ベストプラクティス:lazysizes.js + imgix.js
lazysizes.js と imgix.js を併用することは、imgix イメージ最適化と遅延読み込みの利点を組み合わせるのに最適な方法です。これがメタプロパティとしてどのように行われるかの例を次に示します。
<head>
<meta property="ix:srcAttribute" content="data-src">
<meta property="ix:srcsetAttribute" content="data-srcset">
<meta property="ix:sizesAttribute" content="data-sizes">
</head>
そして、これがJavaScriptでどのように行われているかの例を次に示します。
imgix.config.srcAttribute = 'data-src';
imgix.config.srcSetAttribute = 'data-srcset';
imgix.config.sizesAttribute = 'データサイズ';
レイジーローディングでプレースホルダーを使用する
遅延読み込みのリスクは、ページレイアウトが不安定になり、累積レイアウトシフトスコアが低下する可能性があることです。たとえば、訪問者がすばやく下にスクロールして画像のキャプションを読み始めると、その画像が突然表示されてキャプションが見えなくなることがあります。
この問題を軽減するには、低品質のプレースホルダーを使用するか、 ブラーハッシュ完全に詳細なバージョンを読み込むのに適切になるまで、このサイズは 1 フレームを占有することになります。
リソース
このブログは、コアウェブバイタルに関するシリーズを締めくくります。ウェブサイトのパフォーマンスを向上させる取り組みに役立つことを願っています。このシリーズの以前の記事を見逃した方は、こちらからご覧ください。
