Lazy Load on qwerty.work

zenbackをGoogle Tag Managerで遅延読み込みさせる

Sun, 17 May 2020 17:23:37 +0900

ページ読み込みスピードを上げるために遅延させたい

最近では不要かもしれませんが、SEO対策の被リンク対応の一つとしてzenbackを導入しているのですが、これを導入することにより、zenbackウィジェットに必要なJSとかjQueryが降ってきます

//w.zenback.jp/v1/?base_uri=***
//w.zenback.jp/_p/js/jquery.min.js

ページの最下部に表示しているので、真っ先にzenbackを読み込む必要ながないので、いくつかのパターンで遅延させることができないかなと思いました。

画面スクロールされたら読み込み開始
ページ表示開始の数秒後に読み込み開始
zenbackが表示される部分が登場したら読込開始

これのどれか、または全部で遅延できる手段が何かないかなといろいろ探したら、Google Tag Manager で簡単にできることが分かったのメモ。

jQueryのLazy Loadとか、Javascriptで非同期や遅延読み込むする方法もありますが、Google Tag Manager を使う方法が最もシンプルで簡単でいいかもしれません。いろいろな条件でいろいろなタグを組み込めるので最近ハマっています。

Google Tag Managerで遅延表示させる方法

Google Tag Manager がどういう物かの説明は省きます。

1. 『新しいタグ』をクリック

2. タグを追加するため右上の鉛筆マークをクリック

3. 『カスタムHTML』を選択

4. zenbackのタグを貼り付ける

実際には以下のように改変して貼り付けています。``とJavascriptを分離して、Javascriptの部分だけを貼り付けています。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
 !function(d,i){
 if(!d.getElementById(i)){
 // オリジナル var r=Math.ceil((new Date()*1)*Math.random());
 var r = new Date();
 var r = ''+r.getFullYear()+('0'+r.getMonth()).slice(-2) ;  //randの値を年月（例 202005）にする 
 var j=d.createElement("script");
 j.id=i;
 j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A//qwerty.work&nsid=XXXXXXXXXXXXXXXXXX%3A%3AXXXXXXXXXXXXXXXXXXX&rand="+r;
 d.body.appendChild(j);}}(document,"zenback-widget-js");
 </script>
<!-- X:E ZenBackWidget -->

****はウィジェットを表示させる部分に記載します。**「document.writeをサポートする」や「詳細設定」**は特に設定しませんでした。

※ページ下部でも記載していますが、このタグが空のままだと失敗しますので、ご注意ください。

5. トリガーを追加するため鉛筆マークをクリック

6. 新しいトリガーを作成するので + マークをクリック

7. トリガーの名前を付けて鉛筆マークをクリック

8. 『要素の表示』を選択

10. 保存して閉じる

11. 『公開』ボタンをクリック

公開しないと設定しただけで終わるので注意。公開ボタンを押すとバージョン名を設定する画面に進みます。

12. バージョン名を設定して『公開』して完了

追加や変更があった場合、バージョン名を設定して公開ボタンを押さないと反映されません。私の場合。バージョン名は日付にしていますが、**『zenback追加』**とかここは何でもいいです。最後に『公開』ボタンを押したら作業は完了です。

ウィジェットが表示されないとき

最初、タグの登録が終わって、ページ表示テストをしたときzenbackのウィジェットが表示されませんでした。以下のページによると、要素（``）が空だと高さ判定で弾かれ、トリガーが発動しないみたいです。

https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire

私の場合、仮にタグを以下のように「その他お知らせ」を追加したところうまく表示できました。

<div id="zenback-widget-loader"></div>

↓

<div id="zenback-widget-loader">その他お知らせ</div>

複数のトリガーを設定しておいた方がいいかも？

今回は参考にzenback-widget-loaderという要素が現れたら表示するようにしましたが、検索ロボットが来たときはどうなるだろう？という疑問が残りました。今回の場合、ページ下部までスクロールされれば表示されますが、スクロールされなければ表示されず無い物という扱いになうのではないかと思いました。

折角設置しているのに無い物扱いだと意味がないので、今回の**『要素の表示』と『タイマー』を組み合わせ**て、スクロールされなくても3～5秒後には強制表示みたいなことをしておけば安心かもしれません。

PageSpeed Insightsで100点が出た！！

これが効いたのかどうかわかりませんが、この記事を投稿した直後にPageSpeed Insightsで計測したら100点でした。マグレでも嬉しいです。

Braveなどでは表示されなくなるので注意！！

Google ChromeやEdgeでは問題ないのですが、Braveなどセキュリティ要素が強いブラウザではzenbackウィジェットが表示されなくなるので注意してください。Google Tag Managerのタグの書き方で回避できるかもしれませんが、それはまた今度探そうと思います。

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

