Bloggerの記事／追加ページの投稿画像にWebPのrwを自動的に付けるプログラム

Bloggerで取得した画像URLに画像パラメーターのrwを追加すると画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。追記：2023年9月から投稿のWebP画像の提供がBloggerの設定から可能になったので、本稿のプログラムはその他のキャッシュ期限のe#などを追加するとかデバイス毎のレスポンシブ配信を追加するなんて機能が必要なときに使うことを勧める。JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、SEO（検索エンジン最適化）対策でアクセスアップを望むならば大丈夫かどうかと様子を見ながら使うべきだと思う。

参考サイト

JavaScript SEO の基本を理解する

もう一つサイト広告のアドセンスの自動広告を使う場合にアドセンスの管理画面のプレビューに反映しないみたいだ。サイト広告が設定されていればブログで実際に表示されるけれどもアドセンスの管理画面で数や位置を決めるときはサイト広告のプレビューが出ないと分からないからWebPのrwの自動化のプログラムを外す必要がある。一時的に止めるならばソースコードの振り分けのためのcond属性の「data:view.featuredImage」（二つある）の先頭に半角感嘆符（!）を付けて「!data:view.featuredImage」にするのが簡単だ。通常と反対に画像なしのページでプログラムが記載されるから何も起こらなくて動作しないに等しくなる。本稿のプログラムを使う人は制作者の結城永人の著作権の表記もソースコードに併せて載せておくMITライセンスでカスタマイズも再配布も許可するから消さないで欲しい。僕が提供している非公式テーマのImaginaryを使っている場合は著作権の表記が含まれているから今回の分を繰り返す必要はない。カスタマイズは全てBloggerの管理画面のテーマのHTML編集、またはバックアップと元に戻すからテンプレートのソースコードを書き換える。重要：2022年3月から新しい画像URLのパターンが変更されて古い画像URLと同じになったので、以下の説明で「古い画像URL」と呼ばれているものは古い画像URLだけではなく、2022年3月以降に取り込まれた実際の新しい画像URLとしても扱われなくてはならない。そして「新しい画像URL」と呼ばれているものは2021年の夏頃から2022年3月までに取り込まれた画像しか当て嵌まらない。

投稿画像にWebPのrwを付けるソースコード
画像URLに画像パラメーターのrwを記載する
新しい画像URLの元のサイズで変更する場合
その他のキャッシュ期限のe#などを追加する場合
デバイス毎のレスポンシブ配信を追加する場合
遅延読み込みのloading-lazyと併用する場合
本文に記載されたscriptタグを実行するソースコード
プログラムの動作確認用のソースコード
Bloggerの投稿画像のプログラムの組み込み方
テンプレートのバージョンによる相違点について
Contempoなどのlayout-versionが3の公式テーマ
Simpleなどのlayout-versionが2の公式テーマ

投稿画像にWebPのrwを付けるソースコードブログのポップアップに「=s1600-rw」と表示されている

