【はてなブログ】「オフスクリーン画像の遅延読み込み」を実現してみる【2019年】

結構、力業で、実際には期待通りの動作、性能は出ない可能性があります。

対象画像が消されるかどうかの確認

きちんと動作しているかを確認するのが難しいため、一度画像を消すjavascriptを動作させて、記事内の画像が消えるを確認してください。

<script>
document.addEventListener('DOMContentLoaded', function(){
  const imagesDom = document.querySelectorAll('img.hatena-fotolife');
  [].forEach.call(imagesDom, function(dom){
    if (!dom.classList.contains('lozad')) {
      dom.dataset.src = dom.src;
      dom.src = '';
      dom.classList.add('lozad');
    }
  });
});
</script>

・ブログのデザインを変更する（カスタマイズ） - はてなブログ ヘルプ

「デザイン設定」＝＞「カスタマイズ」＝＞「フッター」に上記スクリプトを貼り付けてください。

はてなのフォトライフから画像を貼り付けてる場合は、上記のような感じになるかと思います。遅延ロードしたい画像が消えてたら、今回の方法が使えます。動作確認したら、貼り付けたスクリプトは削除してください。

消えない場合は、「img.hatena-fotolife」あたりを変更すればＯＫかと思います。　imgタグのクラスに「hatena-fotolife」が使われてると消えるというロジックです。消えるように変更しない限りは、この方法は使えません。

img.hatena-fotolifeをimgに変更すると、画像すべてになりますが、アフリエイトの画像や、画像ビーコンとかも置き換わるので少し不味いと思うので、クラスを指定したほうが良いと思います。

本番用のスクリプトを実行する

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  const imagesDom = document.querySelectorAll('img.hatena-fotolife');
  [].forEach.call(imagesDom, function(dom){
    if (!dom.classList.contains('lozad')) {
      dom.dataset.src = dom.src;
      dom.src = '';
      dom.classList.add('lozad');
    }
  });
   const observer = lozad();
   observer.observe();
});
</script>

「デザイン設定」＝＞「カスタマイズ」＝＞「フッター」に本番用の上記スクリプトを貼り付けてください。

参考

・JavaScript - src属性をdata-srcに変更したい（画像の遅延読み込み）｜teratail
・IntersectionObserverベースな、遅延読み込みライブラリのLozad.jsを紹介する - Qiita

動作確認方法

・PageSpeed Insights

スクリプトを導入する前と、導入した後で上記でしらべて、「オフスクリーン画像の遅延読み込み」の項目が適用されてるかどうかをみればよいかと思います。

たぶん、適用されても、スコア（点数）はそれほど向上しないと思います。あと、体感速度もそれほど上がらない気はします。

DOMContentLoadedのタイミングで、imgタグのsrcを空にしてるので、理論上は画像をまだ読み込んでないはずですが、実際のところは（私は）わかりません。