lazysizes

はじめに

画像を多用したウェブページは通信速度に制約のある環境では表示が遅くなってしまう。近年はスマートフォンを前提にして、縦に長く、指でスクロールしながら閲覧するタイプのウェブページが目立つようになっている。そこに画像を何枚も用意すると、ブラウザは未表示領域についても、一度にすべてを読み込もうとするので、結果的にページ全体の応答速度が下がり、閲覧者の途中離脱を招いてしまうことになる。それを避けるために画像の数を減らすことが常識的な対応と考えられてきた。しかし画像の数を減らすと、視覚に訴えないページになってしまう。しかし、いつの頃からかページの必要箇所まで来た時に画像が表示される視覚効果を目にするようになった。それが画像の遅延表示といわれる。

できるだけ簡素に

数多くの先人の導きでインターネットから「lazysizes」（レイジーサイズス）という「ＭＩＴライセンス」の遅延表示スクリプトを検索することができる。高機能にも使えそうだが、何より最小限度の機能に限定して利用できることが魅力だ。html5.1の画像表示の制御によって、htmlの知識で、環境に応じた画像を出し分けることができる。そこにlazysizesを組み合わせれば、遅延表示によって、縦長のスクロール型ページを簡単に実現できる。早速ダウンロードサイトから「Clone or download」ボタンを押して「Download ZIP」をダウンロードしてみると「lazysizes-gh-pages」というフォルダの中に、様々なファイルが詰まっている。これはいったいどう設置すれば良いのだろうか。

ダウンロードと設置

ダウンロードサイトをグーグル翻訳すると、lazysizes.min.jsスクリプトをダウンロードし、ウェブページにlazysizesを含めてください。と説明されている。つまり、lazysizes.min.js単体で動作するという意味に理解できる。本当だろうか。試しに「lazysizes」というフォルダを作成して、lazysizes.min.jsだけを設置してみる。下記のコードをhtmlのheadタグ内に記述する。その際、lazysizes.min.jsがhtmlと同一階層にない場合は、../lazysizes/lazysizes.min.jsのように記述することになる。

<script src= "lazysizes.min.js">
</script>

imgタグの記述

「柿種・モード」のページに当てはめてみる。下記の例では、html5.1の画像サイズ指定については、１：ブラウザ幅が650pxを下回る場合には、webページの幅は、ブラウザ幅と同じである。２：ブラウザ幅が650pxを超える場合は、webページ幅は、650pxに固定される。（何故なら、間延びしないようにページ幅は1000pxに固定しているが、その内350pxはサイドバーが占有しているから。)３：ブラウザ幅が420pxを下回る場合は、kansei-s.pngを表示する。ブラウザ幅が420pxを超えて650pxまでならkansei.pngを表示する。それ以上なら他に画像指定がないのでkansei.pngを表示し続ける。４：画像のclass属性に"lazyload"と設定する。下記の例では"flo-center"というclass名を事前に与えているため半角スペースを空けて２つ目のclass名として設定している。（"lazyload"というclass名を与えておかないと画像が表示されない。）そして、本来は"src"と"srcset"と記述すべきところを、"data-src"と"data-srcset"と書き換えておけば、ページが可視領域に来たところでスクリプトによって、"src"と"srcset"と書かれているものとして処理されて、初めて画像が表示されるという遅延ローダーの仕組みが働く。

<img sizes="(max-width: 650px) 100vw, 650px"
    data-src="kansei.png"  
    alt="柿種・モード完成の図" 
    class="flo-center lazyload"
    data-srcset="kansei-s.png 420w,
    kansei.png 650w">

設置の実証

「柿種・モード」のページにおいて、確かにlazysizes.min.jsだけで遅延表示を行えている。フォルダの中身はたったこれだけなのに。私の場合は、これで目的を完遂できたことになる。極めてシンプルで好感が持てる。今後も使いながら、理解を深めてゆこう。