⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？

近年、表示速度はSEOのランキング要因となり、サイト運営者にとっては見過ごせない話題となっています。

「Lazy Load」というJavaScriptライブラリを使うことで、サイトの表示速度の高速化を実現することができます。本記事では「Lazy Load」の基本知識や実装方法について解説します。

1．遅延ロードとは？

画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面領域外に存在する画像はロードしないことで、画面表示を高速化する仕組みのことです。

ブラウザは通常、HTMLに含まれるimgタグの画像ファイルを実直にすべて読み込みます。実直に読み込むということは、どんなに長いページでも、ユーザーがほとんど閲覧しない下部の画像でも、読み込んでしまうということです。ほとんど閲覧されないのに、必ず画像を読み込むのはネットワーク的にも無駄ですよね。

そこで、Lazy Loadによる画像の遅延ロードの登場です。

画面のスクロール位置に応じて「必要な分だけ画像を取得」するので、とても効率的です。

2．Lazy Loadの使い方

Lazy LoadはGitHubで公開されています。

https://github.com/tuupola/lazyload

Lazy Loadを導入する手順は、以下の3ステップです。

  1. Lazy Loadのscriptタグを配置する
  2. imgタグにclass=”lazyload”とdata-src属性を記述する
  3. lazyload()関数を呼び出す

2-1. scriptタグを配置する

まず、loadload.jsを読み込むscriptタグを記載します。

場所はhead内でも、body内でもOKです。

<script src=”https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js”></script>

2-2. imgタグを記述する

imgタグの書き方には注意が必要です。

デフォルトで動作する標準の書き方は以下の通り。

<img class=”lazyload” width=”765″ height=”574″ data-src=”img/logo.png” alt=”アナトミー” />

class=”lazyload”を追加

src属性ではなく、data-src属性で画像パスを指定する

また、後述しますが、width属性やheight属性、もしくはそれに相当するCSSを書いておくとよいです。

alt属性はimgタグのSEO効果を高めるので、忘れずに書きましょう。装飾目的の画像はalt=””でOKです。

2-3. lazyload()関数を呼び出す

最後に、lazyload()関数を必ず呼び出します。

タイミングは、bodyの最後もしくはDOMContentLoadedイベント時とかで良いです。

<script>

    lazyload();

</script>

対象の要素を指定したい場合は、引数で指定もできます。

<script>

    lazyload(document.querySelectorAll(“ul.many-images li img”));

</script>

jQueryを使う場合は、jQuery.lazyload()関数を呼び出します。

具体的には、bodyの末尾に以下を書いておけば、標準の書き方で書いたimgが遅延ロードされます。

<script>

    $(“img.lazyload”).lazyload();

</script>

3．Lazy Loadのメリット

続いてはLazy Loadを実装するメリットについてご紹介します。

3-1．ユーザービリティが向上する

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

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

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

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

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

4．Lazy Loadのデメリット

メリットだけではなくデメリットもあります。

4-1．実装するのに専門技術が必要

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

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

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

5．Lazy Loadを実装する方法

Lazy Loadを実装する方法として以下３つがあります。

【Lazy Loadの実装方法】

  • loading属性で実装する
  • JavaScriptのプラグインで実装する
  • WordPressのプラグインで実装する

5-1．loading属性で実装する

loading属性とはブラウザがネイティブ（標準機能）で搭載する遅延読み込みのタイミングを指定するものです。HTMLタグに追記するだけで使うことができます。loading属性ではimg要素（画像）やiframe要素（YouTubeやGoogleマップなど）を簡単に遅延読み込みできるのが特徴です。

具体的には、img要素やiframe要素に「loading=”lazy”」と追加します。

【img要素】

<img scr=”画像のURL” alt=”” loading=”lazy”>※「loading=”lazy”」の挿入場所はどこでもよい

【iframe要素】

<iframe src=”埋め込むページのURL” loading=”lazy”></iframe>※「loading=”lazy”」の挿入場所はどこでもよい

