サイトの表示速度を改善する「Lazy load対応」とは？Lazy loadのメリットとデメリットをご紹介

こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。

今回はLazy Loadについて書きたいと思います。

Lazy Loadとは

Lazy Loadとは画像の遅延読み込みの技術のことです。サイト内の画像を、サイト表示のときにはあえて読み込まず、スクロールに合わせて順々に表示させていくことができようになります。

なぜわざわざ画像を遅らせて読み込ませるのでしょうか。
それはサイトの表示速度を向上させるためです。昔に比べてインターネットの技術が格段に向上して、サイトを読み込む速度は大きく向上しておりますが、同時に画像などが多く配置されるようになり、サイトそのもののデータサイズも大きくなっております。結果として、画像を読み込むのに時間がかかってしまう現象も起きるようになってしまいました。

そこで、サイト展開時の読み込み速度を早くするために、画像の読み込みは後回しにして、スクロールに合わせて順次読み込んでいく仕組みが開発されました。それがLazy Loadです。

Lazy Loadのメリット

ユーザービリティが向上する

サイト読み込み速度が上がるということで、ユーザーにとっては読み込み時間のストレスから解放されます。

ネットワークやサーバーの負荷が緩和される

一度に通信するデータ量が減少するので、ネットワークやサーバーにかかる負荷が緩和されます。これは大きなサイトであればあるほど、メリットは大きくなります。

PageSpeed Insightsで高スコアを獲得できる

サイト読み込み速度はSEOにおいても大きな問題です。表示速度を改善することで、Googleが提供するページスピードの評価サイトであるPageSpeed Insightsにおいて高スコアを獲得でき、SEOにおいて優位になることができます。

Lazy Loadのデメリット

実装するのに専門技術が必要

特にjQueryプラグインであるLazy Loadを実装するには、jQuery、HTML、CSSなどの知識が必要です。これらの知識が全くない方ですと実装は難しいです。

正しく実装されていないと逆効果になる

正しく実装できていないと、サイトのレイアウト崩れや空白の画像が出てきてしまうことがあります。 

Lazy Loadの実装方法

GitHubでプラグインデータを入手

サイトを見る

プラグインデータをサーバー内に設置

「lazyload.min.js」というデータファイルになります。
jsディレクトリなどに設置すると良いと思います。

プラグインデータをサイトで読み込み

画像をHTMLを設置

「lazyload」のclassを付けた上でimgタグを設置します。
<img class="lazyload" width="765" height="574" data-src="img/example.jpg" />

通常の<img src=”xxx”>のsrc属性ではなく、date-src属性になるのでご注意ください。

Lazy Loadを起動

Bodyの最後か汎用jsファイルに下記の記述を追加いたします。

<script>
lazyload();
</script>


まとめ

いかがでしたでしょうか。
Lazyloadを実装したいけど、専門技術は難しいというかたは、是非当社にご相談ください。