WordPressで遅延読み込みを適切に無効にする方法（ステップバイステップ）

遅延読み込みは通常、ユーザーがスクロールして画像を見るまで画像の読み込みを遅延させることで、ウェブサイトの読み込みを高速化するのに役立ちます。ただし、表示の問題を引き起こしたり、「ファーストビュー」のコンテンツの表示が遅くなったり、テーマのレイアウトと競合したりすることがあります。

これは、高品質の画像がすぐに読み込まれる必要がある写真ポートフォリオでよく見られます。この機能がユーザーエクスペリエンスを損なっている場合は、無効にする方法が必要です。

WPBeginnerでは、何千ものユーザーが画像のトラブルシューティングを安全に行うのを支援してきました。サイトを壊すことなく最もうまく機能する方法を正確に把握しています。

この記事では、WordPressで遅延読み込みを適切に無効にする方法を説明します。

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

WordPressは、WordPress 5.5で最初に画像の遅延読み込みを導入しました。その後、iframe埋め込み（YouTube動画、Spotify、その他の埋め込みなど）にも遅延読み込み機能が拡張されました。

このプラクティスは、表示領域のコンテンツを最初に素早く読み込むことで、サイトのパフォーマンスとページ速度の向上に役立ちます。

より高速なウェブサイトは、ユーザーにとって良いだけでなく、検索エンジンが速度を重要なランキング要因と見なすため、ウェブサイトのランキングを向上させることもできます。

画像や埋め込み以外にも、コメント や Gravatar も簡単に遅延読み込みして、ページの読み込み速度をさらに向上させることができます。

遅延読み込み機能が実際に動作していることを確認するには、画像の上で右クリックし、ブラウザで「検証」ツールを選択してください。

これによりブラウザ画面が分割され、HTMLソースコードが表示されます。ここで、「loading=lazy」属性が画像に追加されているのがわかります。

通常、遅延読み込みの全体的なメリットを考慮すると、無効にすることは推奨しません。WordPress ウェブサイトの速度低下、コンバージョン率の低下、SEO ランキングの低下につながる可能性があります。

ただし、遅延読み込みは一部のウェブサイトでユーザーエクスペリエンスを損なう可能性があります。

例えば、画像がコンテンツの最も重要な側面である 写真ウェブサイト を運営している場合、それらを遅延読み込みすると、顧客のユーザーエクスペリエンスを損なう可能性があります。

場合によっては、独自の遅延読み込みソリューションを備えたスタンドアロンのパフォーマンスプラグイン（WP Rocketなど）を使用しているため、競合を避けるためにデフォルトのWordPressの遅延読み込みを無効にしたい場合があります。

それを踏まえた上で、WordPressで遅延読み込みを簡単に無効にする方法を見ていきましょう。

このチュートリアルでは、コードによる方法とプラグインによる方法を紹介します。どちらかのオプションにジャンプするには、以下のリンクを使用できます。

方法 1: WPCode を使用して WordPress の遅延読み込みを無効にする (推奨)

WordPress の遅延読み込み機能を無効にするには、テーマの functions.php ファイルにカスタムコードを追加します。

ただし、コードを追加する際にわずかなエラーが発生すると、ウェブサイトが破損してアクセスできなくなる可能性があることに注意してください。

そのため、WPCodeを使用してカスタムコードを追加することをお勧めします。サイトを壊すような悪いコードを防ぐための組み込みのエラー保護機能があります。

これは市場で最高の WordPress カスタムコードスニペットプラグインです。さらに、ウェブサイトへのコードの追加を非常に簡単かつ安全に行えます。

デモウェブサイトで徹底的にテストし、優れた結果を確認しました。詳細については、WPCode の完全なレビューをご覧ください。

まず、WPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPressダッシュボードから コードスニペット » + スニペットを追加 ページにアクセスしてください。

ここから、「カスタムコードを追加 (新規スニペット)」オプションの下にある「スニペットを使用」ボタンをクリックします。

これにより、「カスタムスニペットの作成」ページに移動します。ここで、コードスニペットの名前を入力することから始めることができます。

これは、コードスニペットを識別し、その機能を知るのに役立つものであれば何でも構いません。私たちは「遅延読み込みを無効にする」と名付けました。

カスタムスニペットに名前を付けたら、画面右側の「コードタイプ」ドロップダウンメニューから「PHP スニペット」を選択します。

次に、次のPHPコードを「コードプレビュー」ボックスにコピーして貼り付けます。

// Disable native WordPress lazy loading 
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

コードを貼り付けた後のコードは次のようになります。

その後、「挿入」セクションまでスクロールします。ここでは、「自動挿入」モードを選択するだけです。

