【１分でできる】lazyloadを使ってページの表示を高速化させる【Bloggerブログ】

ブログにたくさんの画像を使用すると、ファイルサイズが大きくなり、ページを読み込むのに時間がかかってしまうことがあります。


lazyloadを導入すると、画面に表示されていない下の方の画像に関して処理が後回しになるので、ページを開く際の読み込み速度が上がります。

そんな便利なlazyloadですが、紹介されているものの多くはimgタグにclassを設定したり、src属性を新たに書き直す必要があったりと、導入するにあたって手間がかかります。

そんな中でBloggerブログ向けにすごく簡単にlazyloadを実装できるものが海外のサイトで提供されていたのでシェアしておきます。


参考ページ
海外のサイト

https://www.gourabdesign.com/2019/01/lazy-load-plugin-in-your-blogger-website.html


このサイトの以下赤枠で囲ったところをコピーして、
</body>の直前に貼り付けるだけで完了です。



実際に貼り付けてみると、それまでPageSpeed Insightsから指摘されていたオフスクリーン画像の遅延読み込みの提案が見事に無くなりました。

ここで紹介されているのはjQueryを使った方法なので、すでにブログでjQueryを使用している方には特におすすめです。