遅延読み込みと BlurHash を使用してコア Web バイタルを改善するための基本ガイド

最近、ウェブサイトの速度はますます重要になってきており、 70% の消費者が、ページの速度がオンラインでの購入の決定に影響を与えると述べていることが調査で示されています。しかし、消費者の経験を超えて、Google は最近 Core Web Vitals (CWV) レポートを更新し、ページのパフォーマンスに関する最も重要な指標に関するガイダンスを提供しました.これは、検索アルゴリズムに関して、ユーザーエクスペリエンスとページパフォーマンスの品質がますます考慮されるようになったことを意味します.

簡単な要約: Core Web Vitals は、Web エクスペリエンスの 3 つの重要な側面 (読み込み、対話性、視覚的な安定性) を測定します。 Core Web Vitals (CWV) と SEO を改善する最も効果的な方法の 1 つは、画像アセットを最適化することです。これを実現するには、適切な画像圧縮、サイズ変更、次世代画像変換など、いくつかの方法があります。

これらの 3 つの手法に加えて、 PageSpeed Insights 分析の改善の機会の 1 つとして、オフスクリーン画像の延期 (遅延読み込みとも呼ばれます) が表示される可能性があります。 BlurHashなどのプレースホルダーを使用することも、認識される読み込み時間を改善し、接続またはサイトで画像の読み込みが遅い場合に、より優れたユーザー エクスペリエンスを提供するための優れたオプションです。

遅延読み込みとは

高解像度の靴の写真が 100 枚掲載されている e コマース ページを想像してみてください。ブラウザーがすべての写真を一度に読み込むと、スクロールする前にページの下部にある写真が表示される場合がありますが、ビューポート内の写真は表示されない可能性があり、ユーザー エクスペリエンスが低下する可能性があります。

遅延読み込みは、訪問者がスクロールして画像がビューポートに入るまで、画面外の画像の読み込みを遅らせる手法です。これにより、一度に読み込む画像が少なくなり、各画像の読み込み時間が短縮されるため、Largest Contentful Paint が改善されます。

遅延読み込みは、First Input Delay (FID) も改善できます。 FID は、ページがユーザーの最初の操作 (クリックなど) に応答するのにかかる時間です。画像などの大きなコンポーネントの読み込みを戦略的に遅らせることで、Web サイトは JavaScript を処理し、インタラクションにすばやく応答できます。以下のnytimes.comの例では、分析当日、遅延読み込みを実装していれば、ページ速度を 1.5 秒改善できたはずです。

遅延読み込みの実装方法

遅延読み込みを実装する方法は、コード ベースとサポートするブラウザによって異なります。開発者は、Chrome でサポートされている HTML 属性である loading=“lazy” に加えて、JavaScript や交差点オブザーバー APIリクエスト。からの次のチャートcaniuse.com HTML の遅延読み込み属性をサポートするブラウザーを示します。

ただし、ブラウザーの変化の速さと独自の機能を考えると、開発者は lazysizes.js JavaScript をベスト プラクティスとして使用することをますます検討しています。次のビデオでは、Cantilever のパートナーが、loading=“lazy” と lazysizes.js の実装を実演して比較しています。

ベスト プラクティス: lazysizes.js + imgix.js

imgix.js と一緒に lazysizes.js を使用すると、imgix 画像の最適化と遅延読み込みの利点を組み合わせることができます。これがメタ プロパティとしてどのように行われるかの例を次に示します。

<頭>

<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 = 'データサイズ';

遅延読み込みでプレースホルダーを使用する

遅延読み込みのリスクは、ページ レイアウトが不安定になり、CLS スコアが低下する可能性があることです。たとえば、訪問者がすばやく下にスクロールして画像のキャプションを読み始めると、画像が突然表示され、キャプションが見えなくなることがあります。この問題を軽減する方法は、低品質のプレースホルダーを使用するか、ぼかしハッシュ、完全に詳細なバージョンをロードするのが適切になるまで、フレームを占有します。

BlurHash コードを画像に適用すると、結果のプレースホルダーは次のようになります。

BlurHash をプレースホルダーとして使用する

ぼかしハッシュは、イメージ プレースホルダーのコンパクト バージョンを作成できるアルゴリズムです。このアルゴリズムは、画像のぼやけた表現をエンコードする文字列を作成します。文字の数は、画像の品質によって決まります。文字列は十分に短いので、ページのマークアップで直接提供できます。その後、画像ファイルをフェッチしてダウンロードすることなく、文字列をぼかした画像にデコードできます。

BlurHash の主な利点は、元のファイルがまだロードされている間に画像のぼやけた表現が表示されるように、大きな画像ファイルをより少量のデータに変換できることです。Wolt のエンジニアBlurHashのアイデアを思いついた低速のインターネット接続で画像がどのように読み込まれるかについて、より良い解決策を見つけようとしています。

BlurHash 機能の使用方法

ぼかした画像を作成するには、任意の画像に fm=blurhash を追加して BlurHash 文字列を取得します。 BlurHash 文字列を取得したら、それを BlurHash コンポーネントで使用できます。 BlurHash コンポーネントは、ハッシュを表示可能な画像にデコードする役割を果たします。

この特定の例では、React BlurHash コンポーネントが最終的なマークアップで canvas 要素を生成します。注: 生成されるマークアップは、使用するライブラリまたはフレームワーク デコーダーによって若干異なる場合があります。

import './App.css';

「react-imgix」から Imgix をインポートします。

import { Blurhash } from "react-blurhash";

関数 App() {

戻る （

<div className="アプリ">

<section className="App-header">

<ぼやけ

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

幅={600}

高さ={400}

/>

<Imgix

src="https://assets.imgix.net/example-images/puffins.jpg"

幅={600}

高さ={400}

/>

</セクション>

</div>

);

}

BlurHash コードを画像に適用すると、結果のプレースホルダーは次のようになります。

ビルド時に BlurHash 文字列をマークアップに含めて、ぼかしたバージョンの画像がユーザーにすぐに表示されるようにします。

お持ち帰り

CWV 指標はこれまで以上に重要になっていますが、良いニュースは、指標を改善するための迅速で影響力のある方法がいくつかあるということです。遅延読み込みと画像の最適化を組み合わせることと、BlurHash のような効果的なプレースホルダーを使用することは、実証済みの結果に到達するための 2 つの方法です。 imgix を使用してこれらの手法を簡単に実装できます。ドキュメンテーションまた無料で試す.