より良いGTmetrixの結果を得るためにWordPressで画像と動画を遅延読み込みする方法(そしてYouTube iFrameをプレビュー画像に置き換える方法)

最善の方法は何ですか 画像とビデオの遅延読み込み ワードプレスで?


これは、遅延読み込みをサポートするキャッシュプラグイン(WP Rocket、W3 Total Cache、Swift、LiteSpeed Cache)をすでに使用しているかどうかによって異なります。キャッシュプラグインが画像と動画の遅延読み込みをサポートしている場合は、追加のプラグインをインストールする必要がないようにそれを使用するのが最善です。ただし、キャッシュプラグインが遅延読み込みをサポートしていない場合は、それをサポートするプラグイン(特にWP Rocket)を使用することをお勧めします。それ以外の場合は、個別にインストールできる代替の遅延読み込みプラグインを以下にリストしました.

遅延読み込みとは?
遅延読み込みとは、ユーザーがページを下にスクロールして実際に表示した場合にのみ、画像と動画が読み込まれることを意味します。これにより、ページ上のHTTPリクエストが少なくなりますが、画像や埋め込み動画がたくさんある場合は、ページを下にスクロールして、常にそれらをロードする必要があります。.

YouTube Iframeをプレビュー画像に置き換えるとはどういう意味ですか?
WordPressサイトに動画を埋め込んでいる場合、ユーザーが[再生]ボタンをクリックしたときにのみ、「太っているYouTubeプレーヤー」が読み込まれます。つまり、最初に読み込まれるのはプレビュー画像だけです。.

画像と動画を遅延読み込みする必要がありますか?
ページを下にスクロールするときに常に画像を読み込むのはユーザーにとって煩わしいため、画像の遅延読み込みは行いません。ただし、すべての画像はGTmetrixで100%に最適化されています。ビデオの遅延読み込みを行い、iframeをプレビュー画像に置き換えます。埋め込まれた各動画の読み込みには2秒かかるため(画像よりもはるかに重い)、動画の遅延読み込みの利点は非常に大きい.

1. WPロケット

WP Rocketは遅延読み込みの私の第1位の選択肢であり、Facebook投票で第1位のキャッシュプラグインでした.

すでに遅延読み込みが組み込まれているため、追加のプラグインをインストールする必要はありません。これがWP Rocketの利点です。他のほとんどすべてのキャッシュプラグインよりも多くの機能を備えていますが(ロード時間とGTmetrixスコアが向上します)、サイト上のプラグインは少なくなります。 WPロケットは広範囲を持っています 遅延読み込みに関するドキュメント およびWP Rocket設定の構成.

WPロケット

WP Rocketで遅延読み込みを有効にする方法
WP Rocketで遅延読み込みを有効にするには、設定に移動します > WPロケット > メディア > LazyLoad. 画像、iframe、動画で有効にして、YouTube iframeをプレビュー画像に置き換えることができます.

画像の遅延読み込みWPロケット

2. SGオプティマイザー

SiteGround の大きな更新で遅延読み込みが導入されました SGオプティマイザー.