YouTube動画の遅延読み込みができるEcho.js

Sun, 07 Jun 2015 23:17:57 +0900

動画を埋め込むとページの表示が重たいので遅延表示したい

画像を多量に使用してもページを表示するスピードを下げないために以前から「Echo.js」を使用しています。画像の遅延読み込みをするスクリプトで有名なのは「Lazy Load Plugin for jQuery」ですが、「Echo.js」は jQueryに依存せず4KBと非常に軽量ということもあり気に入ってます。

この「Echo.js」ですが、動画も遅延対象にできるようです。

大量のYuoTubeの動画をまとめたブログがあるのですが、ページを表示する時間がかかり、ちょっとのアクセス量でダウン気味になるといったことがありました。これを機に**YouTubeの埋め込みコードの``**を「Echo.js」で遅延読み込みさせるようにしました。

動画を遅延表示している参考ページ

以下のページに複数のYou-Tube動画を埋め込んで遅延表示させています。

感動して涙が止まらないタイの泣けるCMまとめ

ダウンロードページ

以下の作者のページからEcho.jsをダウンロードできます。

http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/ http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

https://github.com/toddmotto/echo https://github.com/toddmotto/echo

使用するのは、srcの中のecho.jsか、distの中のecho.jsかecho.min.jsでいずれかを適当なディレクトリに保存します。

Echo.jsでYou-Tubeのiframeを遅延表示させるための準備

デフォルトのままのecho.jsは画像のタグしか遅延表示に対応していないので、You-Tubeの埋め込みコードに使用されているも対象に加えるためにはecho.jsに手を加えたないといけません。

echo.jsを開いて75行目あたりに以下のコードがあります。（ちなみにこの記事を書いた時点はv1.7.0なので現在は内容が異なっているかもしれません。）

var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');

これに,iframe[data-echo]を追加して以下のように修正し上書き保存します。

var nodes = document.querySelectorAll('img[data-echo], [data-echo-background], iframe[data-echo]');

遅延させたいソースを『data-echo』で指定する

画像``を遅延させる場合の

<img src="loading.gif" data-echo="mainImage.jpg" />

とするように、iframeのコード内のsrc="***"をdata-echo="***"にするだけで遅延の対象となります。

<iframe width="420" height="315" src="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

//srcをdata-echoに変更するだけ

<iframe width="420" height="315" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

読み込みを開始するまでにダミーの画像を表示させたい場合はsrc="***"でダミー画像を指定します。ここを省略してダミー画像を表示させないこともできます。

<iframe width="420" height="315" src="loading.gif" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

基本的なコードの使い方

当然ですが、遅延読み込みするためにはEcho.jsを読み込んでおく必要があります。

<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
		echo.init();
</script>

細かいオプション設定

遅延時間の指定や、読み込みを開始するかを指定する場合は以下のようになります。

ここではブラウザの表示部分に対象の画像や動画が50px以上表示されたら250ms遅延させてから表示する設定を例にしています。offsetとthrottleがその部分です。

<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
		echo.init({<br>		  offset: '50',<br>		  throttle: '250'<br>   		 });</script>

offsetは遅延する画像の領域に上から50pxまでスクロールしたら表示開始するという表示開始位置設定。0を指定した場合は、表示領域内に入ったらすぐに表示。この設定を省略した場合もデフォルト値の0となります。

その他のオプション例

;<script type="text/javascript">
echo.init({
  offset: 0, //オフセット値(画像にどれくらい近付いたら読み込むか)
  offsetVertical: 0, //上下方向のオフセット値
  offsetHorizontal: 0, //左右方向のオフセット値
  offsetTop: 0, //上方向のオフセット値
  offsetBottom: 0, //下方向のオフセット値
  offsetLeft: 0, //左方向のオフセット値
  offsetRight: 0, //右方向のオフセット値
  throttle: 250, //処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間)
  debounce: true, //throttleを有効にするかどうか
  unload: false, //画像が表示範囲から外れた時に読み込み前に戻すかどうか
  callback: function (element, op) { //コールバック
    console.log(element, 'has been', op + 'ed')
  }
});
;</script>

詳しくは以下の製作者のページを参照してください。ちなみに英文です。

https://github.com/toddmotto/echo/blob/master/README.md https://github.com/toddmotto/echo/blob/master/README.md

Chromium系ならloading=“lazy"追加するだけ

最近のChromium系のブラウザならJavascriptを使うことなく、``にloading="lazy"を追加するだけ遅延表示ができるらいです。

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