HTTP Archiveのデータによると、平均的なウェブページのサイズは3,719KBで、その78%が画像や動画で占められています。これは、訪問者のブラウザにとって大きな負担となり、今後も画像などの重たいアセットの使用は増加する傾向にあります。WordPressはメディアの共有とサイトデザインへの挿入に優れており、画像や動画を投稿や固定ページ、さらにはテーマの背景に簡単に組み込むことができます。
しかし、重たいリソースは、ウェブページを表示する前にダウンロードしなければならず、表示速度に影響を与えます。そこで出番となるのが、WordPressの遅延読み込みです。
WordPress 5.5以降は遅延読み込み（レイジーローディング）がコアに組み込まれるため、簡単に実装可能です。今回は、画像と動画にWordPressの遅延読み込みを設定する方法をご紹介します。
遅延読み込みとは
遅延読み込み（レイジーローディングとも）とは、最初に目に入るコンテンツ（Above the fold）だけを読み込んで、スクロールしなければ表示されないコンテンツのダウンロードとレンダリングを遅らせる最適化の手法です。この手法はGoogleも注目しており、特に埋め込み動画や高解像度の画像が多い投稿や固定ページでは利用しない手はありません。
遅延読み込みの特徴は以下のとおり。
- ブラウザは、画像をダウンロードしたり動画を事前読み込みしたりせずにウェブページのDOMを構築する。
- ページが読み込まれた際に最初に表示されるコンテンツに基づいて、どの画像をダウンロードし、どの動画を事前に読み込むかを決定するのには、JavaScriptが使用される。画像や動画は必要に応じてダウンロードまたは事前に読み込まれる。
- Above the fold以下の画像と動画の読み込みは、ページがスクロールされて表示されるまで遅延される。
つまり、遅延読み込みを設定すると、ユーザーの目に触れるまで画像のダウンロードや動画の読み込みが行われなくなります。これにより、高解像度の画像や埋め込み動画を多く含むサイトのパフォーマンスが劇的に向上します。
WordPressの遅延読み込み
他のサイトパフォーマンスに関する問題と同じように、画像や動画の遅延読み込みに役立つ無料プラグインは多数あります。この記事では、数十のプラグインを検討し、最もパフォーマンス改善に効果的なものを5つご紹介します。遅延読み込みを設定する準備を整えたら、この後ご紹介するいずれかのプラグインを使用してみてください。
画像や動画が与えるサイト速度への影響
まずは、WordPressに画像をアップロードする前に画像を最適化しましょう。
画像や動画がパフォーマンスに与える影響を確認するためには、基準となるスコアが必要です。そこで、Kinstaのホスティングアカウントに標準的なWordPressサイトを追加し、テストを行いました。テーマにはデフォルトテーマのTwentySixteenを使用し、最適化プラグインやキャッシュなどは実装していない状態です。
以下は、画像や動画を追加する前のPingdomの速度テスト評価です。
ページは155KBと非常に軽量で、0.5秒以内に読み込まれており、非の打ち所がない結果です。続いて、このページに大きな画像ファイルやYouTube動画を埋め込んでテストを行います。
ページサイズは1.7MBに膨れ上がり、ページの読み込み時間はおよそ3倍の1.3秒弱になりました。TwentySixteenは優れた軽量テーマのため、画像やYouTube動画を6点追加しても平均よりはかなり軽く、読み込みも高速ですが、それでも表示速度がかなり低下したことがわかります。
遅延読み込みによるページ表示速度の改善
このようなウェブページの配信を大幅に高速化してくれるのが、a3 Lazy LoadとLazy Loadプラグインです。他にもいくつかのプラグインをテストしましたが、サイトパフォーマンスに関する測定可能な改善は見られませんでした。遅延読み込みプラグインを試す際には、必ずビフォーアフターテストを実施し、変化が現れているかどうかを確認してください。
a3 Lazy Load
a3 Lazy Loadは、WordPressリポジトリで特に人気の高い遅延読み込みプラグインで、5万以上のWordPressサイトで使用されており、ユーザーレビューも5つ星中4.7と非常に高評価です。
プラグインを有効化すると、「設定」に「a3 Lazy Load」メニューが出現します。デフォルト設定に一点だけ変更（Loading Background Colourでプレースホルダーの色をページの背景色に一致させた）を加えてテストを行ったところ、以下のような結果となりました。
ページの読み込み時間が0.5秒以下になりました。先ほど追加した画像や動画の数を考慮すると、これは驚くべき改善です。
テスト結果の比較
先ほどの結果と比較すると、ページサイズとリクエスト数が大幅に減少していることがわかります。Pingdomで詳細を確認してみましょう。まずはa3 Lazy Loadを実装した場合のコンテンツサイズの内訳は以下のようになっています。
画像のフットプリントは150KB強と非常に小さいのがわかります。以下は、総ペイロード2.0MBのコンテンツのスクリーンショットです。
スクリプト、HTML、CSSのようなコンテンツサイズはほぼ同じですが、画像サイズは1.86MBであり、フル解像度バージョンのサイズになっています。
前述したとおり、WordPressは自動的にさまざまなサイズの画像を生成し、ブラウザは画像が画面上に表示されるサイズに基づいて、可能な限り小さいバージョンを選んでレンダリングします。a3 Lazy Loadを使用すると、WordPressデフォルトの動作はそのままに、より小さな画像ファイルが配信されます。
Lazy Load
WP Rocketによって作成された無料プラグインのLazy Loadもおすすめで、1万以上のインストールと5つ星中4の評価を得ています。シンプルな遅延読み込みソリューションをお探しなら、ぜひ試してみてください。
サムネイル、投稿のすべての画像、ウィジェットのテキスト、アバター、絵文字を遅延読み込みすることができます。このプラグインの大きな強みは、jQueryのようなJavaScriptライブラリは不使用で、スクリプトの重さが10KB以下であることにあります。また設定は不要で、プラグインをインストールして有効化するだけで機能します。
Native Lazyload
現在、ほとんどのモダンブラウザでネイティブ遅延読み込みをサポートしています。
このようなネイティブ遅延読み込みは、インラインのJavascriptコードや外部スクリプトに依存しないため、サイトパフォーマンスの最適化につながります。サイトにネイティブ遅延読み込みを実装するには、読み込みを遅らせたい画像やiframeにloading=lazy属性を追加するだけです。
Googleは、このプロセスを簡素化するためにNative Lazyload プラグインを提供しています。プラグインをインストールして有効化するだけで、自動的にimgとiframeタグにloading属性が挿入されます。
Lazy Load for Videos
動画の遅延読み込みを行うには、Lazy Load for Videosがおすすめです。先にご紹介したプラグインにも同じ機能を持つものもありますが、このプラグインは動画に特化したソリューションです。
SEOに関する注意点
WordPressサイトの遅延読み込みにどのプラグインを使用するにしても、SEOに悪影響を与えないことが重要です。以下の2つの点に注意してください。
- 遅延読み込みした画像をGoogleがクロールできるようにする。Google Search ConsoleのクロールセクションにあるURL検査ツール（旧Fetch as Google）で簡単に確認でき、通常ソースコードに画像が表示されていればOK。
- Googleの画像検索順位に重要な代替テキスト（alt属性）を画像に追加する。
まとめ
ネイティブ遅延読み込みは現在、ほぼすべてのブラウザでサポートされており、画像やiframeに自動的にloading=”lazy”属性が挿入されます。しかし、古いブラウザなどを考慮すれば、a3 Lazy LoadやGoogleによるNative Lazyloadなどのプラグインを設定して損はありません。
もちろん、遅延読み込みを利用することで、WordPressサイトの最適化が完結するわけではありません。画像や動画を多用するサイトでは、依然としてサイト速度に悪影響が出る可能性があります。Kinstaの無料電子書籍『WordPressサイトを高速化する方法』では、簡単に実践できる最適化のヒントを多数ご紹介しています。無料でダウンロードできますので、ぜひお役立てください。
コメントを残す