WordPressに遅延読み込みを追加する方法
公開: 2022-01-05WordPressWebサイトのパフォーマンスを向上させる方法はたくさんあります。 画像やその他のメディアファイルは、長い読み込み時間の背後にある最大の原因の一部です。 つまり、画像最適化手法を実装すると、サイトのパフォーマンスに大きな影響を与える可能性があり、遅延読み込みも例外ではありません。
この記事では、遅延読み込みがどのように機能し、それがWebサイトにどのように役立つかについて説明します。 次に、複数のタイプの要素に対してWordPressで遅延読み込みを追加する最も一般的な方法のいくつかを紹介します。 最後に、この設定が引き起こす可能性のある最も一般的な技術的な問題のいくつかについて説明します。
それを手に入れよう！
私たちのYoutubeチャンネルを購読する
遅延読み込みとは何ですか？
通常、Webサイトにアクセスすると、そのすべてのコンポーネントが一度に読み込まれます。 ブラウザには、ページ上のすべてのメディアアセット、テキスト、リンク、およびその他の要素が表示されます。 ページに画像などの多くのメディアアセットがある場合、読み込み時間が大幅に遅くなる可能性があります。
画像がページの読み込み時間に与える影響を減らす方法はたくさんあります。 画像を最適化し、ブラウザのキャッシュを有効にし、コンテンツ配信ネットワーク（CDN）を使用し、より小さなファイルタイプを選択できます。 理想的には、Webサイトのように高速なものはないので、さらに一歩進んで、これらの最適化を可能な限り多く実装します。
遅延読み込みでは、画像ファイルのサイズが小さくなったり、各ユーザーの読み込みにかかる時間が変更されたりすることはありません。 対照的に、この設定では、ブラウザのビューポートがそのファイルを含むページのセクションに到達するまで、各画像の読み込みを延期できます。
実際には、レスポンシブサイトがすでにある場合、読み込みの延期は、ユーザーがWebサイトを操作する方法に最小限の影響しか与えません。 ほとんどの訪問者は、ページをスクロールするときに画像が表示されることに気付かないはずです。 同時に、ユーザーがすべての画像を同時にリクエストして読み込む必要がないため、初期読み込み時間が短縮されるというメリットがあります。
WordPressでの遅延読み込みの利点は何ですか？
読み込みを遅らせると、最初の読み込み時間を短縮できます。 これは、読み込みに3秒以上かかる場合、ユーザーの40％がWebページを離れることを考慮する場合に不可欠です。 したがって、この設定により、訪問者はサイトにとどまり、コンテンツを閲覧するようになります。
さらに、ロードを遅らせることで、メモリとストレージへの負担を軽減できます。 そのため、それを使用すると、より手頃なウェブサイトホスティングプランを選択できる可能性があります。
WordPress 5.5以降、コンテンツ管理システム（CMS）の遅延読み込みはデフォルトで行われることに注意してください。 ただし、デフォルトのアプローチがCoreWebVitalsのスコアに悪影響を与える可能性があるかどうかについてはいくつかの論争があります。
デフォルトでは、遅延ロードにより、用紙のロード時間が改善されます。 ただし、最大のコンテンツフルペイント（LCP）スコアを損なう可能性もあります。
LCPは、任意のページの最大の画像またはテキストブロックが読み込まれるまでにかかる時間を測定します。
WordPressは、Webサイトの画像にHTMLのloading=lazy属性を使用します。 一般的に言えば、これが遅延ロードを実装する最も簡単な方法です。 ただし、すべてのブラウザがその属性をサポートしているわけではありません。
特定の画像の遅延読み込みを無効にする場合は、HTMLを使用してその属性を手動で変更する必要があります。 別の方法は、別のアプローチで遅延ロードを実装するWordPressプラグインを使用することです（これにより、より詳細な制御が可能になります）。
他の要素は遅延読み込みできますか？
技術的に言えば、Webサイト上のほとんどすべての要素の読み込みを延期できます。 遅延読み込みは画像で驚くほどうまく機能し、ビデオアセットのキラー機能でもあります。
メディアアセットの他に、JavaScriptやCSSなどのコードの読み込みを延期することもできます。 実際、First Contentful Paint（FCP）スコアを向上させるために、Webサイトでのレンダリングをブロックする可能性のあるスクリプトを遅らせることをお勧めします。
次に、テキストアセットの遅延読み込みを選択することもできます。 ただし、これはユーザビリティの観点からは良い習慣ではありません。 さらに、1冊の本全体に相当するテキストをページに表示しても、読み込み時間に大きな影響を与えることはありません。
遅延ロードは、ロード時間に大きな影響を与える重いメディアアセットに最適です。 ただし、WordPressコアは画像の遅延読み込みのみをサポートします。 そのプラクティスを他の要素に拡張したい場合は、別の実装を探す必要があります。 そこでプラグインが登場します。
WordPressで画像とビデオの遅延読み込みを追加する方法
前に述べたように、WordPressはデフォルトですべての画像に遅延読み込みを追加します。 ただし、遅延ロードする画像を制御することはほとんどできません。 別のアプローチを選択する場合は、a3LazyLoadプラグインを使用することをお勧めします。
ステップ1：a3LazyLoadプラグインをインストールしてアクティブ化する
a3プラグインを使用すると、特定の画像やページを遅延読み込みから除外できます。 さらに、それはあなたのウェブサイト上のビデオの遅延ロードもサポートします：
このプラグインは、外部画像や動画の遅延読み込みのサポートも追加します。 これは、WordPressのコア実装では実行できないことです。
WordPressダッシュボードからプラグインをインストールしてアクティブ化します。 これで、ツールの設定をカスタマイズできるようになります。
ステップ2：プラグインの画像設定を調整する
次に、 [設定]>[a3遅延読み込み]に移動します。 Lazy Load Activationの下を見ると、インストール後にプラグインがデフォルトでオンになっていることがわかります。
[ LazyLoadImages ]タブを開きます。 （1）Webサイト内で遅延させる画像を選択し、（2）JavaScriptをブロックするブラウザーのフォールバックを有効にすることができます。 （3）読み込みを延期したくない画像のCSSクラスを設定することもできます。
デフォルト設定ではすべてのオプションがオンになっているため、維持することをお勧めします。 先に進み、特定の画像の遅延読み込みをスキップできるようにするCSSクラスを設定します。
ステップ3：プラグインのビデオ設定を調整する
次に、[動画とiframeの遅延読み込み]タブに移動します。 画像の場合と同様に、a3 Lazy Loadを使用すると、特定のクリップの遅延読み込みを選択できます。
プラグインは、（1）コンテンツとウィジェットのビデオをサポートし、（2）JavaScriptをブロックするブラウザーのフォールバック機能を提供します。
ビデオ設定（3）を使用すると、特定のビデオを遅延ロードから除外するCSSクラスを指定できます。 設定を簡単にするために、画像セクションで選択したものと同じクラスを使用できます。
手順4：遅延読み込みを無効にする（オプション）
最後に、特定のタイプのページの遅延読み込みを無効にする場合は、 [URLとページタイプで除外]タブで無効にできます。 ここでは、遅延読み込みを使用してはならない特定のページまたはコンテンツタイプを入力できます。
プラグインの設定への変更を保存すれば、準備は完了です。 特定の要素の遅延読み込みを無効にする場合は、エディターを開き、構成する画像またはビデオブロックを選択します。
ブロック設定メニューを開き、[詳細設定]タブに移動して、[追加のCSSクラス]フィールドを見つけます。
このフィールドを使用して、プラグインの構成中に設定した遅延読み込み除外クラスを追加できます。 これを行うと、ユーザーがサイトにアクセスしたときにその画像が即座に読み込まれます。
遅延読み込みの問題のトラブルシューティング
遅延読み込みは便利でWordPressのコア機能ですが、Webサイト内でいくつかの種類のエラーが発生する可能性もあります。 このセクションでは、これらの問題とは何か、およびそれらのトラブルシューティング方法について説明します。
折り目の上の画像の問題
一般的に、折り目の上に画像を遅延ロードしないことをお勧めします。 「スクロールしなければ見えない位置」とは、訪問者がWebサイトからページをロードしたときに最初に表示されるビューポートを意味します。
折り目の上の画像を延期すると、FCPスコアに影響を与える可能性があります。 また、ユーザーがWebサイトにアクセスしたときの第一印象にも影響を与える可能性があります。
簡単な解決策は、ページヘッダーやその他の上位要素の画像の遅延読み込みを無効にすることです。 たとえば、このページを取り上げる場合、（1）ロゴと（2）ヘッダーの背景の遅延読み込みを無効にすることをお勧めします。
WordPressでは、遅延読み込みのネイティブ実装を無効にするために、Webサイトにコードを追加する必要があります。 特定のメディアアセットの遅延読み込みをオフにする最も簡単な方法は、前のセクションで説明したように、a3LazyLoadなどのプラグインを使用することです。
遅延ロードによるレイアウトシフト
ページを読み込んでいるときにレイアウトのシフトが発生し、要素が表示されると要素が移動します。 累積レイアウトシフト（CLS）は、レイアウトシフトを測定するコアWebバイタルです。 場合によっては、遅延読み込みの実装が不十分だと、WebサイトのCLSスコアに影響を与える可能性があります。
ページ上の要素が一度に読み込まれるわけではありません。 代わりに、プロセスがブラウザ上でほぼ瞬時に見える場合でも、それらは1つずつ実行されます。 他の要素の後にロードされる画像ファイルがある場合、それらはそれらのアセットを移動できます。
この問題の解決策は、WordPressでフルサイズの画像を使用しないようにすることです。 写真をWordPressにアップロードすると、CMSは自動的に写真のサイズを標準化された解像度に変更します。
標準の解像度を使用すると、読み込みが延期された場合でも、レイアウトが大幅にシフトする可能性が低くなります。 ファイルごとに画像のサイズを手動で指定することもできます。 ただし、これは時間のかかるプロセスです。 つまり、独自の寸法で表示したい画像に対してのみ実行することをお勧めします。
プラグインの読み込みとキャッシュの延期に関する問題
キャッシングプラグインが遅延読み込みツールと競合することはよくあることです。 WP Rocketなどの一部のキャッシュプラグインには、組み込みの遅延読み込み機能が含まれています。 この機能をa3LazyLoadなどの遅延読み込みプラグインで使用すると、多くの場合、競合が発生します。
ツールの競合が原因で画像が表示されないという問題を回避するために、プラグインの1つのファミリを使用することをお勧めします。 遅延読み込みプラグインとキャッシュプラグインの両方を有効にしていて、エラーが発生し始めた場合は、最初に前者のオプションを無効にすることをお勧めします。
遅延読み込みプラグインを無効にした後、画像が正しく読み込まれているかどうかを確認してください。 その場合、キャッシュツールにはおそらく組み込みの遅延読み込み機能が付属しています。 つまり、その機能のために追加のソフトウェアをセットアップする必要はありません。
結論
遅延読み込みはWordPressのコア機能の一部ですが、その実装を改善する方法があります。 a3 Lazy Loadなどのプラグインを使用して、サイトでの遅延読み込みをより詳細に制御できます。 適切なプラグインを使用すると、外部アセットの遅延読み込みを構成および除外することもできます。
遅延読み込みの実装方法によっては、ページの読み込み時間を大幅に短縮する必要があります。 ウェブサイトのメディアが多いほど、より良い結果が得られます。これらはすべて、ユーザーエクスペリエンスに悪影響を与えることはありません。
WordPressでの遅延読み込みの使用について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！
vectorplus/shutterstock.com経由の注目の画像