画像の読込処理をしてWebサイトの表示速度を改善

  • このエントリーをはてなブックマークに追加
画像の読込処理をしてWebサイトの表示速度を改善

画像などの読み込みを遅延させて表示速度を上げる

Webサイト上で大きな影響力を持つ画像。
文字で説明されるより、絵で見た方が理解できる物もありますし、なにより表示したときのインパクトは絶大です。Webサイトの印象を左右する重要な役割が画像にはあります。
それゆえに利用頻度が増え、画像の表示点数も増加していますね。
良い事だらけに思えますが、これによって何が起こるのかというと、表示速度の低下です。

Webサイトは一般的にスクロールしながら読み進めるものです。
当然ながら画面内に表示されていない部分もでてきますね。
通常ではWebサイトを読み込み始めると画像などのファイルを参照し、読み込みが終わるとWebサイトが表示されます。
なので画面外にある画像の読み込みも同時に行われます。
回線の速度には限度がありますから、たくさんの画像が設置されていたら表示に時間がかかる事が想像できますね。

これではなかなかWebサイトが表示されないので、読み込み途中で離脱する方も多くなるのではないでしょうか。
表示するまでに3秒以内に閲覧できなければ、半数以上の方が離脱してしまうといわれています。
3秒くらい待てるでしょと思うかもしれませんが、自身の行動を振り返るとまちきれないと思う頃合いかもしれません。
私自身もどのくらいから「遅いな」と感じるかな?と考えて見たところ、やはり3秒程度の時間で遅いと感じました。
何かする度に数秒待つというのはかなりストレスみたいです。以前は読み込みを待つことができましたが、すっかり高速化に慣れてしまっているみたいですね。

ではどうしたら高速で表示できるのか?ですが、画像の容量を圧縮する方法がまず思いつきます。
ですが一定のクオリティは保ちたいもの。データ容量の削減を優先して、画像が汚くなってしまっては元も子もありません。圧縮にもやはり限界があります。
掲載点数を抑えるという手段もありますが、それではWebサイト全体のクオリティが下がったり、意図が伝わらない事もあるので避けたいですね。

そもそも画面外の画像も読み込んでいるから遅くなるので、表示されていない画面外の画像を読み込まなければいいのです。
そんな事できるの?と思いますができます。「loading=”lazy”」ならね。

loading=”lazy”を使って読み込みを遅延さよう

まだ画面外にある画像を遅れて読み込ませるのはなんだか小難しそう……と感じるかもしれません。
でもそんなことはありません。
img要素に「loading=”lazy”」を追加するだけ。これだけでいいのです。

<img src=”画像のリンクパス” loading=”lazy”>

これだけの手順で画面外にある画像の読み込みをストップして、画面の中に入りそうになったときに読み込みが開始されます。
2020年9月時点ではGoogle Chorome、Firefox、Edgeに対応していますので、幅広いブラウザで効果を発揮できそうです。
iframeにも使えるので、Googleマップを埋め込んだ時にも便利に使えそうです。
Gooelマップの埋め込みは便利なのでよく活用されていますが、読み込みが少し遅いなと思う事も度々起こるので、遅延読み込みできるとかなり良い感じになると思います。


調べていくと、CSSでも画像の遅延読み込みができるとの事!!
2020年9月時点ではGoogle Choromeだけで使えるそうなので、EdgeやFirefoxといった他ブラウザでの表示はこれまで通りになってしまいますが、今後の展開に期待が持てます。

CSSで読み込みを遅延させるcontent-visibility

CSSで遅延読み込みさせる方法と、loading=”lazy”で遅延させる方法で何が違うのだろうと思っていましたが、なんと遅延読み込みさせたい要素を選択できるとの事!
また、画像の読み込みを遅らせると、当然ながら画像の縦横サイズも読み込むまではわからないままです……ですが!
「content-visibility」なら予め描画する領域を指定できるので、画面の表示領域に隠している要素が近づいた時にコンテンツの高さが変動してしまって変な感じになるような事態も減らすことができそうです。

設定についてはまず読み込み遅延させたい項目に対して
content-visibility
で動作を決めます。
そして以下の3つのなかから目的の動作をさせるものを一つ選びます。

1.visible 既定値。要素の内容は、状態にかかわらずレイアウト・描画される
2.hidden 要素の内容のレイアウト・描画をスキップする(display:none;と近い挙動)
3.auto 要素のレイアウト・スタイル・塗りの封じ込めをオンにする。要素はクライアントが表示を求めない状態の時にはスキップする(ビューポート外など)

続いて、「contain-intrinsic-size」で高さを指定してあげます。
contain-intrinsic-size:340px;など

これだけでCSSを使って画像の遅延読み込みをさせる事ができます。 ですがこれはまだGoogleChoromeだけで実装ができる仕組みです(2020年9月時点)。

なんとも限定的ですが、スマートフォンなどのレティナディスプレイの普及に伴う画像サイズ・データ容量の大型化も進んでいるので、ページ表示速度改善は急務と言える状況です。
こうした流れもあって、今後他ブラウザでも実装できる日がくるかもしれません。
今のところはCSSを使った画像を遅延させて読み込ませる手段もあるという認識で良さそうですね。

Webサイト表示までの時間を短くする

Webサイトが完全に表示されるまでに時間がかかりすぎると、どうしても表示される前に一覧へ戻ってしまう方がある程度でてきます。
たとえ有益な情報が掲載されていたとしても、表示されなければ確認のしようがありません。
これらの問題を解決する為にも表示速度の改善はWebサイトにとって重要な課題となります。

画像の他でも、不必要なJavascriptは使わない、使わないCSSは削除する、圧縮するなど、ブラウザへの負荷を軽減したりファイル自体を少しでも圧縮するといった細かな作業が必要になってきます。
少しでも軽くして、負担を軽減させた良いWebサイト制作を心掛けたいものですね。

  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください