Bloggerの表示の高速化　II（QooQ 画像の遅延読み込み自動化）私のための覚え書き

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

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

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

Bloggerの投稿画像の自動的な遅延読み込みを確実に行うためのプログラム

Bloggerの投稿画像の遅延読み込みをHTMLのloading-lazyで自動化したけれども動作が芳しくない現状があるので、画面外の画像や動画をきっちり止めて確実に高速化できるJavaScriptのIntersection Observerを使ったプログラムを追加する。

www.nagahitoyuki.com

インストール

1ヶ所目

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

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

<script>と</script>で挟まれた遅延読み込みのソースコードは、次の説明に従っています。

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

<div class='post-body' id='single-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<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;'/> <!-- clear for photos floats -->」の部分が遅延読み込みのプログラムで消される”の対策とのことです。

2ヶ所目

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

<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>

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

変更前

変更後

トラブル原因

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

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