Background-imageの画像をLozad.jsで遅延表示させる方法

Mon, 05 Sep 2022 15:54:04 +0900

Background-imageの画像をLazyload

WEBページの表示の高速化させるために画像を遅延表示させるLazyloadのJSがいろいろありますが、軽量で使いやすいと言われているLozad.jsを使用しています。IMGタグやIFLAMEタグにclass="loazad"を加えれば簡単に使えるのですが、LighthouseなどのベンチマークでCCSのBackground-imageで指定した画像を遅延表示した方がよいとアドバイスを受けることがありました。

Background-imageの画像も遅延表示できる

そもそもBackground-imageで指定した画像を遅延表示できるのか？と疑問に感じていましたが、できることが分かりました。Lozad.jsでできる見たいです。やり方については以下のページを参考にさせていただきました。

参考ページ

https://qiita.com/ChiJ_SeaW/items/40e8d05b8c0c5f920752 https://qiita.com/ChiJ_SeaW/items/40e8d05b8c0c5f920752

https://paralux.co.jp/blog/397 https://paralux.co.jp/blog/397

ソース例

AタグやDIVなど、IMGタグやIFLAMEタグ以外でも、CSSでBackground-imageを設定しているタグにclass="loazad"とstyle="background-image: url();"とdata-background-image="img.jpg"を加えればいいみたいです。

<div class="lozad" style="background-image: url();" data-background-image="img.jpg">

私の場合、class="loazad"を加えるだけでスコアの改善ができました。

PHPのincludeをLazy Includeで簡単に非同期化して高速化！

Wed, 17 Nov 2021 20:37:07 +0900

PHPのincludeを非同期で読込たい

WEBページの表示を高速化するために非同期でincludeできないかな？と思うことがありますが、その方法がありましたのでメモ。

参考サイト

https://qiita.com/miyanaga/items/5b81ca07aec54831a512 https://qiita.com/miyanaga/items/5b81ca07aec54831a512

Lazy Include

https://github.com/miyanaga/php-lazy-include https://github.com/miyanaga/php-lazy-include

AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化

Thu, 14 May 2020 23:39:54 +0900

AdSenseの表示を速くしたいのであえて遅延表示？！

AdSenseの広告を表示させるとどうしてもページの表示が遅くなります。広告の数が多いほど遅くなります。そのせいでGTmetrixやPageSpeed Insightsのスコアが悪くなります。なんとかページの読み込みと表示を速くしたいと、

DNS-PrefetchとかPreloadを使う
広告の数だけあったhttps://pagead2.googlesyndication.com/pagead/js/adsbygoogle.jsを一つだけにする
他のJSやCSSと一緒にまとめてasyncまたはdeferで読み込む

など、いろいろ試して少しはページ表示スピードやスコアがよくなったのですが、どうしても納得がいきませんでした。

そこで、いろいろ角度で調べていると、**『逆に遅延させるといい』**という方法を見つけました。以下にソースを貼っておきますが、効果ありました！PageSpeed Insightsでスコアが安定して90点以上出るようになりました。

↓ 遅延表示させたらスコアが上がった！

導入手順

ページのソース内にある ``をすべて削除
以下のスクリプトソースを``直前に貼る

adsbygoogle.jsを遅延読み込みするので、ページソース内に一つでも残っていると効果が無くなります。一つも見逃さないように削除してください。

スクリプトソース

ページが表示された後にマウス操作やページスクロールが行なわれたらAdSenseの広告の読み込みが始まるスクリプトですが、何もアクションがないと全く広告が表示されないので、参考にさせていただいたソースに少しを手をくわえ、何もアクションが無くても3秒後に表示を開始するようにしました。

40行目あたりのwindow.setTimeout(onLazyLoad,3000)がその部分にあたります。

ページ閲覧者の環境やサーバーの負荷状況にもよるとお思いますが、1～2秒の遅延はあまり効果がなく、3秒（3000ミリ秒）以上の設定で試したところ、安定していいスコアが出るようになりました。