BloggerのテンプレートのHTMLを編集してJavaScriptを追加する。画像URLに画像パラメーターのrwを記載するWebPのrwにかぎらず、どんな画像パラメーターでも自動的に付けられる一般的な方法だ。HTML<div class='post-body'> <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag> </div>※太字が追加部分。投稿画像の画像パラメーターはブラウザに読み込まれる前に付けなくては意味がないので、一旦、noscriptタグで、画像ありの記事／追加ページ（テンプレートによってcond属性の条件を追加しなくては記事／追加ページに振り分けられない）の本文を止める。画像のない記事／追加ページは従来通りの仕方で滞りなく表示される。そして記事の本文を止めて出すと親要素の表示領域の高さがなくなるためコメントやラベルなどの後続のコンテンツが上下してしまうから高さを確保しておくのが良いと思う。JavaScript/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-webp-rw-program-for-post-and-page-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"); nl.style.height = "100vh"; psbd.insertBefore(nl, blct); npsbd.insertAdjacentHTML("afterbegin", blct.innerText); const blimgs = npsbd.querySelectorAll("img"); if (blimgs[0]) { Promise.all([...blimgs].map(blimg => { const bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight; if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) { blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; } else { if (/\.jpg|jpeg/i.test(bisrc)) { const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc); blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }} if (blimg.height) { if (!blimg.width && aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) { if (aroi) blimg.height = blimg.width / aroi; }})).then(() => { psbd.parentNode.replaceChild(npsbd, psbd); } else { psbd.parentNode.replaceChild(npsbd, psbd); }※冒頭のコメント（/* ... */）はソースコードの著作権の表記。Bloggerの投稿画像のURLが2021年の中頃から変わったので、新しいもの（blogger.googleusercontent.com）と古いもの（先頭に1から4までのどれかが付いたbp.blogspot.com）のサブドメインに対応している。今年からブログを始めたような人は古い画像URLに対応した「if (/\.jpg|jpeg/i.test(bisrc)) {」から「pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }」の部分は要らないかも知れない。BloggerのrwによるWebPへの変換の挙動で、元の画像ファイルがjpg／jpegだといつも三割くらい軽量化されるもののpngやgifだと恩恵が少ない。特にpngだと逆に重くなることさえもあるので――およそBloggerからの取り込みの時点で、十分に軽量化されたものはさらにWebPに変換しても仕様がないみたいな感じがする――除外した方が良いと思う。画像URLのサブドメインが古いものはjpg／jpegに限定して「rw」を付けているけれども新しいものは除外する方法が見付からないので、自動化のプログラムと共にpngやgifを使うときはWebPの変換の効果が薄くてしかもpngだと表示速度が反対に遅くなる恐れもあると注意して欲しい。Bloggerの画像パラメーターは色んなものがある（Google/Blogger Image URL Parameters）。ソースコードの三ヵ所のrwが画像URLに入るので、それらを置き換えたり、さらに半角ハイフン（-）で繋いで増やしても構わない。記事の本文を挿入したときに画像の読み込みが遅れて高さがないために画像以外の文章などが上下してしまう。避けるために画像の高さを確保している。

関連ページ

Bloggerの投稿画像の軽量化のWebpPのrwの自動化のJavaScriptプログラムの説明付きソースコード

投稿画像のURLのサイズ属性についてBloggerの投稿からの画像の取り込みで、小か中か大か特大ならば画像のimgタグに縦幅のhigh属性か横幅のwidth属性（長い方）が付くけれども元のサイズだと付かない。しかし全ての画像に表示可能な最大サイズの縦幅のdata-original-height属性とdata-original-width属性が付くので、その縦横比から画像にheight属性かwidth属性があればもう片方を追加したり、どちらもなけれ画面幅に対する高さを割り出している。なのでそうした属性を投稿の編集から消さないでおくと画像が出るときに先に出ていたその他のコンテンツが押し下げられるような状態にはならない。画像に縦横のheightとwidthの二つの属性が付いているとブラウザが画像の表示領域を直ぐに分かって高速表示に繋がるともいわれる。Bloggerの投稿画像は元のサイズで取り込まれた場合、heightとwidthの属性はどちらも付かないので、手動で付けたりしてなければ出だしが潰れてしまうし、表示速度に有利でもない。WebPのプログラムの基本のソースコードでは何もしてないけど、しかしdata-original-height属性とdata-original-width属性の縦横比を差し替えて使うこともできる。その場合は「if (aroi) blimg.height = blimg.width / aroi; }」の後に「else {blimg.height = blimg.dataset.originalHeight; blimg.width = blimg.dataset.originalWidth;}」を追加する。ただし画面の表示領域が最大サイズで記事の本文からはみ出してしまうかも知れないので、CSSの「.post-body img {max-width:100%}」などで記事／追加ページの画像をどのくらいの大きさまで表示するかを予め指定しておく必要がある。画像URLに入る三ヵ所の「rw」の内容

blimg.src = bisrc + "-rw"

新しい画像URLで既存の画像パラメーターがある／小か中か大か特大で取り込んだ画像

blimg.src = bisrc + "=rw"

新しい画像URLで既存の画像パラメーターがない／元のサイズで取り込んだ画像

blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]

古い画像URLで既存の画像パラメーターがある／か中か大か特大で取り込んだ画像場合

