WordPress

Lighthouse Report で指摘された項目を修正してページスピートをアップ

Defer offscreen images

ブラウザに初期表示する画像以外の読み込みは、遅延ロードしましょう。

スクロールしないで閲覧できる領域のことを、Above the fold(アバブ・ザ・フォールド)と言うらしい。
逆に、スクロースしなければならない領域は、Below the fold(ビロウ・ザ・フォールド)と呼ばれる。

Below the foldにしか出現しない画像のことを、Offscreen Images(オフスクリーンイメージ)と呼ばれている。
どうせ出現しないから、Offscreen Imagesは遅延読み込みする。

画像に限ったことではなく、CSS、JavaScriptも同様。
Above the foldの領域に関係ないやつは、なるべくあとから読み込むようにするのが原則。

WordPress で画像を遅延読み込みする

WordPressには、遅延読み込みするためのプラグインがたくさんある。

https://kinsta.com/blog/wordpress-lazy-load/この記事を参考に選びました

メンテンナンスされていそうで、評価も高い「BJ Lazy Load」をインストールしてみる。

imgタグを直接出力している場合は、以下の関数を適用する必要がある。ここがちょっとめんどくさかった。

「BJ Lazy Load」をインストールしたけっか、LighthouseのPerformanceスコアを改善(13→37)。
Progressive Web App と Best Practices の部分も改善??

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です