第三者コードの影響を抑えてください！モバイルやgoogle cdnやgoogle analytics

PageSpeed Insightsでサイトページのスコアを測定する時「第三者コードの影響を抑えてくだい」といった警告があります。

第三者コードの影響を抑えてくださいとは？

プラグイン「Autoptimize」を利用する方法

WordPressテーマファイルを編集する方法

[ad2]

第三者コードとは？影響を抑えてくださいとは？原因についてアドセンス・cocoonや

第三者コードの影響を抑えてくださいとはとは何でしょうか？

改めて警告の欄を見てみましょう。

第三者コードとは？

第三者コードとは、ざっくりと言ってしまうと外部のサービスを利用するために読み込まれるファイルやスクリプトのことです。

例として以下のようなものが当てはまります。

• Google AdSence
• Twitter・Facebook
• CDN

そう、WordPressの場合だとどれも連携しがちなものばかりですよね。

これらによって読み込まれるCSSファイルやjsファイルの影響によってページの読み込みがその分遅れてしまっている、ということになります。

「第三者」の行にGoogleアナリティクスやYahoo!、Facebook、Twitterがあるはずです。
つまり外部サイトと連携する時に接続されるリンク先のことになりますね。

そのままの名前の通りといえばます。WordPressのテーマによっては、TwitterやFacebookへのSNS共有機能があるはずです。Facebookとの接続はそこから行われています。

[ad2]

原因は？アドセンス・cocoonや

私がPageSpeedInsightsを確認したところ、第三者コードの接続が行われるとサイト読み込みに時間がかると表示されました。原因はGoogleAnalyticsですね。WordPressの場合だとどれも連携しがちなものばかりですよね。

これらによって読み込まれるCSSファイルやjsファイルの影響によってページの読み込みがその分遅れてしまっている、ということになります。

サイトスピードが遅くなる原因になります。今回は第三者コードを事前読み込みすることでサイトスピードへの影響を無くす方法を紹介します。

[ad2]

第三者コードの影響を抑えてくださいの特定とWordpressでの解決方法は？原因や改善・解決方法！

解決方法は下記になります。この第三者一覧から、メインスレッドのブロック時間が0msより
長いリンクを確認します。

• preconnectを付与して事前接続する
• 遅延読み込みする

[ad2]

方法1：preconnectで事前接続する

linkタグのrel属性に「preconnect」を指定することによって、外部ファイルに事前接続する方法です。

header.phpを直接いじってもいいのですが、直接ファイルを編集する必要が無い「AutoPtimize」を使う方法をおすすめします。

Autoptimizeは、WordPressのソースコードを圧縮して高速化するプラグインです。

HTML・CSS・JavaScriptから改行やスペースを削除したり、非同期の読み込みにより、表示速度を大幅に高速化できます。

①ここでURLが必要になるので、PageSpeed Insightsで原因と指摘されたURLを右クリックなどでコピーします。

②Autoptimizeにおいて、①で取得したAutoptimizeの設定画面を開いたら「追加」タブを開きましょう。

③「リクエストの事前読み込み」の欄にペーストをします。

④ページ下部にある「変更を保存」ボタンをクリックして完了です。

[ad2]

方法2：遅延読み込みする（GoogleAdsence）

ページが読み込まれた後に、スクロールされ次第スクリプトをheaderに追加して読み込むという方法です。こちらは先程のpreconnectで事前接続する方法と違って、プラグインを用いない方法です。

②その中の1行目のscriptタグを探します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

③そのscriptタグを削除します。全てを削除してください。

サイト内に複数アドセンス広告を設置している場合は気を付けてください。

//アドセンスの遅延読み込み
let lazyloadads = false;
window.addEventListener('scroll', function () {
  if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
    let ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    ad.crossorigin = 'anonymous';
    let scAd = document.getElementsByTagName('script')[0];
    scAd.parentNode.insertBefore(ad, scAd);
    lazyloadads = true;

}

[ad2]

まとめ

今回はプラグイン「Autoptimize」を利用する方法とWordPressテーマファイルを編集する方法をお伝えしました。現在は外部のコードとの連携がないシステムは少ないのでおぼえておいたほうがよいでしょうね。

あわせて読みたい

「静的なアセットと効率的なキャッシュポリシーの配信」とは？TTLを見直す？SEO効果？WordPress PageSpeed Insightsで「静的なアセットと効率的なキャッシュポリシーの配信」の警告がでる方がいませんか？ 別のサイトでも紹介されていますか【PageSpeed Insights】と…

関連記事:

『過大なDOMサイズの回避』とは？document write 非推奨！Wordpresの原因とDom減らす解決・改善の方法！javascript 高速化 テクニック 【Resource Hints】dns-prefetch(プリフェッチ)とは?リリース！使い方！遅くなる?重くなる！メリットやデメリット HTTP/2の確認方法？対応ブラウザ！Chrome SPDY indicatorを有効化チェック 「静的なアセットと効率的なキャッシュポリシーの配信」とは？TTLを見直す？SEO効果？WordPress ヘッダービディングとは？導入メリットや仕組み！デメリットを紹介 prebidとは？意味？ラッパーの仕組み！メリットやデメリットなど特徴！