WordPress で遅延読み込みする方法 (画像とビデオ)

公開: 2023-05-25

あなたがウェブサイトの所有者であれば、おそらく過去に少なくとも一度はサイトの速度について考えたことがあるでしょう。 結局のところ、Google は検索結果のどこにサイトを配置するかを決定する際に速度を考慮しています。 したがって、サイトの読み込みが遅いと、ランキングの面で不利になります。 そして、ランキングが上がるとトラフィックが増えることは誰もが知っています。

では、WordPress サイトができるだけ早く読み込まれるようにするにはどうすればよいでしょうか? 1 つの方法は、画像を遅延ロードすることです。

遅延読み込みは、画像やビデオのレンダリングを必要になるまで遅らせる手法です。 これを実装するとサイトの速度が大幅に向上します。嬉しいことに、これを機能させるのに開発者である必要はないということです。

今日は、プラグインを使用する場合と使用しない場合の 2 つの方法を使用して、WordPress に画像とビデオを遅延読み込みする方法を説明します。

遅延読み込みとは何ですか?

遅延読み込みは、ページ速度を向上させるために使用される一般的な手法です。 アイデアはシンプルです。訪問者が最初に到着したときにページ上のすべての画像を読み込むのではなく、表示されている画像のみをレンダリングします。 次に、訪問者がページを下にスクロールすると、必要に応じてさらに画像が読み込まれます。

これは、訪問者がページの一番下までスクロールしない場合、表示されたページの領域の下にある画像は決して読み込まれないことを意味します。 したがって、遅延読み込みにより、ページの読み込み時間を貴重なミリ秒 (または数秒) 節約できます。

さらに、遅延読み込みは帯域幅の節約にも役立ちます。 これは、モバイル デバイスでサイトにアクセスするユーザーがいる場合に特に重要です。 表示されない画像やビデオの読み込みを延期することで、使用されるデータ量を削減できます。

遅延読み込みはどのように機能しますか?

一般に、遅延読み込みは 2 つの方法のいずれかで機能します。 WordPress バージョン 5.5 以降では、「loading」と呼ばれる HTML5 属性が追加されています。 この場合、ブラウザーは追加の JavaScript を必要とせずに、遅延読み込みプロセスのすべての部分を処理します。

HTML5 の属性が開発される前に開発されたもう 1 つの方法は、創造的な JavaScript を使用するものです。 この場合、ページの読み込み時に空のプレースホルダーが提供され、次に JavaScript を使用して画像がビューポートに入るときに読み込まれます。

いずれの場合も、ブラウザが必要とする画像のみがロードされます。 訪問者がページを下にスクロールすると、他の画像が読み込まれます。

これを行うにはいくつかの方法がありますが、以下で詳しく説明します。 しかし、これが遅延読み込みの仕組みの要点です。

遅延読み込みの利点は何ですか?

画像の遅延読み込みには主に 3 つの利点があります。

  • サイト速度の向上
  • 帯域幅使用量の削減
  • より良いユーザーエクスペリエンス

通常、遅延読み込みを実装する主な動機は、サイトの速度の向上です。 不要な画像のレンダリングを待つことで、ページの読み込み時間を短縮できます。 これは、ページ上に多数の画像がある場合、または画像が大きい場合に特に当てはまります。

次に、遅延読み込みは帯域幅の節約に役立ちます。 訪問者がページを下に移動しなければ、決して表示されない画像を読み込む無駄な帯域幅は発生しません。

最後に、遅延読み込みによりユーザー エクスペリエンスが向上します。 これは、訪問者がサイトへのアクセスを開始する前に、ページ上のすべての画像が読み込まれるのを待つ必要がないためです。

WordPress はデフォルトで遅延読み込みしますか?

はい、WordPress 5.5 以降、遅延読み込みはインストール時にデフォルトで自動的に有効になります。 ただし、非常に簡単で直感的にエクスペリエンスをカスタマイズする方法がいくつかあります。 これらの方法については、以下で詳しく説明します。

画像を遅延ロードする必要がありますか? 欠点はありますか?

ほとんどの場合、ページ速度を向上させたり、帯域幅を節約したりする場合、画像を遅延読み込みすることは素晴らしいアイデアです。 ただし、考慮すべき潜在的な欠点もいくつかあります。

レイアウト移動

画像を遅延読み込みすると、ページのレイアウトが変わる可能性があります。 たとえば、ページの右側にサイドバーがあり、その中にある画像を遅延読み込みすると、スペースを空けるためにサイドバーが下に移動する可能性があります。 これは訪問者にとって非常に混乱する可能性があります。

一般に、この問題を回避するには、プレースホルダーを使用することをお勧めします。

SEOへの潜在的な打撃