新しい画像URLでは投稿画像が小か中か大か特大で取り込まれるとサイズの画像パラメーターが最初に付けられて元のサイズたと何も付かない。それぞれに画像パラメーターの繋ぎ方が変わるので、サイズのパラメーターの後に半角ハイフン（-）で繋ぐものと何も付かずに先頭の画像パラメーターで半角イコール（=）で繋ぐものの二つに分けてある。古い画像URLでは投稿画像がどんなサイズで取り込まれてもサイズの画像パラメーターが付くからその後に半角ハイフン（-）で繋ぐものの一つだけある。画像URLにrwの画像パラメーターがあれば付けないブログに手動でrwを付けた投稿画像があると自動化のプログラムで二つ付くことになる。調べたら画像は同じものが表示されるので、支障はないけれども画像URLが少しでも変わるのを避ける方法を載せておく。if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) { blimg.src = /=.*$/.test(bisrc) ? /=.*rw.*$/.test(bisrc) ? bisrc : bisrc + "-rw" : blimg.src = bisrc + "=rw"; } else { if (/\.jpg|jpeg/i.test(bisrc)) { const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc); blimg.src = /rw/.test(pmoi[2]) ? pmoi[0] : pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }}※太字が追加部分。投稿画像に事前にrwが付いていたらさらに付けないので、画像URLの文字列でrwが重複することはなくなる。新しい画像URLの元のサイズで変更する場合2021年の中頃から導入された画像URLのサブドメインのblogger.googleusercontent.comの投稿画像は画像パラメーターでサイズを指定せずにWebPのrwを付けると、現状、最大幅が512pxのサイズに固定されてしまうようなんだ。投稿画像のHTMLビューで元のサイズで取り込むとサイズの画像パラメーターが付かないので、もっと大きな画像を使いたい場合にはrwを付けないかサイズと一緒に付けなくてはならない。WebPのrwをサイズと一緒に付ける場合はJavaScriptの「blimg.src = bisrc + "=rw";」の「=rw」の部分を「=サイズの画像パラメーター-rw」に変更する。例えば縦横のどちらかの最大幅を1600pxで使いたいならば「=s1600-rw」のように記載する。Bloggerのサイズの画像パラメーターは、三種類、あって最大幅のsの他に縦幅のhと横幅のwも同じようにサイズの数値を添えて記載する。すると新しい画像URLの元のサイズの取り込みで、投稿画像に使用する最大サイズとWebPを同時に自動化することができる。rwの画像パラメーターを付けない場合はソースコードから所定の部分を削除する。blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"※打ち消し線が削除部分。投稿画像のHTMLビューから取り込んだ新しい画像URLの元のサイズで、従来通り、rwなしの512px以上のサイズで使用できる。サイズのパラメーターを付けないと最大幅が1600pnになるから取り込んだサイズで必ずしも表示できない。その他のキャッシュ期限などを追加する場合ブログのポップアップに「=s1600-rw-e100」と表示されている

ブログの表示速度の高速化で投稿画像にrwと同じくらい使いたいのはe#なんだ。キャッシュ期限の画像パラメーターで、ブラウザが保存する期間を指定することができる。日数で百日ならばe100と添字（#）を付けて記載すると次回以降の期間内の閲覧では画像をサーバーと痛心せず、保存済みのものを使うから非常に速く表示するようになる。一回目の閲覧の画像表示をWebPのrwで、高速化して二回目以降の閲覧の画像表示をキャッシュ期限内のe#でもっと高速化するのが良いと思う。基本のソースコードのJavaScriptを編集する。JavaScriptif (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) { blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw-e100" : bisrc + "=rw-e100"; } else { if (/\.jpg|jpeg/i.test(bisrc)) { const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc); blimg.src = pmoi[1] + pmoi[2] + "-rw-e100" + pmoi[3]; }}※太字が追加部分。新旧の画像URLとそれぞれの既存の画像パラメーターの有無で二つずつとなる四ヵ所のrwに-e100を追加すると何れの場合でも六十日のキャッシュ期限に変換できる。日数を変えたいときは添字の数のe100の10のところを書き換える。デバイス毎のレスポンシブ配信を追加する場合画像のimgタグにsrcset属性を付けるとデバイス毎のレスポンシブ配信デバイス毎のレスポンシブ配信が可能になり、画面幅と解像度に相応しい画像を選択して表示することができる。JavaScriptconst bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight, sssw = aroi < 1 ? Math.trunc(640 / aroi) : 640, lssw = aroi< 1 ? Math.trunc(1280 / aroi) : 1280; if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) { blimg.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; const wogp = /^.+=/.exec(blimg.src); blimg.srcset = wogp[0] + "w" + sssw + "-rw " + sssw + "w, " + wogp[0] + "w" + lssw + "-rw " + lssw + "w"; } else { if (/\.(jpg|jpeg)/i.test(bisrc)) { const pmoi = /^(.+\/)(.*)(\/.*)$/.exec(bisrc); blimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; } const wobp = /^(.+\/)(.*)(\/.*)$/.exec(blimg.src); blimg.srcset = wobp[1] + "w" + sssw + "-rw" + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + "-rw" + wobp[3] + " " + lssw + "w"; }※太字が追加部分。サンプルではスマホとパソコン（高解像度スマホを含む）の二つのデバイスで画像を出し分けて横幅が640pxと1280pxの画像を振り分けている。前者が「Math.trunc(640 / aroi) : 640」、後者が「Math.trunc(1280 / aroi) : 1280」の二つずつある同じ数値に対応しているので、変更するとレスポンシブ配信の横幅をカスタマイズできる。二つずつある数値の前の方は縦長の画像の場合の横幅の算出のためで、縦幅を640pxと1280pxとするようにプログラムされているので、横長の画像の場合よりも短くなる。縦幅が反対に長いから画像全体の大きさは変わらない。二つの画像のURLのそれぞれにスマホとパソコンの二つ画像のレスポンシブ配信を行うけれどもそこにも軽量化の画像パラメーターを付けている。サンプルでは四ヵ所の「-rw」があってその他のキャッシュ期限などの画像パラメーターを追加することもできる。画像URLに入る四ヵ所の「rw」の内容

