AMP が必要なのは誰ですか? Layzr.js を使用してレスポンシブ画像を遅延読み込みするプロセスを簡素化する

Google の Accelerated Mobile Pages (AMP) プログラムは、最近ウェブサイトの高速化に貢献しています。 Google は優れたテクノロジーと強力なコンテンツ配信ネットワークを利用して、AMP で強化されたウェブサイトを直接高速化します。ただし、AMP は、AMP に含まれる最適化やベスト プラクティスを検討するよう促すことで、間接的にも機能します。サイトを AMP 互換にする予定がない場合でも、非 AMP サイトを最適化するための To-Do リストとして AMP を理解すると役立ちます。

このリストの最適化の 1 つは「遅延読み込み」と呼ばれる手法で、AMP の カスタム要素の使用に関する最近の記事で実際に使用されている様子を確認しました。この手法を使用すると、訪問者が最初にページに到着したときに、ビューポート内またはその近くの画像のみが読み込まれます。訪問者が下にスクロールすると、ページの残りの部分の読み込みがトリガーされます。

遅延読み込みにより、訪問者はコンテンツの操作をより速く開始できるようになり、読み込み速度が向上することで検索エンジンのランキングが向上します。ページ上の画像が多いほど、速度が大幅に向上します。

このチュートリアルでは、Layzr.js というスクリプトを使用して非 AMP ウェブサイトに遅延読み込みをデプロイする方法を学びます。 AMP の <amp-img></amp-img> 要素の機能を可能な限り再現しますが、Layzr に固有の機能もいくつか使用します。

始めましょう!

1. 基本設定

記事「AMP プロジェクト: ウェブサイトを高速化しますか?」の一部として、5 つの画像を含む基本レイアウトを作成しました。 AMP の使用と遅延読み込みを自分でデプロイすることを比較できるように、同じ 5 つの画像レイアウトを再作成します。このチュートリアルの後半で、さまざまな読み込み速度テストを実行する方法を説明します。

このチュートリアルに付属のソース ファイルには、レイアウトの AMP バージョンと、ここで作成する完全バージョンが含まれています。どちらの方法が自分にとって最適かを判断するのに役立つように、両方が含まれています。

すべての手順を実行する際には、Chrome デベロッパー ツール (F12) を使用して作業をテストし、無効にチェックが入ったキャッシュ # で ネットワーク タブを開くことをお勧めします。 ## そして制限を 通常の 3G に設定します。これは平均的なモバイル接続をシミュレートし、リアルタイムで読み込まれた各画像のグラフを表示し、遅延読み込みがどのように実行されているかを明確に把握するのに役立ちます。

テストするページを更新するときは、

Reload ボタンを押したままにします。これにより、さまざまなオプションを示すドロップダウン メニューが表示されます。 [キャッシュのクリアとハード リロード] を選択して、初めてサイトに到着する訪問者を完全にシミュレートします。

HTML シェルの作成

基本的なことから始めましょう。まず、プロジェクトを格納するフォルダーを作成し、その中に

index.html というファイルを作成します。

編集のために開き、次のコードを追加します:

リーリー

上記のコードでは、HTML シェルを取得し、いくつかの CSS を組み込んで、ページの

body と画像の周囲に予期しないギャップがないことを確認します。

また、後で追加する画像が中央に配置されるように、

margin: 0 auto; も含めます。

Layzrをロード

layzr.js スクリプトには、簡単にロードできる 2 つの CDN オリジンがあります。ここでは Cloudfare のオリジンを使用します。

このコードを HTML の終了

以上がAMP が必要なのは誰ですか? Layzr.js を使用してレスポンシブ画像を遅延読み込みするプロセスを簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。