スキップしてメイン コンテンツに移動

些細な日常

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

コメント

  1. Rainbow Goblins2023年1月22日 16:23

    このプログラムを使わしていただこうと思い、導入例に倣ってやってみたのですが、うまくいきません。もしよろしければ、どこが問題なのかご教授いただけないでしょうか？（投稿が通らないようなので、スクリプト部は特殊文字に変換しております。）

    テーマHTMLの書き換えはできているようです。他の動きも元のままです。
    うまくいかないと思った理由は、動作確認用のポップアップが出ないことと、PageSpeed Insights で「オフスクリーン画像を遅延読み込みする」が依然として残っていることです。

    Qooq オリジナル
    <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>
    <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'>
    <script>
    遅延読み込み用ソースコード
    </script>
    </b:if>

    返信削除
    返信
    1. 結城永人2023年1月22日 18:52

      投稿が通らないというのはおかしいです。特殊文字に変換するところで、エラーが起きているかも知れません。

      今回のソースコードで止められるのは「&」と「>」で、それぞれに「&amp;」と「&gt;」に置き換えて掲載してますから大丈夫なんです。

      もう一つの方法として「&amp;」と「&gt;」を元の「&」と「>」に戻した上で、scriptタグの内側のソースコード全体をCDATAタグで囲むこともできます

      <script>
      <![CDATA[
      遅延読み込み用ソースコード
      ]]>
      </script>

      このような仕方だと「&」と「>」をscript内のソースコードに使うことができますので、なるべく特殊文字に変換しないでやってみて下さい。

      補足としてtagタグとifタグのcond属性の「data:blog.pageType == "item" or data:blog.pageType == "static_page」の部分は半角括弧に入れて記載しないと画像なしのページを除外できません。

      cond='(data:blog.pageType == "item" or data:blog.pageType == "static_page) and data:view.featuredImage'

      もう一つ、Qooq オリジナルの「<div style='clear: both;'/> <!-- clear for photos floats -->」の部分が遅延読み込みのプログラムで消されますので、遅延読み込みのソースコードの冒頭部分の「const psbd……;」から「npsbd.insertAdjacentHTML……;」までを次のように修正して下さい。

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

      Qooqなどの非公式テーマは他のソースコードの関係から遅延読み込みのソースコードが使えない場合もあるかも知れません。

      削除
    2. Rainbow Goblins2023年1月22日 23:02

      お教えいただいた３点をひとつずつ適用して、動作確認用のポップアップとPageSpeed Insights での「オフスクリーン画像を遅延読み込みする」をみましたが、やはり効いていないようです。
      さらに、素のQooQ（Version:2.00）を入手して、このプログラムを導入してみましたが、効いていないようです。

      削除
    3. 結城永人2023年1月23日 5:45

      この記事では省略しましたが、レイアウトヴァージョン２のテンプレートは「 <data:post.body/>」を含む記事のためのソースコードがパソコン用とスマホ用の二つに分かれています（詳細）。

      前回のQooqのソースコードを見ると公式テーマのレイアウトヴァージョン２のスマホ用と同じです。なのでパソコン用に次のようなソースコードもあるかも知れません。

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>

      通常はこちらの「<data:post.body/>」をカスタマイズしてテンプレートをスマホに対応させる場合はもう一つの「<data:post.body/>」もカスタマイズするようにします。

      公式テーマだとレイアウトヴァージョン２のパソコン用の「<data:post.body/>」はスマホ用のもっと先にありますので、Qooqも二つに分かれてないかどうかを確認してみて下さい。

      削除
    4. Rainbow Goblins2023年1月23日 10:17

      うまく動くようになりました。ポップアップとPageSpeedで確認しました。

      が２か所にあることには気づいていましたが、導入例に比べて下記に載せたように構文が簡素だったこととから、そちらは気に留めていませんでした。記事をもっとしっかりと読み込むべきでした。

      ご指摘いただいたように、もう一か所ののところを書き換えると、画像遅延が有効になりました。”遅延読み込み用ソースコード” の特殊文字を通常文字に戻す変更は適用していません。

      手厚いご教授をいただき、本当にありがとうございました。

      ”遅延読み込み用ソースコード” は同じものを２か所に入れたのですが、これでよかったのでしょうか。

      [[QooQ オリジナル]]
      <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:view.featuredImage'>
      <script>
      遅延読み込み用ソースコード
      </script>
      </b:if>

      削除
    5. 結城永人2023年1月23日 11:34

      正常に動作して良かったです。

      遅延読み込みのソースコードはパソコンとスマホで同じものを使うことができます。

      振り分けのcond属性はパソコン用とスマホ用が同じでも大丈夫ですけど、スマホ用の本文のソースコードは最初から記事／追加ページの専用ですから「data:view.featuredImage」だけでも画像なしのページを適切に除外できます。

      因みにレイアウトヴァージョン２のスマホ対応は公式テーマの場合は自動化されてません。

      Qooqも同じならばBloggerの管理画面のテーマのメニュー（カスタマイズの右横の▽）の「モバイルの設定」をモバイルの「カスタム」（パソコンと同じものをカスタマイズして使う場合）にしないとスマホで閲覧してもパソコン用のソースコードが適用されますので、注意して下さい。

      削除