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で事前接続する方法と違って、プラグインを用いない方法です。
GoogleAdsenceの場合:新しく発行し挿入したHTMLがありましたよね。
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 〇〇広告 –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-〇〇〇〇〇〇〇〇”
data-ad-slot=”〇〇〇〇〇〇”
data-ad-format=”auto”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
②その中の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テーマファイルを編集する方法をお伝えしました。現在は外部のコードとの連携がないシステムは少ないのでおぼえておいたほうがよいでしょうね。
コメント