Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでLazy Loadを正しく無効化する方法(ステップバイステップ)

WordPressには初期設定として、画像やその他のメディアのダウンロードを必要な時まで遅延させ、ページの読み込み時間を改善するレイジーロード機能が搭載されています。

しかし、画像をすぐに表示しないことは、サイトによってはユーザーエクスペリエンスを低下させる可能性があります。さらに、特定の要素の最適化、トラブルシューティング、特定のプラグインや機能との互換性の向上など、遅延読み込みを無効化したい状況は他にもたくさんあります。

WPBeginnerでは、WordPressのパフォーマンス最適化において15年以上の経験があり、遅延読み込みをいつ、どのように使用すべきかを理解しています。私たちは、サイトの速度を向上させるために、いくつかの自社サイトでもこの機能を使用しています。

この投稿では、WordPressで遅延読み込みを簡単に無効化する方法を紹介します。

How to properly disable lazy load in WordPress

レイジー・ローディングとは?

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

この方法は、まず可視エリアのコンテンツを素早く読み込むことで、サイトのパフォーマンスとページスピードを向上させるのに役立ちます。

Googleのような検索エンジンはスピードを重要なランキング要素と考えているためです。

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

画像を右クリックし、ブラウザーでインスペクトツールを選択すると、遅延ローディング機能が実際に動作していることを確認できます。

Lazy loading images in WordPress

ブラウザー画面が分割され、HTMLソースコードが表示されます。ここから、画像に追加された “loading=lazely “属性を見ることができます。

通常、遅延ロードはWordPressサイトにとって全体的なメリットがあるため、無効化することはお勧めしません。無効にすると、サイトの速度が遅くなり、コンバージョン率が低下し、SEOランキングが下がる可能性があります。

しかし、遅延ローディングはサイトによってはユーザー体験を損なう可能性がある。

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

また、別の遅延読み込みソリューションを使用していて、WordPressの初期設定の遅延読み込みをオフにしたい場合もあるでしょう。

ということで、WordPressで遅延ロードを簡単に無効化する方法を見てみよう。

このチュートリアルでは、コードによる方法とプラグインによる方法を紹介します。以下のリンクからお好きな設定に飛ぶことができます:

また、見て学びたい方は、以下のチュートリアル動画をいつでもご覧ください。

動画チュートリアル

Subscribe to WPBeginner

そうでなければ、文章での説明がお好きな方は、そのまま読み進めてください。

テーマのfunctions.phpファイルにカスタムコードを追加することで、WordPressの遅延ロード機能を無効化することができます。

ただし、コードを追加する際のわずかなエラーでサイトが壊れ、アクセスできなくなる可能性があることに留意してください。

そのため、WPCodeを使用してカスタムコードを追加することをお勧めします。

市場で最高のWordPressカスタムコードスニペットプラグインです。さらに、サイトにコードを追加するのが超簡単で安全になります。

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

注:WPCodeには、このチュートリアルで使用できる無料版もあります。ただし、有料プランにアップグレードすると、コードスニペットのクラウドライブラリや条件ロジックなどの機能を利用できるようになります。

有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetページにアクセスします。

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

Add new snippet

カスタムスニペットの作成」ページが表示されますので、まずはコードタイプ名を入力してください。

これは、コード・スニペットとそれが何をするものかを識別するのに役立つものであれば何でもよい。私たちは「Disable Lazy Load」と名付けた。

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

Choose PHP code type for the code snippet to disable lazy loading

次に、以下のPHPコードをコピー&ペーストして「コードプレビュー」ボックスに入力します:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

貼り付け後のコードはこのようになる。

Add code snippet

その後、「インサーター」セクションまでスクロールダウンする。ここで「自動挿入」モードを選択します。

これにより、スニペットを有効化すると、WordPressサイト上のあらゆる場所でカスタマイザーコードが自動的に実行されるようになります。

Choose an insertion method

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

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

Save your code snippet

これで、WordPressサイトの遅延読み込みが無効化されます。

画像上で右クリックし、ブラウザーメニューから『Inspect』を選択すればテストできる。

Lazy loading disabled

画像のHTMLコードでは、’loading=lazely’属性が消えます。

方法2:プラグインを使ってWordPressの遅延ロードを無効化する

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

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

Activate plugin to disable lazy load

プラグインは箱から出してすぐに動作し、設定は必須ではありません。有効化した後は、自動的にサイトの遅延ロード機能を無効化します。

ボーナス:サイトのスピードとパフォーマンスを上げる

遅延読み込みを無効化すると、サイトのスピードやパフォーマンスに悪影響を及ぼす可能性があります。

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

さらに、WordPressを常に最新バージョンで運用し、抜粋をホームページに使用し、コメントをページに分割し、SEOに最適化されたテーマをサイトに使用すること。

The WordPress.org theme directory

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

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

この投稿が、WordPressで遅延ロードを適切に無効化する方法を学ぶのにお役に立てば幸いです。WordPressの画像を最適化してページの読み込み時間を改善する方法についての初心者向けガイド、またはWordPressの画像圧縮プラグインのベストセレクションもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

4件のコメント返信を残す

  1. Dimitrios Charalampidis

    This website’s articles have helped me so much… I just wanted to say: Thank you!

    • WPBeginner Support

      You’re welcome! Glad to hear our guides have been helpful! :)

      管理者

  2. Adrian

    What about disable lazy load ONLY on featured image (first image above the fold)? Is there an easy way?

    • WPBeginner Support

      We do not have a recommendation for conditionally disabling it but should that change we will be sure to share!

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。