これを適切に行わないと、画像の遅延読み込みにより、Google などの検索エンジンでインデックス作成に問題が発生する可能性があります。 ランキングに関してはコンテンツが最も重要であり、この場合、貴重な部分を失う可能性があります。

画像は検索結果に表示されなくなる可能性があり、ページの残りのコンテンツ (e コマースの商品画像など) と比較した画像の重要度によっては、通常の検索ランキングも低下する可能性があります。

とはいえ、遅延読み込みを適切に設定していれば、これは問題にはなりません。 そのため、自信のある開発者でない限り、最善の行動は遅延読み込みプラグインを使用するか、WordPress に含まれるデフォルトの遅延読み込みを使い続けることです。

プラグインの競合

さらに、遅延読み込みは、画像を使用してソーシャル メディア プレビューを生成するプラグインなど、一部の WordPress プラグインで問題を引き起こす可能性があります。

サイトに変更を加えるときは、必ず徹底的にテストして、すべてが正常に動作していることを確認する必要があります。

また、何か問題が発生した場合に備えて、すぐに回復できるように WordPress サイトのバックアップを用意してください。

WordPress で遅延読み込みを有効にする方法

WordPress では遅延読み込みがデフォルトで有効になりました。 最新の WordPress イテレーションを使用していない場合 (ただし、使用することをお勧めします)、または遅延読み込みプロセスをより詳細に制御したい場合は、プラグインを使用するか、プラグインにコードを追加するという 2 つの異なる方法のいずれかを使用して実行できます。サイト。

1. プラグインによる遅延ロード

経験豊富な開発者でない場合は、サイトのコードを編集するたびに問題が発生する危険があるため、プラグインを使用することをお勧めします。 何かが壊れた場合に備えてバックアップを用意している場合でも、信頼できるプラグインを単純に使用するのが最善の場合があります。

Jetpack Boost ホームページ

Jetpack Boost は、サイトのパフォーマンスの測定と改善を支援することに特化した無料のプラグインです。 次のような機能を提供します。

  • 必須ではない JavaScript の延期
  • CSS読み込みの最適化
  • 遅延画像読み込み
  • サイトのパフォーマンステスト

Jetpack Boost の使用を開始するには、WordPress プラグイン ディレクトリから無料でダウンロードします。

または、WordPress ダッシュボードで、 「プラグイン」→「新規追加」に移動し、 「Jetpack Boost」を検索して、「今すぐインストール」をクリックします。 インストールしたら、 「アクティブ化」をクリックします。

プラグイン リポジトリの Jetpack Boost

次に、 「 Boost 」というタイトルの新しいダッシュボード メニュー オプションに移動します。 次に、 [無料で開始]をクリックします。

次のページで、 [画像の遅延読み込み]という大きなトグルまで下にスクロールし、オンにします。 次に、サイトを見て、すべてが適切にレンダリングされ、見栄えが良いことを確認してください。 それでおしまい！ 遅延読み込みは数回クリックするだけで完了します。

さらに一歩進んでサイトの遅延読み込みをカスタマイズしたい場合は、 functions.phpファイルに追加できるコード スニペットを使用して実行できます。 または、機能プラグインを使用して挿入することもできます。

以下に、実行できるタスクをいくつか示します。

  1. 特定のページで遅延読み込みを無効にする
  2. 画像が読み込まれるまで表示されるプレースホルダーを設定します
  3. 特定の画像の遅延読み込みをオフにする
  4. 特定の CSS クラスの遅延読み込みをオフにする

たとえば、CSS クラスを遅延読み込みプロセスから除外する場合は、次のコードを使用します。

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

詳細については、完全な遅延読み込みドキュメントを確認してください。

2. プラグインを使わずにWordPressで画像を遅延読み込みする方法

前述したように、WordPress はデフォルトで、サイズが設定されているすべての画像の遅延読み込みを有効にします。 これを行うために何もオンにしたり、コードを追加したりする必要はありません。 ただし、この機能の動作をカスタマイズしたい場合もあります。

たとえば、テンプレート画像を含めたくないとしましょう。 このコードをfunctions.phpファイルに追加します。

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

あるいは、非常に詳細に設定して、特定の画像の遅延読み込みをオフにしたい場合もあります。 これを行うには、ページまたは投稿に追加するときに各画像に追加の画像クラスを割り当て、そのクラスをfunction.phpファイル内の次のコードに追加します。

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

上の例のイメージ クラスSkip-lazy をイメージに追加するには、次のようにします。

  1. 画像をページに追加するか、メディア ライブラリ経由で投稿します。
  2. 画像を追加したら、画像設定を見つけます。 これは、Gutenberg Blocks エディター、クラシック エディター、またはサイト ビルダー プラグインのいずれを使用しているかによって、表示が異なる場合があります。 新しい CSS クラスを追加する機能は、通常、詳細設定領域 (Gutenberg およびクラシック エディター)、または画像設定オプションの下部 (他のほとんどのサイト ビルダー) にあります。
  3. クラスSkip-lazy をイメージに追加し、更新を保存します。

