目次
大量の画像が重く、ページがなかなか表示されない、、
先日、ネットであるものを探していた時、何度か検索を繰り返し、やっと目的のサイトにたどり着いたまではよかったのですが、サイトには大量の画像が埋め込まれていて、高速なネット環境を利用しているにもかかわらず「大量の画像が重く、ページがなかなか表示されない、、」といった状況に出くわしてしまいました。
どうしても調べたい商品の情報が欲しかったので、サイトが表示するまでじっと我慢することにしたのですが、正直、このサイトから何度も離脱したい気持ちに襲われたのは言うまでもありません💦
ウェブサイトでの表現の為に大量の画像や動画をアップロードしているウェブサイトが主流になっている昨今ですが、たまに画像があまりにも重すぎて、ウェブページの読み込みに大きな遅延が発生しているウェブサイトを見かけることがあります。
ウェブサイトの遅延が発生している状況は、ウェブサイトを訪れるユーザーの離脱を発生されるだけでなく、検索エンジンのSEO的にも低評価を受ける為に出来ることであれば改善しておきたいポイントです。ということで、本日は、ウェブサイトにアップされた画像による読み込み遅延を発生させている原因を改善する方法のご紹介です。
大量の画像を配置するウェブサイトのパフォーマンスを改善する方法
大量の画像をウェブページに配置しているウェブサイトのパフォーマンスを改善する方法には、いつくかの方法があります。
CDNサービスを利用することで、画像ファイルなどの静的なデータをCDNにあるキャッシュサーバにキャッシュさせ、画像の読み込み速度を改善する方法は、画像の読み込み速度を改善する方法として良く知られています。
その他にも、HTTPヘッダーをチューニングする方法や本日ご紹介する”Lazy Load”を使用したウェブサイトの画像の遅延対策などがあります。
Lazy Loadとは
Lazy Loadとは、怠けた読み込みの名の通り、画像ファイルの遅延ロード（遅延読み込み）を行う為のJavaScriptライブラリです。
遅延ロードとは
遅延ロードとは、画面で表示されている以外の画像はロードせずに、ディスプレイ上に表示されているページの画像のみを表示し、ページの表示を高速化する仕組みのことです。Lazy Loadは、WordPressを利用しているウェブサーバであればプラグインを利用することで簡単に導入することができますし、JavaScriptライブラリであるlazyloadを使うことで簡単に遅延ロード（遅延読み込み）を実現することができます。
Lazy Loadの使い方
WordPress用のプラグインについては、管理者画面にサインインした後にプラグインから新規追加、Lazy Loadと検索すると最適なプラグインがいつくか出てきますので、割愛します。
さて、ライブライのLazy Loadですが、Githubに公開されていますので、以下のURLにアクセスし入手してください。
https://github.com/tuupola/lazyload
scriptを記述する
まずは、loadload.jsを読み込むために、以下の一行を記述します。場所はhead内でもbody内でもかまいません。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>次にimgタグ用のlazyloadを追加、または書き換えます。
<img class="lazyload" data-src="img/appswingby.jpg" width="765" height="574" />注意する点はふたつ。classに”lazyload”を追加することと、画像へのパスを data-src属性で指定することです。
最後にlazyload()関数で呼び出します。
<script>
lazyload();
</script>lazyload()の中に引数で指定することで対象の要素を絞り込むこともできます。
Lazy Loadは、ブラウザのネイティブ機能でも実装ができる
ウェブサイトの速度を向上させる為に、”遅延ロード（遅延読み込み）”の導入をしたいと考えた時に、ライブラリを導入しなくても、ブラウザのネイティブな機能で遅延ロード（遅延読み込み）を実現される方法があります。
それが、loading属性です。
以下の様に、imgタグの中に loading=”lazy” と記述するとブラウザの適切なタイミングで画像をロードしてくれます。
<img loading=”lazy” src=”images/hoge.jpg” />※↑は、サンプルですので、実際に使う時は、altなどを追加してください。
これで遅延ロードを実現できるなら、わざわざライブラリを使わなくてもと思いたいところなのですが、対応しているブラウザが限られているという注意点があります。今のところ、Chrome、Edgeは対応済み。
そしてiOS 13.4からiPhoneのSafariでも2020年3月に登場した「Lazy Image Loading」という機能で遅延ロードを実現してくれる機能がリリースされています。
iPhoneに追加された”Lazy Image Loading”
iPhone の設定を変更したい場合は、「設定」-「Safari」-「詳細」-「Exprrimental Features」の順番にタップして進むと↑の画面が開きますので、”Lazy Image Loading”を有効にします。
iPhoneでSafariを使って、ウェブブラウジングしているのであれば、無駄な通信量を減らう効果もありますので、Lazy Image Loadingの機能を有効にしておいても良いでしょう。
今日も一日頑張りましょう！