Lighthouse のレポート: WordPress で画面外の画像を遅延読み込みする

体感パフォーマンスにおいて重要なことの 1 つは、Web ページが初回アクセス時にどれだけ早く読み込まれるかです。そして、高速に読み込まれる Web ページの鍵は、必要なものだけを必要なときに読み込むことです。

もちろん、これは大変に聞こえるかもしれませんが、特に画像に関しては手軽に取れる成果がいくつもあります。画像は通常、Web サイトの読み込み時にもっとも帯域を消費するもので、従来はとにかくすべてを読み込んできました。

そうすることには、いくつかのデメリットがあります。

• ユーザーが見るかどうかも分からないものに、リソースを使ってしまう。
• ユーザーにもあなたにもコスト面での影響が出る可能性があります。ユーザーは従量課金のモバイル回線かもしれませんし、あなたはクラウドホスティングで送信帯域に課金されているかもしれません。
• 表示中のものに集中せず、表示外の不要なコンテンツを取得・処理することで、ユーザー体験と体感パフォーマンスが悪くなる。
• その結果、Google からのページランキングのペナルティにつながる可能性もあります。Google はよりレスポンシブなページを優先します。

解決策: 画像を遅延させ、表示領域に入ったときだけ読み込む。先ほど述べたように、これは手軽な成果で、まさにそれを行うプラグインがあります: Lazy Load Optimizer です。

WordPress サイトに追加するだけで完了です。これでユーザーがあなたの Web ページにアクセスしたとき、最初は表示領域内の画像だけがダウンロードされ、それ以外の画像はスクロールに合わせて lazy load されます。

これだけでブログのパフォーマンス評価が 20 ポイント上がり、41 から 61 になりました。次にどこへ向かうか見ていきましょう。

トラブルシューティング

私の場合、プラグインをインストールした後、いくつかの画像が次のように崩れる問題がありました。

これは img タグ自体に直書きしていたスタイルが原因でした。それ自体、悪い習慣とされています。すべてを別途読み込むいくつかの CSS クラスへ移したところ、現在は問題なく動いています。