はてなブログの高速化で、画像遅延をJavascriptでやってみたのでR

以前、Wordpressで画像遅延をやってみたのでR。

その記事が、ここでR。

これが思ったよりもよかったのでR。

そこで、これをはてなブログでもやってみたかったのでR。

ただし、

はてなブログではWordpressのようなプラグインはもちろんないのでR。

ただし、

ブログの高速化には、はてなブログと言えども、画像遅延が最も重要なポイントなのでR。はてなブログの高速化については、ここで書いたのでR。

そこで、最も重要なポイントの画像遅延をはてなブログでも試したいのでR。

ただし、

結構、難儀なのでR。

なぜならば、

ここの、「はてなブログの画像をLazyLoadで遅延読み込みするカスタマイズ」にもあるように、画像の読み込み部分を書き換える必要、があるからでR。失敗すると、すべての画像読み込みがブーなのでR。

WordPressではプラグインででけたのに…。

でも、

やってみるのでR。もちろん、画像の読み込み部分を書き換えないでするのでR。

画像の遅延のjsには、

lazyload

と

lazysizes

があるようなのでRが、

「代表的なスクリプトとしてLazyloadがありますが、私は「Lazysizes」をお勧めします。LazysizeはGoogleのボットが巡回して来た時に、遅延読み込みを行わないため、正しい情報がGoogleにINDEXされるようです。」とあるからなのでR。

その他にも、「「Lazy Load」はAjaxなどを利用したDOM要素の変更を検出するために、何度もメインの関数を呼び出します。結果として表示が遅く、メモリを消費しがちです。」などの意見があったのでR。

時間がかかると、それだけでデメリットなのでR。

だから、今回は、lazysizesでチャレンジしたのでR。

それには、

先にも示した「LazysizesでWebページの高速化」の記事がとても役立ったのでR。

そこでの記事と、ここの記事を合わせて、

強引に、Javascriptで

<img

のclassを追加させて、lazysizesをはてなブログで試してみたのでR。

下のscriptを、「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」に挿入すると、

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes-umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  const imagesDom = document.querySelectorAll('img');
  [].forEach.call(imagesDom, function(dom){
    if (!dom.classList.contains('lazyload')) {
      dom.dataset.src = dom.src;
      dom.src = '';
      dom.classList.add('lazyload');
    }
  });

});
</script>

「はてなブログの画像をLazyLoadで遅延読み込みするカスタマイズ」にもあった、chormeの検証(I)で

classで、

lazyload

となって、画像の少し前までくると

lazyloaded

となってed過去形に変化したのでR。

すなわち、

うまくいったように思ったのでR。

ちなみに、

PageSpeed Insightsで測ってみると、

モバイルで22が、30に改善されていたのでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。