もちろん、このプラグインを使用するには、SiteGroundの顧客である必要があります(20以上のFacebook投票で#1ホストと評価されていることを考えると、共有ホスティングに私はそうします)。 SGオプティマイザーはWP Rocketに匹敵しますが、ほとんど同じくらいの機能はありません。ホストにSiteGroundを使用している場合でも、SGオプティマイザーよりもWP Rocketを優先します.

SiteGround SGオプティマイザー

SGオプティマイザーで遅延読み込みを有効にする方法
SGオプティマイザーで遅延読み込みを有効にするには、設定に移動します > SGオプティマイザー > サイトごとのデフォルト > 画像の最適化. 画像、Gravatar、サムネイル、レスポンシブ画像、ウィジェットを遅延読み込みできます。ブログにコメントがある場合、遅延読み込みGravatarは非常に役立ちます.

SGオプティマイザーの遅延読み込み

3. W3合計キャッシュ

すでにW3 Total Cacheを使用している場合は、 遅延読み込みオプション.

W3 Total Cacheはしばらくの間放棄されたと考えられていましたが、開発者はプラグインの保守を開始しました。 W3 Total Cache設定を構成するための広範なチュートリアルがあります.

W3 Total Cacheプラグイン

W3合計キャッシュで遅延ロードを有効にする方法
W3 Total Cacheでのロードロードを有効にするには、[設定]に移動します > 一般設定 > ユーザー体験 > 遅延読み込み。これをオンに切り替えてから、ユーザーエクスペリエンスに移動します > 遅延読み込み。 HTML画像タグ、背景画像、単語の除外、スクリプト埋め込み方法の処理を選択します.

W3総キャッシュ遅延読み込み

4. Litespeedキャッシュ

Litepseedキャッシュ 遅延読み込み 仕事もします(Litespeedはレビューされたキャッシュプラグインです).

LiteSpeedキャッシュプラグイン

LiteSpeedキャッシュで遅延読み込みを有効にする方法
LiteSpeed Cacheでのロードロードを有効にするには、LiteSpeed Cacheに移動します > 設定 > メディア > メディア設定. ここでは、画像、iframeの遅延読み込みを有効にし、画像を除外し、cronジョブを介して最適化を自動的に要求し、JavaScriptライブラリをインラインで組み込み、他の設定を切り替えることができます.

画像の遅延読み込みビデオLitespeedキャッシュ

5.迅速なパフォーマンス

迅速なパフォーマンス 遅延読み込みをサポートする別のキャッシュプラグインです。 Swiftは、WordPress Speed Up Facebook Groupで素晴らしいレビューを得ていますが、WordPressプラグインページのレビューは4つ星です。私はSwift Performanceを試したことはありません。私はWP Rocketに完全に満足しています.

Swift Performance Liteプラグイン

Swiftパフォーマンスで遅延ロードを有効にする方法
Swift Performanceでのロードロードを有効にするには、[設定]に移動します > メディア > レイジーロード. ここでは、画像の遅延読み込み、特定の画像の除外、インライン遅延読み込みのオプションがあります。.

レイジーロードイメージの迅速なパフォーマンス

6.自動最適化

Autoptimizeは、GoDaddyやWP Engineなどのホストでよく使用されます。これらのホストには、独自の組み込みキャッシュシステムがあり、 ブラックリストキャッシュプラグイン. この場合(他の速度の最適化を処理する必要があるため)、Autoptimizeは通常、そのための頼りになるプラグインです。多くの機能の1つは 遅延読み込み, HTML、CSS、JavaScript、Googleフォントを最適化することもできます.

自動最適化プラグイン

Autoptimizeで遅延読み込みを有効にする方法
Autoptimizeで読み込みの読み込みを有効にするには、設定に移動します > 画像 > 画像の遅延読み込み。画像の最適化に使用するShortPixelのCDNを使用するオプションもあります(これは私が使用するプラグインです).

画像の遅延読み込みを自動最適化

7.スマッシュ

Smushは画像最適化プラグインで、 遅延読み込みをサポート. それはWPMUによって開発されましたが、GTmetrixで画像を100%にするために使用したのは私だけなので、ロスレス圧縮には個人的にShortPixelを使用しています(そして私は多くの画像最適化プラグインをテストしました).

Smushプラグイン

Smushで遅延読み込みを有効にする方法
Smushでの読み込みを有効にするには、Smushに移動します > ダッシュボード > レイジーロード。遅延読み込みするファイルの種類(.jpeg、png、.gif、.svg、iframe)、およびコンテンツ、ウィジェット、サムネイル、Gravatarに対して有効にするかどうかを選択できます。それは遅延読み込みアニメーション設定さえ持っています.

スマッシュレイジーロード

8. WPロケットによる遅延ロード

WPロケットによる遅延ロード WP Rocketを使用していないが、画像を遅延ロードしたい場合に適しています.

遅延読み込みプラグイン

WPロケットによる遅延ロードで遅延ロードを有効にする方法
設定に移動 > LazyLoad。画像、iframeを遅延読み込みするオプションがあります & 動画、YouTube動画をサムネイルで置き換えます。構成する設定は多くありません。個人的にもっともっとあるといいのですが。多分それがこの遅延読み込みプラグインが最高のレビューを持っていない理由です.

WPロケットによる遅延ロード

9. A3レイジーロード

A3遅延ロード 画像と動画の両方の遅延読み込みをサポート.

a3 Lazy Loadプラグイン

A3遅延ロードで遅延ロードを有効にする方法
A3 Lazy Loadでの読み込みを有効にするには、設定に移動します > A3遅延ロード。画像、ビデオ、iframe、Gravatarの遅延読み込みの設定を構成し、遅延読み込みを適用するWebサイトの領域を選択できます(モバイルを含む)。遅延読み込み効果を有効にするオプション、背景色の読み込み、URLと投稿タイプを除外するオプションもあります.

a3遅延読み込みの設定

10. BJレイジーロード

BJレイジーロード 十分にメンテナンスされていないようなので、おそらく別のプラグインを使用します.

BJ Lazy Loadプラグイン

BJレイジーロードでレイジーロードを有効にする方法
BJ Lazy Loadでロードのロードを有効にするには、設定に移動します > BJレイジーロード。設定は比較的簡単で、画像、iframe、Gravatarの遅延読み込みを選択したり、コンテンツ、テキストウィジェット、投稿のサムネイルから遅延読み込みを除外したりできます。プレースホルダー画像、ビューポートのしきい値を含め、遅延読み込み時に低解像度のプレビュー画像を使用するオプションもあります.

BJレイジーロード設定

11.画像の遅延読み込み

画像の遅延読み込み 画像だけにしたい場合は、.

画像の遅延読み込みプラグイン

画像の遅延読み込みを有効にする方法
Lazy Load For Imagesプラグインで構成する設定はありません(自動).

12.ビデオの遅延ロード

ビデオの遅延ロード 埋め込み動画をクリック可能なプレビュー画像に置き換えます.

ビデオプラグインの遅延読み込み

ビデオの遅延ロードで遅延ロードを有効にする方法
ビデオのレイジーロードでロードロードを有効にするには、[設定]に移動します。 > ビデオの遅延ロード。必要な場合にのみCSS / JSをロードし、再生ボタンをカスタマイズして、カスタムCSSを適用することを選択します.

ビデオプラグインの遅延読み込み

13.コメントの遅延読み込み

コメントを遅延読み込みできます コメントの遅延読み込み プラグイン.

特に、Gravatarはすべてのサードパーティのリクエスト間でロードするのに長い時間がかかるため、ブログにたくさんのコメントがある場合、これはHTTPsリクエストを少なくするのに役立ちます。.

コメントプラグインの遅延読み込み

コメントの遅延ロードで遅延ロードを有効にする方法
Lazy Load For Commentsで読み込みロードを有効にするには、設定に移動します > 討論 > 遅延読み込みコメント. これがこのプラグインの唯一の設定構成ですが、良いレビューがあります.

遅延読み込みコメント

14. WP YouTube Lyte

WP YouTube Lyte は、ビデオを遅延読み込みするための私のお気に入りのプラグインの1つです。これは、Autoptimizeのチームによって作成されました。.

WP YouTube Lyteプラグイン

WP YouTube Lyteで遅延読み込みを有効にする方法
WP YouTube Lyteでのロードロードを有効にするには、[設定]に移動します > WP YouTube Lyte。あなたをつかむ YouTube APIキー Autoptimizeに入力します。プレーヤーのサイズ、リンクを含めるかどうか、プレーヤーの位置、HDの強制、通常のYouTubeリンク/ iframeとしての機能、microdataの追加を選択します。サムネイルをローカルにキャッシュすると、YouTube動画を埋め込むときのGTmetrixエラーが修正されることがよくあります.

YouTubeサムネイルGTmetrix

Wp YouTube Lyte設定

まだ助けが必要?

WordPressの速度最適化に関するすばらしいビデオがあります。

画像の最適化、WP Rocketの構成、サーバーの応答時間の短縮などのチュートリアルもあります。これらのヒントを使用して、ほぼすべての投稿でGTmetrixスコアを100%(またはそれに近い)得ることができます。ご不明な点がございましたら、お気軽にコメントをお寄せください-喜んでお手伝いいたします!

よくある質問

✅画像の遅延読み込みに最適なプラグイン?

レイジーロードをサポートするキャッシュプラグイン(WP Rocket、SG Optimizer、W3TC、Swift、LiteSpeedなど)を既に使用している場合は、最初に試すことをお勧めします。それ以外の場合は、AutoptimizeまたはWP RocketによるLazy Loadプラグインが優れた遅延読み込みプラグインです。.

✅ビデオの遅延読み込みについて?

WP Rocketと他のいくつかのキャッシュプラグインを使用すると、ビデオを遅延読み込みし、YouTube iframeをプレビュー画像に置き換えることができます。それ以外の場合は、WP YouTube Lyteが機能します.

✅遅延読み込みはユーザーエクスペリエンスに悪影響を与えるか?

このWebサイトでは画像の遅延読み込みは行っていませんが、読み込みに時間がかかるため、動画の遅延読み込みを行っています。画像の遅延読み込みはユーザーにとって煩わしく、アフィリエイトの売上を減少させる可能性があるため、無効にしました.

✅遅延読み込みの機能?

遅延読み込みは、ユーザーがページを下にスクロールして実際に表示するまで画像と動画の読み込みを待機することで、初期読み込み時間を短縮します.

✅特定のページで遅延読み込みを無効にする方法?

ほとんどのプラグインでこれを行うことができます。たとえば、WP Rocketを使用していて、ページまたは投稿を編集する場合、特定のコンテンツの遅延読み込みを無効(または有効)にするオプションがダッシュボードに表示されます.

乾杯,
トム

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map