なお、widthとheight属性で画像表示サイズを指定することもできます。必須ではありませんが、ブラウザがページを読み込む際に、指定したサイズ分の画像のプレースホルダーを表示してテキスト読み込みを開始させるため、ユーザーの体感速度の向上につながります。ユーザビリティを考慮すると設置した方がよいでしょう。

主なloading属性に対応しているメジャーなブラウザは以下の通りです。

  • Chrome
  • Edge
  • Firefox
  • Opera

2021年9月現在、safariは「実験的な機能」として追加しており、有効化すればテスト可能です。その他、loading属性に対応していないブラウザがありますが、サポートされていないブラウザではloading属性は無視されるため、従来通りの画像表示が行われます。

ちなみに、loading属性は「Load」の他にもサポートされる値があるので覚えておくとよいでしょう。

auto：遅延読み込みするかどうかブラウザに委ねる　※loading属性を定義しない場合と同じ

eager：遅延ロードに適さない値のため、すぐにロードする

る。

5-2．JavaScriptのライブラリで実装する

loading属性に対応していないブラウザの場合、JavaScriptライブラリ「Layzr.js」で実装します。具体的な手順は以下の通りです。

  1. 「https://github.com/tuupola/lazyload」よりファイルのダウンロード
  2. scriptタグの設定
  3. class=”lazyload”とdata-src属性をimgタグに記述
  4. lazyload()関数の実行

ファイルのダウンロード後、scriptタグを設置します。

scriptタグを設置

次に、imgタグを記述します。Imgタグに「class=”lazyload”」、data-src属性に画像パスを指定します。

最後にlazyload()関数を実行して終了です。

5-3．WordPressのプラグインで実装する

WordPressを利用している場合は、WordPressに搭載されているプラグイン機能を使って遅延読み込みを実装できます。WordPressでは、imgやiframeタグに「loading=”lazy”」が自動的に追加される仕様になっています。したがって、特別な設定もなく簡単に実装できます。

WordPressのプラグインは複数リリースされていますが、今回は軽量かつ設定がシンプルな「Lazy Load–Optimize Images」を紹介します。WordPress初心者でも使いやすいプラグインです。

具体的な実装方法の流れは以下の通りです。

  1. 管理画面のメニューの中にある「プラグイン」をクリックした後に「新規追加」をクリック
  2. 検索窓「Lazy Load–Optimize Images」と入力
  3. Lazy Load–Optimize Imagesの「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」ボタンをクリック
  5. 管理画面のメニューの中にある「設定」から「LazyLoad」をクリック
  6. 「Lazy Load – Optimize Images」の設定画面で「images」「Iframes & Videos」「Replace Youtube videos by thumbnail」にチェックをつける
  7. 「SAVE CHENGES」をクリック

なお、⑥のチェック項目の意味は以下の通りです。

Lazy Load – Optimize Imagesのチェック項目

images画像
iframe&VideosYouTube、Googleマップ、Twitterなど
Replace＆YoutubeVideo by thumbnalLYouTubeの動画埋め込みをサムネイルに変更

対象なる画像については、Wordpress公式サイトの「Lazy-loading images in 5.5 – Make WordPress Core」を参照してください。

ただし、Wordpressで自動的にLazy Loadが追加されるには条件があります。それは、画像タグの中に「width属性」と「height属性」が記述されていることです。なぜこのような条件があるのかというと、レイアウトシフト（画像レイアウトのズレ）を防止するためです。レイアウトシフトの発生はユーザビリティの低下やSEOの検索順位に影響がでるため注意が必要です。

6．まとめ

画像の遅延読み込みはユーザビリティやSEOに影響するため、対策は必須といえるでしょう。実装する方法を複数紹介しましたが、現在の環境に合わせて選択するとよいでしょう。Wordpressユーザーであれば、自動的にタグを追加する機能が搭載されているので簡単に実装できます。

またLazy Loadの実装だけでなく、保有するサイトページの表示スピードを日ごろから計測しておくことも大切です。Googleの無料ツール「PageSpeed Insights」で簡単に計測できるので活用しましょう。画像の遅延読み込みの対策がまだの方は、ぜひ実装化してみてください。

⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？