wogp[0] + "w" + sssw + "-rw "

新しい画像URLのスマホ用画像

wogp[0] + "w" + lssw + "-rw "

新しい画像URLのパソコン用画像

wobp[1] + "w" + sssw + "-rw" + wobp[3]

古い画像URLのスマホ用画像

wobp[1] + "w" + lssw + "-rw" + wobp[3]

古い画像URLのパソコン用用画像

それぞれに対応する画像パラメーターを「-rw」のところでカスタマイズできて統一する場合は全て同じに書き換えなくてはならない。注意：新しい画像URLの方は画像パラメーターの最後に半角スペース（）を必ず残さなくてはならず、消してしまうと画像が表示されなくなる。画像のレスポンシブ配信を行うと基本のマークアップは殆ど使われなくなる（srcset属性に対応してないブラウザが使うけれども今は多くのブラウザが対応済みだ）から余り気にしなくて良い。殆どの場合、実際に使われる画像のサイズはレスポンシブ配信に切り替わる。そして画像の取り込みで元のサイズ以外はサイズの属性によって固有の大きさで表示される。元のサイズはサイズの属性が付かないからレスポンシブ配信のサイズで表示される。画像URLにサイズの属性がないとレスポンシブ配信で、全部、同じサイズになるから特定の画像を固有の大きさで表示したい場合は投稿のHTMLビューで当該の画像URLにwidth属性やheight属性を付けるかCSSでwidthやheightを指定すると大丈夫だサンプルでは古い画像URLのJPG／JPEG以外のGIFとPNGの画像もレスポンシブ配信の対象になる。除外する場合はblimg.src = pmoi[1] + pmoi[2] + "-rw" + pmoi[3]; }の最後の半角閉じ中括弧（}）を

blimg.srcset = wobp[1] + "w" + sssw + "-rw" + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + "-rw" + wobp[3] + " " + lssw + "w"; }

