2021/2/17

2021/10/5

1074 views

ウェブサイトの表示速度はかなり重要

せっかく良質なコンテンツを配信しているサイトでも、サイト表示速度が遅いとユーザーには避けられてしまいます。
また、SEOでも表示速度が遅いサイトは順位を下げられてしまうというアルゴリズムにもなりかなり重要なポイントになります。

ちなみにサイトの表示速度は「PageSpeed Insights」から測定できます。

PageSpeed Insights

画像の読み込みは表示速度の最大要因

サイトの表示速度を左右するのは、HTML・CSSやスクリプトなどのコードや、サーバーのスペックなど多様ですが、もっとも影響を与えるのはデータサイズが大きい画像ファイルです。
画像ファイルをいかに効率よく読み込ませるかが重要なポイントになります。

画像は読み込みを遅延させよう

サイトの画像の読み込みを遅延させることでファーストビューを早めることができます。
これが画像の遅延という手法です。
詳しくは省略しますが、imgタグにloading属性などを記述することで可能になります。

プラグインで一括で簡単に画像遅延が可能に

そんな画像の遅延を簡単にサイトに一括適用できるのが「Native Lazyload」というワードプレスプラグインです。
Googleが提供しているプラグインになります。

「Native Lazyload」はインストールして有効化するだけ

Native Lazyloadの使い方はとても簡単で、「プラグイン」からインストールして「有効化」するだけです。
するとソースのimgタグに自動でloading属性が付与され、画像遅延が適用されています。

まとめ

以上、Native Lazyloadを使って画像を自動で遅延読み込みさせる方法の解説でした。
以前は、画像遅延はjavascriptのややこしいコードが必要でしたが現在はとっても簡単になりました。