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

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

目次

  1. FacebookのMessengerをサイトに追加
  2. PageSpeed Insightsの結果
  3. グーグルアドセンスを遅延読み込みさせる
  4. 参照

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>

2021/07/14修正

ちょっと変わってたので新しいのに変更した。

bodyの下にプラグインのコピーを挿入。
赤文字は遅延読み込みのために挿入したもの。
参照:PageSpeed Insightsの「使用していない JavaScript の削除」が改善して90に!

<body <?php body_class(); ?>>
<!-- Messenger チャットプラグイン Code -->
    <div id="fb-root"></div>

    <!-- Your チャットプラグイン code -->
    <div id="fb-customer-chat" class="fb-customerchat">
    </div>

    <script>
		
		const facebookChat = () => {
		
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "927675593972632");
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v11.0'
        });
      };

      (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'));
			
			}

setTimeout(facebookChat, 7000);
			
    </script>

動画

動画で喋ったので良かったらみてね。

PageSpeed Insightsの結果

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

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

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

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の広告を遅延表示させてスコア改善とページ表示スピードを高速化