の最後に置き換えてlssw + "w"; }}にする。遅延読み込みのloading-lazyと併用する場合ブログの表示速度を画像に関して上げるための有力な方法として画面外のものを遅延読み込みするloading-lazyがある。WebPのrwのプログラムと同じ仕方で記事／追加ページに組み込めるので、一緒に使うと非常に効果的だと考える。HTMLは同じで、JavaScriptだけ加工して増やす。JavaScript/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/01/automatic-webp-rw-program-for-post-and-page-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"); nl.style.height = "100vh"; psbd.insertBefore(nl, blct); npsbd.insertAdjacentHTML("afterbegin", blct.innerText); const blimgs = npsbd.querySelectorAll("img"); if (blimgs[0]) { Promise.all([...blimgs].map(blimg => { 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 && aroi) blimg.width = blimg.height * aroi; } else if (blimg.width) { if (aroi) blimg.height = blimg.width / aroi; } else if (aroi && !blimg.style.aspectRatio) { blimg.style.aspectRatio = aroi; } if (!blimg.alt) blimg.alt = "<data:messages.image/>"; blimg.src = ""; return blimg; })).then(results => { psbd.parentNode.replaceChild(npsbd, psbd); results.forEach(result => { if (result.getBoundingClientRect().top >= window.innerHeight) result.loading = "lazy"; result.src = result.dataset.src; delete result.dataset.src; }); }); } else { psbd.parentNode.replaceChild(npsbd, psbd); }※冒頭のコメント（/* ... */）はソースコードの著作権の表記。記事／追加ページの投稿画像にWebPのrwの画像パラメーターと遅延読み込みのloading-lazyを自動的に付けるプログラムになる。画像パラメーターは三ヵ所のrwのところでカスタマイズできるし、loading-lazyのプログラムもYouTube動画を含めたり、初回画面の画像を優先的に読み込んで早めに表示するdecoding-asyncを追加できたりもする。レスポンシブ配信を追加するときは少し変わるから注意を要する。JavaScriptconst bisrc = blimg.src, aroi = blimg.dataset.originalWidth / blimg.dataset.originalHeight, sssw = aroi < 1 ? Math.trunc(640 / aroi) : 640, lssw = aroi< 1 ? Math.trunc(1280 / aroi) : 1280; if (/blogger\.googleusercontent\.com\/img\/a\//.test(bisrc)) { blimg.dataset.src = /=.*$/.test(bisrc) ? bisrc + "-rw" : bisrc + "=rw"; const wogp = /^.+=/.exec(blimg.dataset.src); blimg.dataset.srcset = wogp[0] + "w" + sssw + "-rw " + sssw + "w, " + wogp[0] + "w" + lssw + "-rw " + lssw + "w"; } 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; } const rwpm = /\.(jpg|jpeg)/i.test(bisrc) ? "-rw" : "", wobp = /^(.+\/)(.*)(\/.*)$/.exec(blimg.dataset.src); blimg.dataset.srcset = wobp[1] + "w" + sssw + rwpm + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + rwpm + wobp[3] + " " + lssw + "w"; }※太字が追加部分。前半の新しい画像URLの分は変わらないけれども後半の古いURLの分が複雑化するから注意しなくては行けない。パラメーターのカスタマイズに関しては後半の古いURLの分は元々の「-rw」が省略されているので、次のような仕方で記述し直す。

wobp[1] + "w" + sssw + rwpm + "追加したいパラメーター" + wobp[3]

古い画像URLのパソコン用用画像

wobp[1] + "w" + lssw + rwpm + "追加したいパラメーター" + wobp[3]

古い画像URLのパソコン用用画像

