サイトの読み込み速度を高速化する方法　lazy load

Lazy loadでサイトの読み込み速度を高速化する方法

lazy loadという言葉をご存知でしょうか。

日本語にするとlazy:遅い、怠けた　等、load:読み込み　になります。

つまり遅い読み込みという意味になります。

遅延読み込みという風に読んだりします。

遅い読み込みと聞くと、高速化するためなのにに良くないんじゃないか、、と思われるかもしれませんが、遅い読み込みで実はいいのです。

問題はどの部分を読み込ませて、どの部分を読み込ませないか、という所です。

つまり不要な読み込みをなくすことで、より効率よくサイトのページを読み込ませることを可能にする、というのが今回ご紹介するlazy loadです。

読み込みを高速化するlazy laodの仕組み

ではlazy load自体はどのような仕組みで、不要な部分の読み込みを抑えるかというと、画面に表示されている部分のみを読み込みさせて、画面に表示されていない範囲の部分（スクロールすることで現れる画面下の部分）をスクロールするまで読み込みを行わないようにします。

こういった事は、javascriptという言語が処理をおこなうことができます。

javascriptではスクロール位置の情報を読み取ることができるので、スクロールの指定の位置に来るまでload(読み込み)を行わないようにするという事ができます。

サイトにlazy loadの機能をつける方法

上でも書いた様に基本的にはjavascritpで実装していきます。

ただ最近ではブラウザ側でそういった処理を簡単にできる様、lazy loadの機能をより簡単に出来る様になってきています。

chromeブラウザでは、HTMLタグ内に

 loading="lazy"

と追記するだけでlazy loadの機能が使用できます。

どんどん便利になってきていますよね。。

wordpressでも最新のものではlazy loadが標準で実装されているテーマもあります。

google Seach Consoleで計測　実際のスピードはどれ程変わるか

サイトスピード計測はgoogle search consoleでできるのですが、このlazy loadありとなしでの違いを計測してみました。

google seach consoleでの計測方法は、search consoleの左サイドバーの”ウェブに関する主な指標”を選択し、page speed insightで計測ができます。

lazy loadなしの時と、ありの時を比べると、

なんと、、30%程度も違いが出ました。。

計測の度にスコアが変わったりと、あまり安定した数値が得られないのですが、目安としては十分に参考になると思います。

プラグインのテストなどもこのサイトでよくやっているので、あまり速い方ではない。。

wordpressではプラグインの利用がオススメ

お馴染みのwordpressではもちろん簡単にlazy loadが実装できるプラグインがあります。

lazy loadのプラグインはいくつか試した結果バグが出たものもあったので、プラグイン検索でlazy loadと検索し利用者数の多いものから順に試していくのがオススメです。

基本的にはプラグインを有効化した時点でlazy loadが有効になるものが多いので、プラグインを有効化したタイミングでサイトの読み込みをチェックしてみましょう。

問題なくlazy loadができていれば完了です！

サイトの読み込みスピードを上げる事で得られる効果

サイトの読み込み速度を上げる事がどの様なメリットがあるのか、ご紹介します。

ユーザーのサイト閲覧をより快適にでき、滞在時間、回遊率を上げることにつながる

まず当然のことなのですが、ユーザーが快適にサイトを閲覧できればサイトの滞在時間や回遊率にも影響が出てきます。

サイトが重かったり、速度が遅いと見たいと思ってせっかく検索してクリックしてきてくれたユーザーがすぐに離れていってしまうこともあります。。

そういった意味でサイトスピードはできるだけ早くすることをオススメします。

SEOへ良い影響を与える事ができる

search consoleでもページの速度計測が可能な様に、サイトの速度がSEOにも影響を与えるとされています。

サイトの読み込み速度が遅いと、実際にモバイルなどではsearch consoleでエラー扱いにされるということもあります。。

あとは上で書いた様にユーザーの滞在時間や、回遊率といったものが直接SEOに影響を与える事が出来るので、それらのデータが上がれば自然にSEOにも良い影響をもたらしてくれます。

サイトの速度はサーバーの影響もとても強い

これまでにサイトの表示速度を上げる方法として、lazy loadについてご紹介してきましたが実際最もサイトの読み込み速度に影響を与えるものといえばサーバーになります。

海外サーバーなどはかなり安価で利用できるものもあるのですが、サイトの表示速度はかなり低速だったりという事が実際にあります、、

そういった場合、上で書いた様なgoogleでサイトのページ自体、モバイルでエラー扱いにされるという様な事が起こり得ます。

日本のレンタルサーバーでいうと、

有名どころではほとんど横一線でどこのサーバーもかなり高スペックで問題はないのですが、できれば速い速度で表示できるサーバーを契約するのがサイト運営のためには良いといえます。

・ロリポップサーバー

料金もリーズナブルな上、最近どんどんアップデートされてきており、表示スピードも最速級になっています。オススメのサーバー

・Xサーバー

wordpressなどではシェア率がとても高く、安定感が強み

標準で自動バックアップしてくれているのはいいですね

・コアサーバー

最も安く利用でき、それなりに安定して使用できる。最近アップデートでスピードも十分に早くなっている。

まとめ

今回はサイトのスピードを上げる一つの方法として、lazy loadという機能についてご紹介しました。

もし今運営されているサイトが重いと感じる様であれば、一度導入してみてはいかがでしょうか。

またサーバー自体が読み込み速度を遅くしている原因である事もあります。こちらもぜひ一度確認してみてください。