ページの表示速度の改善の一手で画像の遅延読み込みというものがある。
遅延読み込みというのはファーストビュー(ページ読み込み時にブラウザに表示される箇所)で出力されている画像以外は、ページの内容をすべて表示してから画像の取得を行うというテクニックです。
ページを表示する上で重い画像(動画)ファイルやiframeを遅延させることで、ページ表示が快適になる。
この遅延読み込みを利用する方法は、
ブログ記事の末尾にある画像の出力箇所で、
<img src="/site/storage/images/seo_banner.jpg" alt="SEO - saitodev.co" loading="lazy">
imgタグにloading属性で値をlazyにしたものを追加するだけで良い。
ただしこの機能はchrome 75以降のみでしか対応しておらず、他のブラウザではjQueryのLazy Loadプラグインを使用する必要があるが、当サイトではjQueryの読み込みに因る速度の低下を気にして利用していない。
当サイトではPCでの表示がブログ記事本文の後に右側の表示を開始するので、PCの方では改善が見られなかったが、
スマホではPC版の右側がページの下に回り込むので、lazy loadの恩恵が大きくなる。
関連記事
SOY Shop版HTMLキャッシュプラグインを追加しました
