サイトの表示速度を改善する「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>


まとめ

いかがでしたでしょうか。
サイトスピードを改善することによって、せっかくアクセスしていただいたユーザーを離脱させてしまうことを防ぐことができるようになります。
通信技術の発達によって、様々な情報発信を行うことができるようになっている一方で、その読み込み速度にも注意を払っていく必要があります。
体感的には0.2~0,3秒でもユーザビリティは大きく変わってきます。
ホームページのスピードを改善したい、SEO対策を強化していきたいとお悩みを抱えている方はぜひ一度ワイズオフィスITメディア事業部までお問合せください。
専門の担当者が皆さまの課題を解決させていただきます。