FacebookのMessengerをサイトに追加、アドセンスを遅延読み込み

Facebookの設定を見ていたらサイトにMessengerのチャット機能を追加するのがあり問い合わせが増えたらいいなと導入してみた。
そしたら案の定、サイトの表示スピードがかなり悪くなる。
これ自体の読み込みを改善できればいいのだがあまり使われていないようで検索しても解決策が出てこない。
なのでとりあえず、そのほか今まで懸案事項だったGoogleのアドセンスを遅延読み込みすることとした。グーグルアドセンスはページ内に貼ってある広告のこと。

マジシャン出張/派遣マジックショー

FacebookのMessengerをサイトに追加

Facebookのページ設定のメッセージのウェブサイトにMessengerを追加から進める。
ウェブサイトドメインには自分のサイトのURLを入力。

こで生成されたコードをコピーする。それを以下の<body>タグの直下に貼り付け

Twenty Twenty-One: テーマヘッダー (header.php)

2021/04/08真ん中の2行を追加
ページ読み込み時にチャットウィンドウが開かないようになる。
ブラウザによっては開くみたいだけど。
起動時にチャットウィンドウを開かせない
4/10追記気づかれなくなるのも嫌だなと思ったのでやはり表示させるようにした。

		<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v9.0'
          });

      FB.Event.subscribe('customerchat.dialogShow', function(){
      FB.CustomerChat.hideDialog();
      });

        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/ja_JP/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your Chat Plugin code -->
      <div class="fb-customerchat"
        attribution="setup_tool"
        page_id="927675593972632"
  logged_in_greeting="こんにちは。気軽に話しかけてね。"
  logged_out_greeting="こんにちは。気軽に話しかけてね。">
      </div>

PageSpeed Insightsの結果

この後にPageSpeed Insightsで確認すると20台になってしまっていた。
使用していない JavaScript の削除を見るとFacebookのものがずらりと表示されている。
しかし調べてもこれを遅延読み込みさせる方法が分からなかったためそのほかで読み込みを遅くさせていつGoogleのアドセンスを遅延読み込みをすることとした。

※2021/02/23 追記
解決策がわかったのでリンク先で対応した

http://magician.tokyo/solution-pagespeed-insights-90-result-lazy-loading-messenger

グーグルアドセンスを遅延読み込みさせる

footer.phpの</body>の前に以下のコードを貼り付ける。

Twenty Twenty-One: テーマフッター (footer.php)

<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 遅延読み込み -->

PageSpeed Insightsは40台になる。

まだまだスピードが遅いままだけど少しは早くなる。
Messengerの遅延読み込みのコードをどなたか記載願う。

参照

設置5分！FacebookのMessengerをWebサイトに組み込む方法
 AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化

FacebookのMessengerをサイトに追加、アドセンスを遅延読み込み

目次