Bloggerの表示の高速化　II QooQ 画像の遅延読み込み自動化-紆余曲折の記録

しばらく遅延読み込みにしていましたが、体感上は表示遅れが気になるので元に戻しました。（form May 2023）

↓このブログで紹介されている画像の遅延読み込みプログラムのインストールが、私の思い違いもあり、QooQでは結構大変だったのでまとめておきます。Bloggerの公式と非公式の全てのテーマでインストールすることができるらしいです。

始めはうまく動かず、プログラム作成者様に教えていただいたので、その内容を反映しています。

インストール
1. 1ヶ所目
2. 2ヶ所目
変更の結果（画像の遅延読み込み化）
トラブル原因

インストール

QooQテーマのHTMLを開いて、”<data:post.body/>” を探します。２か所あります。（私は間違った1ヶ所しか変更しなくてトラブリました。）

1ヶ所目

アドセンス広告１，２に挟まれて次のコードがありますので、これを下記のように変更します。こちらのコードがデスクトップ用（PC用）です。こちらは、もう１ヶ所のコードに比べて簡素なコードです。

オリジナルの4行を変更します。<data:post.body/>が記事の本文で、これをオンオフして、通常の表示と遅延のための表示の一時停止を行う仕組みらしいです。

4. 最も遅れずに本文を表示させるならばnoscriptタグを含む親要素の直後に置く。引用元：Bloggerの投稿画像のプログラムの組み込み方
@Bloggerの記事／追加ページの投稿画像にloading-lazyを自動的に付けるプログラム

オリジナル

変更内容

<div class='post-body' id='single-content'>
<b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='(data:blog.pageType == "item" or data:blog.pageType == "static_page") and data:view.featuredImage'>
<!-- 画像遅延読み込み・自動 -->
<script>
/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/03/a-program-to-ensure-automatic-lazy-loading-of-posted-images-on-blogger.html | License: The MIT License */
const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"), dfi = document.createElement("div");
nl.style.height = "100vh"; psbd.insertBefore(nl, blct); dfi.setAttribute("style", "clear:both;"); npsbd.appendChild(dfi); npsbd.insertAdjacentHTML("afterbegin", blct.innerText);
const blimgs = npsbd.querySelectorAll("img");
if (blimgs[0]) {
Promise.all([...blimgs].map(blimg =&gt; {
const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight;
if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) {
blimg.dataset.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; } else {
if (/\.(jpg|jpeg)/i.test(bisrc)) {
const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc);
blimg.dataset.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; } else {
blimg.dataset.src = bisrc; }}
if (blimg.height) {
if (!blimg.width &amp;&amp; aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) {
if (aroi) blimg.height = blimg.width / aroi; } else if (aroi &amp;&amp; !blimg.style.aspectRatio) {
blimg.style.aspectRatio = aroi; }
blimg.src = "";
return blimg; })).then(results =&gt; {
psbd.parentNode.replaceChild(npsbd, psbd);
const postContentObserver = new IntersectionObserver(entries =&gt; {
entries.forEach(entry =&gt; {
if (entry.isIntersecting) {
const et = entry.target;
et.src = et.dataset.src; delete et.dataset.src; postContentObserver.unobserve(et); }}); }, {
rootMargin: "240px" });
results.forEach(result =&gt; {
if ("IntersectionObserver" in window) postContentObserver.observe(result); else result.src = result.dataset.src; }); }); } else {
psbd.parentNode.replaceChild(npsbd, psbd); }
</script>
<!-- 画像遅延読み込み・自動 End -->
</b:if>

遅延読み込みするソースコードは基本コードに対して、”軽量化のWebPなどと併用するソースコード” を適用しています。

また、”遅延読み込みの動作確認用のプログラム” を一旦組み込んで動作を確認したあと、これは外しています。

さらに、5行目と9，10行目はプログラム作成者様にお教いただいた内容に変更しています。5行目は”画像なしのページを除外”するため、9，10行目は”Qooq オリジナルの「<div style='clear: both;'/> 」の部分が遅延読み込みのプログラムで消される”の対策とのことです。

2ヶ所目

2ヶ所目の”<data:post.body/>” を探します。1ヶ所目のあとにあります。こちらは、モバイル用のコードです。

厳密に言えば、変更するのは2行目だけです。

オリジナル

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

変更内容

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:tag cond='(data:blog.pageType == "item" or data:blog.pageType == "static_page") and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

変更の結果（画像の遅延読み込み化）

PageSpeed Insightsでのパフォーマンス測定結果は次のようになりました。変更後では改善できる項目から「オフスクリーン画像の遅延読み込み」がなくなっています。

変更前

変更後

トラブル原因

<data:post.body/>のコード記載は2ヶ所あります。1ヶ所目はデスクトップ用で2ヶ所目はモバイル用です。

QooQのベースになったと思われるBlogger公式テーマは”Version:2”らしく、その場合のインストール方法が ”Bloggerの記事／追加ページの投稿画像にloading-lazyを自動的に付けるプログラム”に説明されています。

第1の原因は、

オリジナルのコードが1ヶ所目より2ヶ所目の方が内容が多かったので、最初は2ヶ所目のコードが対象だと思って、変更（インストール作業）を行いました。

これはモバイル用の設定コードで、それを変更していたので、当然、何をやってもPCには反映されません。

第2の原因は、

変更後はPCとスマホで動作確認していたのですが、Bloggerの「モバイルの設定」が「デスクトップ」になっていたことです。この設定だと、「モバイル」でも「デスクトップ」の設定が適用されます。つまり、変更の都度、変更が有効になっていない「デスクトップ」の設定状態で、PCとスマホで動作確認していたことになります。

プログラム作成者様より