サイトの表示速度に最も大きく影響するのは画像です。
テキストに比べると容量が圧倒的に大きいので読み込みに時間がかかってしまうんですね。
なので画像の位置にスクロールが到達されるまで、その画像を読み込まないようにすることでサイト全体の表示速度をあげる事ができるのです。
いわゆるLazyload（遅延読み込み）と呼ばれる方法ですね。
このLazyloadを簡単に実装できる「Native Lazyload」というプラグインをGoogleが公開しています。
javascriptや特別な設定無しにプラグインを有効化するだけで簡単に実装できるのでぜひ試してみてください。
Native Lazyloadをインストールする
それではプラグインをインストールしてみましょう。
WordPress右メニューの「プラグイン」⇒「新規追加」から「Native Lazyload」を検索します。
するとこのようなプラグインが出てきますので「今すぐインストール」⇒「有効化」でプラグインを利用する準備は完了です。
使い方
使い方は非常に簡単で、インストールして有効化するだけです。
これで自動的にimgタグとiframeタグにloading=”lazy”が追加され、ページ読み込みの際に自動的に遅延読み込みを行ってくれるようになります。
img loading="lazy" src="https://～
現状ではloading属性はGoogle Chromeでしかサポートされていませんが、Chrome以外では「intersectionObserver API」を利用したloadを自動で行ってくれます。
何のこっちゃという話ですが、要はプラグイン側が上手いことやってくれるので、どのブラウザでもLazyloadの実装が可能という事です。
lazyloadさせたくない場合
もし読み込みを遅延させたくない画像がある場合は、classに”skip-lazy“を追加しておきます。
そうする事でlazyloadを無視して表示させることができます。
使用時の注意点
WordPressには他にもlazyloadを実現するためのプラグインがあります。またjavascript等で遅延させる方法も取れるのですが、Native Lazyloadとそれらを同時に設定しているとコンフリクトを起こしてしまうようです。
遅延されずに表示されてしまう、そもそも画像の表示がされない等の問題が出てきますのでどれか一つに絞って運用する事をオススメします。
まとめ
画像遅延は簡単に実装出来て効果の高い施策なので、画像の圧縮と併せてサイトの表示改善のためにぜひ導入してみてください。
画像の圧縮にはこちらのプラグインがオススメです！