<script type="text/javascript">
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    //ad.dataset.adClient = 'ca-pub-7180830494628299';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);
      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中（更新時 or ページ内リンク）
    if (window.pageYOffset) {
      onLazyLoad();
    }
  //何もアクションがないときは指定秒数後に読み込み開始（ミリ秒）
  window.setTimeout(onLazyLoad,3000)
  });
})(window, document);
</script>
<!--/ Adsense 遅延読み込み -->

新コードと旧コードの見分け方

AdSenseの広告ユニットのコードの新旧は以下のような違いがあると、参考ページにはありました。それによって上記スクリプトの一部を変更する必要があるみたいです。

新コード例

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

旧コード例

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: 'ca-pub-XXXXXXXXXXXXXXXX',
  enable_page_level_ads: true
});
</script>

私の環境の場合

自動広告と手動広告の両方があり、以下の2種類のタグがありました。

//自動広告
<script data-ad-client="ca-pub-7180830494628299" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

//手動広告
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:block; text-align:center;"
       data-ad-layout="in-article"
       data-ad-format="fluid"
       data-ad-client="ca-pub-7180830494628299"
       data-ad-slot="4445374565"></ins>
  <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

新コードなのか、旧コードなのかよくわからなかったのですが、広告タグにサイト運営者のIDに違いがあったので、

data-ad-client　→　新コード
google_ad_client　→　旧コード

と、見分ければいいのかな？と解釈しました。

どちらもdata-ad-clientしかないので新コードになるかと思われます。ですが、これをそれぞれ広告コードのdata-ad-clientを残したまま、src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"を削除して以下のようにしました。

//自動広告
<script data-ad-client="ca-pub-7180830494628299"></script>

//手動広告
  <ins class="adsbygoogle"
       style="display:block; text-align:center;"
       data-ad-layout="in-article"
       data-ad-format="fluid"
       data-ad-client="ca-pub-7180830494628299"
       data-ad-slot="4445374565"></ins>
  <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

スクリプトソース中のad.dataset.adClient = 'ca-pub-7180830494628299';の部分はコメントアウトしました。自動/手動の広告タグもスクリプトソース中のサイト運営者IDが入っているので、私の環境の場合はスクリプトソース中のコメントアウトはどちらでもいい感じです。

参考ページ

あとは収益が上がるのか下がるのかが気になるところ

ここまでやってスコアは良くなりましたがAdsenseの収益にどう影響が出てくるのか気になるところ。スコアが高くなったから収益も上がって欲しいのですが、上がるとは限らず、逆に下がったら手を加えた意味がありません。当分、観察が必要です。

Chromium系のブラウザなら画像・Youtube動画の遅延読み込みができるらしい

Thu, 14 May 2020 22:45:45 +0900

loading=“lazy"の追加で遅延読み込みができる？！

WEBページの表示を高速するための手段としてよく使われる遅延表示（Lazyload）ですが、以下のサイトの情報によると、最近のGoogle Chromeや新しいEdgeなどのChromium系のブラウザならJavascriptを使わなくてもやYouTube動画の埋め込みコードに使われているにloading="lazy"を追加するだけ遅延表示ができるらいです。Firefoxも同じ使い方で遅延表示ができるみたいです。

https://magnets.jp/web_design/11505/ https://magnets.jp/web_design/11505/

Lazyload on qwerty.work

Background-imageの画像をLozad.jsで遅延表示させる方法

Background-imageの画像をLazyload

Background-imageの画像も遅延表示できる

参考ページ

ソース例

PHPのincludeをLazy Includeで簡単に非同期化して高速化！

PHPのincludeを非同期で読込たい

参考サイト

Lazy Include

AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化

AdSenseの表示を速くしたいのであえて遅延表示？！

導入手順

スクリプトソース

新コードと旧コードの見分け方

新コード例

旧コード例

私の環境の場合

参考ページ

今回のスクリプトの参考にさせていただいたサイト

似たようなスクリプトの参考サイト

LazyLoadに関する他の参考サイト

Googleアドマネージャーを使っている場合の参考

あとは収益が上がるのか下がるのかが気になるところ

Chromium系のブラウザなら画像・Youtube動画の遅延読み込みができるらしい

loading=“lazy"の追加で遅延読み込みができる？！