【はてなブログ】「オフスクリーン画像の遅延読み込み」を実現してみる【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」あたりを変更すればOKかと思います。 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を空にしてるので、理論上は画像をまだ読み込んでないはずですが、実際のところは(私は)わかりません。

スポンサーリンク
コメント一覧
  • 名前:管理人 :

    コメントは、まだありません。