どちらも「rwpm」と「wobp[3]」の途中に追加したいパラメーターの項目を新しく挿入することになる。追加したパラメーターは必ず半角ハイフン（-）から始めて百日のキャッシュならば「-e100」のように記載する。半角ハイフンがないと画像URLがサーバーにないものに変更されて表示されなくなる。YouTube動画を含める場合はさらにソースコードを追加する。JavaScriptif (/\.(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.tagName === "IMG") { const rwpm = /\.(jpg|jpeg)/i.test(bisrc) ? "-rw" : "", wobp = /^(.+\/)(.*)(\/.*)$/.exec(blimg.dataset.src); blimg.dataset.srcset = wobp[1] + "w" + sssw + rwpm + wobp[3] + " " + sssw + "w, " + wobp[1] + "w" + lssw + "-rw-e100" + wobp[3] + " " + lssw + "w"; }}※太字が追加部分。古い画像URLの判定がYouTube動画も含むからレスポンシブ配信を画像に限定するために所定のソースコードをif (blimg.tagName === "IMG") {との条件分岐で囲っている。本文に記載されたscriptタグを実行するソースコード投稿のHTMLモードで、記事／追加ページの本文にJavaScriptが置かれる場合がある。自作のコードだけではなくてTwitterやInstagramなどのWebサービスの埋め込みコードなどにも含まれている。noscriptタグで止められるとそのままでは実行できないから修正用のプログラムを追加しなくてはならない。JavaScriptconst pbscs = npsbd.querySelectorAll("script"); if (pbscs[0]) { pbscs.forEach(pbsc => { const npbsc = document.createElement("script"); if (pbsc.src) npbsc.src = pbsc.src; if (pbsc.async) npbsc.async = "async"; if (pbsc.textContent) npbsc.textContent = pbsc.textContent; npsbd.replaceChild(npbsc, pbsc); }); }画像軽量化の基本のソースコードに続けて同じscriptタグの中に入れておく。ブログの投稿の一つでも本文にscriptタグを載せていたら追加しないと実行されない。TwitterやInstagramなど埋め込みコードの場合はファイルの読み込みが通常よりも遅れるので、コンテンツが表示されるのにもっと時間がかかってしまうけれどもブログの初回画面が余計に遅らされることは逆になくなるので、全体として大きな差はないかも知れない。プログラムの動作確認用のソースコード投稿画像にパラメーターが付いているかどうかは最終的に表示された投稿画像のURLで確認することができる。とはいえ、元の画像と二重に読み込まれるとたとえ投稿画像が表示されても実際は表示速度が下がってしまう。ちゃんと動作しているかどうかを確認するだのソースコードを載せておく。JavaScript/* 画像パラメーターを付けるだけの場合 */ blimg.style.aspectRatio = aroi; } alert("投稿画像のパラメーターは\u300c" + (/blogger\.googleusercontent\.com\/img\/a\//.test(blimg.src) ? /=(.*)$/.exec(blimg.src)[1] : /\/(.*)\/.+$/.exec(blimg.src)[1]) + "\u300dになっています\u3002"); })).then(() => { /* 遅延読み込みと併用する場合 */ blimg.src = ""; alert("投稿画像のパラメーターは\u300c" + (/blogger\.googleusercontent\.com\/img\/a\//.test(sbisrc) ? /=(.*)$/.exec(sbisrc)[1] : /\/(.*)\/.+$/.exec(sbisrc)[1]) + "\u300dになっています\u3002"); return blimg; })).then(results => { {※太字が追加部分。投稿の画像を上から（横並びがあれば左を先に）一つずつ調べてパ画像URLのパラメーターの部分だけをポップアップで表示する。Bloggerで最初から付いたサイズやプログラムで追加したWebPのrwやキャッシュ期限のe*が付いたかどうかが分かる。暗くて見辛いけれども背景に何もない状態でポップアップが出たら元の画像が読み込まれる前に適切に変更されたことになる。サイトのパフォーマンスをチェックするPageSpeed InsightsではWebPを追加すると「次世代フォーマットでの画像の配信」、キャッシュ期限を百日以上にすると「静的なアセットでの効率的なキャッシュポリシーの使用」が合格するようになる。ただしPageSpeed Insightsはブラウザが元の投稿画像を読み込み始めた後にrwや百日以上のe*を付けても合格になってしまうからその結果だけではプログラムの動作確認として十分ではない。Bloggerの投稿画像のプログラムの組み込み方記事／追加ページの投稿データの独自タグは全て同じで、そして追加するJavaScriptの内容も殆ど同じだ。大きく変わるのは独自タグの親要素や周りの状況で、それに合わせて追加するJavaScriptの内容も少し変わり得る。公式と非公式の全てのテーマでプログラムを組み込む際の共通の手順をサンプルのソースコードに従って挙げる。

投稿の本文の独自タグ：<data:post.body/>に「blog-content」のクラスのnoscriptタグを付ける（サンプルでは画像ありの記事／追加ページでしかnoscriptタグを付けないように加工されている）。

本文のnoscriptタグだけを含む親要素（他のコンテンツは含めても表示されなくなる）に「post-body」のクラスを付ける。

JavaScriptの冒頭のpsbdの取得先の「div.post-body」を本文のnoscriptタグの親要素のタグとクラス、blctの取得先の「noscript.blog-content」をnoscriptタグとクラスに合わせる（サンプルでは合っているからそのままで構わない）。

JavaScriptのソースコードを適切に読み込まれるところ（BloggerのHTMLの基本構造）、最も遅れずに本文を表示させるならばnoscriptタグを含む親要素の直後に置く。

テンプレートで記事／追加ページのの本文の独自タグがインデックスページ（トップやアーカイブやラベル）と共用になっていると遅延読み込みのソースコードがそのままでは不具合が生じるから記事／追加ページのみで使うように書き換える必要がある。最も簡単なのはHTMLのソースコードの独自タグのtagのcond属性にバージョン毎の振り分け項目を追加する。テンプレートのバージョンによる相違点について現在、Bloggerのテンプレートはバージョンが二つに分かれていて公式テーマだとContempoなどのバージョン３とSimpleなどのパージョン２のテンプレートがある、それ以外の非公式テーマも、大抵、どちらかに含まれる。テンプレートのバージョンはレイアウトバージョンで、ソースコードの冒頭のhtmlタグで確認することができる。

レイアウトバージョン３

b:layoutsVersion='3'

レイアウトバージョン２

b:version='2'

使える独自タグなど、ソースコードがそれぞれの組で似ているので、レイアウトバージョンが同じものは公式でも非公式でもカスタマイズの参考になる。バージョン３での記事／追加ページと画像ありの条件で振り分けHTML：b:tag<div class='post-body'> <b:tag cond='data:view.isSingleItem and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag> </div>※太字が追加部分。HTML：script<b:if cond='data:view.isSingleItem and data:view.featuredImage'> <script> 遅延読み込み用ソースコード </script> </b:if>※太字が追加部分。バージョン２での記事／追加ページと画像ありの条件で振り分けHTML：b:tag<div class='post-body'> <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>※太字が追加部分。HTML：script<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'> <script> 遅延読み込み用ソースコード </script> </b:if>※太字が追加部分。遅延読み込みのHTMLが記事／追加ページだけでテンプレートのソースコードに記載されるようになる。遅延読み込みのプログラムの組み込みの例として公式テーマを二つのバージョンに分けて紹介する。Contempoなどのバージョン３の公式テーマ

Contempo

Soho

Emporio

Notable

Essential

全て共通のカスタマイズHTML<b:includable id='postBody' var='post'>  <div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'> <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/><b/tag> </div> <b:if cond='data:view.featuredImage'> <script> 遅延読み込み用ソースコード </script> </b:if> </b:includable>※太字が追加部分。NotableだけはHTMLの同じコードが二つあって一つはウィジェットの設定のdefaultmarkupsタグの中なので、その外で実際に使われているBlog1のwidgetタグの中のHTMLを書き換えなくてはならない。scriptタグはBloggerのXMLファイルでエラーにならなければどこでも構わないけど、しかしnoscriptタグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。シンプルなどのバージョン２の公式テーマ

Simple

Dynamic Views

Picture Window

Awesome Inc.

Watermark

Ethereal

Travel

全て共通のカスタマイズ元のソースコードの本文の部分がバージョン３と異なるので、遅延読み込みのソースコードを修正する。JavaScriptconst 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 psbd……;」から「npsbd.insertAdjacentHTML……;」までの間に二ヵ所のコード（太字の部分）を追加する。投稿画像の後の文章などのコンテンツの回り込み（前の投稿画像の余白に入り込んで上がってしまうこと）を防ぐための措置になる。HTML（デスクトップ）<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "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;'/>  </div> <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'> <script> 遅延読み込み用ソースコード </script> </b:if>※太字が追加部分。YouTube動画に対応するときはソースコードが少し違うけれども独自タグのtagのcond属性から「and not data:view.featuredImage.isYoutube」を削除することは変わらない。HTML（モバイル）<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag> <div style='clear: both;'/>  </div> <b:if cond='data:view.featuredImage'> <script> 遅延読み込み用ソースコード </script> </b:if>※太字が追加部分。HTMLのカスタマイズがデスクトップとモバイルに分かれているので、必要な場合は両方とも投稿データの独自タグを所定のnoscriptタグで囲む。scriptタグはBloggerのXMLファイルでエラーにならなければどこでも構わないけど、しかしnoscriptタグを含む親要素の直後に置くことで最も遅れずに本文を表示させられる。

Nickey2022年3月24日 7:57
はじめまして。
数年ぶりにbloggerのテンプレートを一新しようと試行錯誤している中で、本記事を拝見しまして
「遅延読み込みのloading-lazyと併用する場合」のスクリプトを利用させて頂きたいと思います。
その際に気付いた事ですが、10行目のif文（旧URLの処理）を13行目が上書きしてしまうので、
13行目は10行目のif文に対するelseブロックに入れる必要があるのかと思いました。

webpはgoogleが提唱する企画でもあるので、bloggerなんかは率先して最初からwebp形式で挿入できるようなUIにして欲しいですよね…
返信削除
返信