可能性について詳しくは、WordPress のドキュメントをご覧ください。

WordPress でビデオを遅延読み込みする方法

ビデオを遅延読み込みしたい場合は、投稿またはページ内のビデオ自体にコードを追加することで実行できます。 このコードは次のようになります。

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

WordPress の遅延読み込みに関するよくある質問

WordPress の遅延読み込みについて詳しく知りたいですか? 以下によくある質問に回答しました。

オフスクリーン画像の遅延読み込みと遅延は同じことですか?

オフスクリーン画像を延期するということは、残りの重要なスクロールせずに見えるコンテンツが読み込まれるまで、画像の読み込みを待機することを意味します。 これを行うにはいくつかの方法がありますが、WordPress サイトでは通常、遅延読み込みが使用されます。

基本的に、遅延読み込みはオフスクリーン画像を遅延させる方法です。

WordPress で背景画像を遅延読み込みできますか?

はい、必要に応じて背景画像を遅延読み込みすることができます。 Jetpack Boost は、背景画像の遅延読み込みを有効にします。 ただし、画像の設定方法によっては、すべての画像を識別できない場合があります。 たとえば、画像がbackground:url プロパティを通じて読み込まれる場合、プラグインは画像を画像として読み取らないため、遅延読み込みは有効になりません。

そのような状況では、Lazy Loader などのツールを使用すると、遅延読み込みする特定の背景画像を選択できます。

YouTube ビデオを遅延読み込みできますか?

はい、できます！ これを行うには、WPOrbit からの次のコード スニペットをテーマのfunction.phpファイルに挿入します。 これを行う方法がわからない場合は、 functions.phpファイルへのアクセスと編集に関するガイドを参照してください。

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

遅延読み込みはSEOに影響しますか?

はい、遅延読み込みは検索エンジンのランキングに良い影響を与える可能性があります。 Google は、検索結果でのページの順位を決定する際に、サイトの速度を考慮します。 また、遅延読み込みによりパフォーマンスが向上するため、サイトに対する Google の認識も向上します。

遅延読み込みプラグインを使用せずに手動で実行し、間違いを犯した場合、検索エンジンの画像認識能力が妨げられ、SEO に悪影響を及ぼす可能性があります。

遅延読み込みはユーザー エクスペリエンスに影響しますか?

はい、遅延読み込みを使用すると、サイトの読み込み時間が短縮され、同時に訪問者がコンテンツをすぐに閲覧できるため、ユーザー エクスペリエンスが向上します。 これにより、ブランドに対する彼らの認識が向上します。

コンテンツを遅延ロードするにはプラグインが必要ですか?

いいえ、コンテンツを遅延ロードするためのプラグインは必要ありません。 WordPress では遅延読み込みがデフォルトで有効になっています。 ただし、遅延読み込みプロセスをさらに制御したい場合は、プラグインを使用することをお勧めします。 ここでは、WordPress に最適な遅延読み込みプラグインを厳選して紹介します。

コンテンツの遅延読み込みには欠点はありますか?

コンテンツの遅延読み込みには多くの欠点はありません。 速度、ユーザー エクスペリエンス、検索エンジンのランキングが向上します。 ただし、場合によっては、ページ レイアウトに奇妙なシフトが発生することがあります。 したがって、遅延読み込みを有効にした後は、必ずサイトをテストする必要があります。

すべてのコンテンツを遅延ロードする必要がありますか?

いいえ、すべてのコンテンツを遅延読み込みする必要はありません。 画像、ビデオ、iFrame などの特定の要素のみを遅延読み込みするように選択できます。

読み込み速度を向上させるために他に何ができるでしょうか?

遅延読み込みに加えて、WordPress サイトの速度を向上させる方法は他にもたくさんあります。

  • コンテンツ配信ネットワーク (CDN) の使用
  • Core Web Vitals を改善するのと同じことを改善することに重点を置きます。
  • 画像の最適化
  • ブラウザのキャッシュを有効にする
  • リソースの縮小

WordPress の遅延読み込みでサイトを高速化する

画像の遅延読み込みは、サイトのパフォーマンスを最適化し、全体的なユーザー エクスペリエンスを向上させる優れた方法です。 Jetpack Boost は、遅延読み込みを可能にする最も便利で堅牢な方法を提供すると同時に、他の強力な速度ツールも提供します。 始める準備はできていますか? ジェットパックブーストを手に入れましょう！