これにより、スニペットをアクティブ化すると、カスタムコードがWordPressサイトのどこでも自動的に実行されるようになります。

次に、ページの上部までスクロールし、「Inactive」スイッチを「Active」に切り替えるだけです。

最後に、「スニペットを保存」ボタンをクリックして、コードスニペットを保存して実行することを忘れないでください。

これで、WordPressサイトでデフォルトの遅延読み込みが無効になります。

テストを行う前に、ブラウザのキャッシュとWordPressのキャッシュをクリアしてください。その後、画像の上で右クリックし、ブラウザメニューから「検証」を選択します。

これをテストするには、画像の上で右クリックし、ブラウザメニューから「検証」を選択します。

画像のHTMLコードでは、「loading=lazy」属性が消えているはずです。

方法 2: プラグインを使用して WordPress の遅延読み込みを無効にする

サイトにコードを追加したくない場合は、プラグインを使用して WordPress の遅延読み込みを無効にすることができます。

あなたがする必要があるのは、Disable Lazy Load プラグインをインストールして有効化することだけです。さらに詳しい手順については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

このプラグインはすぐに使用でき、設定は不要です。有効化すると、ウェブサイトのデフォルトの遅延読み込み機能を自動的に無効にします。

動画チュートリアル

文章での説明がお好みでない場合は、ビデオチュートリアルをご覧ください。

ボーナス：サイトの速度とパフォーマンスを向上させる

遅延読み込みを無効にすると、ウェブサイトの速度とパフォーマンスに悪影響を与える可能性があります。

その場合、サイトのパフォーマンスを向上させ、ページの読み込み時間を短縮するための他のヒントを試すことができます。たとえば、サイトの画像を圧縮して最適化したり、JPEGまたはPNGをファイル形式として使用したりすることができます。

さらに、常に最新バージョンのWordPressを実行し、ホームページで抜粋を使用し、コメントをページ分割し、ウェブサイトでSEO最適化されたテーマを使用する必要があります。

それ以外にも、WP RocketやWP Super Cacheのようなキャッシュプラグインを使用して、サイトの速度をさらに向上させることもできます。

その他のヒントについては、WordPressの速度とパフォーマンスを向上させる方法に関する初心者向けガイドをご覧ください。

遅延読み込みの無効化に関するよくある質問

読者から、遅延読み込みがウェブサイトのパフォーマンスにどのように影響するか、またいつ無効にすべきかについてよく質問を受けます。ここでは、最も一般的な質問に対する回答を紹介します。

1. 遅延読み込みを無効にすると、SEOランキングに悪影響がありますか？

遅延読み込みをグローバルに無効にすると、すべての画像が一度に読み込まれるため、ウェブサイトの速度が低下する可能性があります。ページの速度はGoogleのランキング要因であるため、サイトが遅くなるとSEOに悪影響を与える可能性があります。

ただし、トップ画像（Largest Contentful Paint）のみ遅延読み込みを無効にすると、実際にはCore Web Vitalsのスコアが向上する可能性があります。

2. 特定の画像のみ遅延読み込みを無効にできますか？

はい、特定の画像（ロゴやヘッダー画像など）の遅延読み込みを無効にできます。これを行うには、手動でloading="eager"属性を追加します。

WordPressのコンテンツエディタで、画像ブロックを選択し、ツールバーの3点メニューをクリックして「HTMLとして編集」を選択すると、属性を追加できます。

これは、ブラウザにその特定の画像をすぐに読み込むように指示し、WordPressサイトの他の部分の遅延読み込みはアクティブなままにします。

3. WordPressは背景画像を遅延読み込みしますか？

いいえ、WordPressのデフォルトの遅延読み込み機能は、<img>タグとiframe内の画像にのみ適用されます。CSSを使用して背景要素として追加された画像は、コアのWordPressソフトウェアでは遅延読み込みされません。

4. 遅延読み込みを無効にするには、プラグインとコードのどちらを使用するのが良いですか？

コードスニペットを貼り付けることに慣れている場合は、サイトを軽量に保つことができるため、WPCodeを使用するのがより良い方法です。ただし、設定を一切構成せずに迅速な修正を行いたい場合は、Disable Lazy Loadプラグインは初心者にとって安全で効果的な選択肢です。

追加リソース

この記事で、WordPressで遅延読み込みを正しく無効にする方法を学べたことを願っています。これらの追加リソースも参照することをお勧めします。

• Webパフォーマンスのために画像を最適化する方法（ステップバイステップ）
• WordPressの速度とパフォーマンスを向上させるための究極のガイド
• WordPress画像圧縮プラグイン比較
• WordPress で一般的な画像の問題を修正する方法
• 画像 SEO の初心者ガイド – 検索エンジンのための画像を最適化する

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。