記事に画像を沢山使うとコンテンツが華やかになりますし、説得力なども増すのでどんどん使って行きたいところですが、高画質な画像を沢山使うと気になるのが画面の表示に対する影響です。
画像を使って記事のクオリティを上げても、表示速度が遅くなってしまってはせっかくアクセスしてくれた人もすぐに離脱してしまいます。
このブログで以前にご紹介した「EWWW Image Optimaizer」などで画像を圧縮することで画面の表示を早くすることができますが、写真自体の点数が増えてくると、画像の圧縮だけでは対応しきれなくなってきます。
そこで、1つの記事で写真の点数が多くなった場合に画像の読み込みのタイミングを調整するプラグイン「Unveil Lazy Load」が役に立ちます。
Unveil Lazy Loadについて
このプラグインを利用することで、通常であれば記事にアクセスした際に一気に画像を読み込んでいたところを、画面が表示されている範囲の画像のみを読み込無事により、初回のページ表示速度を劇的に改善します。
スクロールに応じて画像をロード
画面のスクロールに応じて画像を読み込むため、記事を開いた時の画像読込みの時間が劇的に短縮されます。
(読み込みも一瞬なので、よく見なければ初めから表示されているように感じます)
Unveil.jsの採用
「Unveil.js」は非常に軽量なjQueryのプラグインで、わずか0.87KByteほどです。
HTTPリクエスト数を削減
このプラグインでは読み込まれている間にダミー画像を表示させていますが、その表示のためのHTTPリクエストを削減するために、Data URI Scheme適用によりHTMLに直接画像を追加しています。
写真等の画像を多く利用している方はこのプラグインを使うことで劇的にページの読み込みが変わります。
SEOの評価でもページの表示速度が採用されているので、標準として組み込んでおいてもいいプラグインですね。
