【コピペで解決】「第三者コードの影響を抑えてください」の改善方法

【コピペで解決】「第三者コードの影響を抑えてください」の解決法

くるみ

PageSpeed Insightsで指摘された「第三者コードの影響を抑えてください」を改善したいんだけど

ということで今回は

  • 「第三者コードの影響を抑えてください」が中々消えず厄介すぎる
  • そもそも第三者コードってなんなの?

という方に向けてPageSpeed Insightsで頻出の「第三者コードの影響を抑えてください」の解決方法をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

私と一緒に見ていこう!

くるみ

第三者コードとは?

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

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

  • Google AdSence
  • Twitter・Facebook
  • CDN

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

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

だってどれも便利なんだから仕方ないじゃん

くるみ

ですがその連携や読み込みを解除する必要は全くなく、ほんの数分の作業でこの「第三者コードの影響を抑えてください」は解決することができます。

早速その方法について見ていきましょう。

「第三者コードの影響を抑えてください」の解決法

解決方法は大きく分けて2つあります。

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

難易度的には前者の方が簡単ですが、その場合は「Autoptimize」というプラグインが必要になります。

とはいえ後者がめちゃくちゃ難しいというわけでもないので、どちらの方法にするかはAutoptimizeを使っているかどうかで選ぶとよいでしょう。

ということでまずはpreconnectを付与する方法について見ていきましょう。

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

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

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

step1
「Autoptimize」を有効化する

「Autoptimize」を有効化する

まずプラグイン「Autoptimize」を追加し有効化します。
step2
Autoptimizeの設定ページへ

Autoptimizeの設定ページへ

左のバーの「設定」→「Autoptimize」から設定画面にいきます。
step3
「追加」タブを選択

「追加」タブを選択

上のバーの右から2番目の「追加」というタブをクリックします。
step4
PageSpeed Insightsで原因のURLをコピー

原因のURLをコピー

ここでURLが必要になるので、PageSpeed Insightsで原因と指摘されたURLを右クリックなどでコピーします。
step5
「リクエストの事前読み込み」の欄にペースト

「リクエストの事前読み込み」の欄にペースト

「リクエストの事前読み込み」というテキストエリアに先程コピーしたURLをペーストします。

もし複数ある場合は以下のようにコンマ区切りで入力します。

(URL1),(URL2),(URL3)
step6
変更を保存

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

もし万が一これで解決しない・変化が無い場合は、キャッシュが原因である可能性があるので、管理画面上部のバーからAutoptimizeや他のプラグインによるキャッシュを削除してあげてください。

方法2:遅延読み込みする

ページが読み込まれた後に、スクロールされ次第スクリプトをheaderに追加して読み込むという方法です。

こちらは先程のpreconnectで事前接続する方法と違って、プラグインを用いない方法なので個人的におすすめになります。

でも何を遅延読み込みさせればいいの?

くるみ

PageSpeed Insightsで第三者コードの原因を特定する
何が悪さをしているかについては、PageSpeed Insightsの項目を見れば判断することができます。(ちなみに「Google Doubleclicks Ads」はアドセンス広告です)

今回は原因として挙げられることの多いGoogle AdSence広告と、Twitterの埋め込みツイートの場合の解決法を見ていきましょう。

Google AdSenceの場合

Google AdSenceの場合

まずアドセンス広告の場合。これが諸悪の根源である場合が多いでしょう。

step1
scriptタグを探す

アドセンス広告をサイトに貼る時に、新しく発行し挿入した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>
step2
そのscriptタグを削除する

見つかり次第、そのscriptタグ全てを削除してあげます。

サイト内に複数アドセンス広告を設置している場合は気を付けてください。(※例え違うタイプの広告でも同じscriptタグです)

step3
jsファイルに追記
//アドセンスの遅延読み込み
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;
}

そして上のコードをJavaScriptファイルに追加してあげれば完了です。

もしjsファイルに追記するのが厳しいようであれば、scriptタグで囲みfotter.phpの直前に追加する形でも大丈夫です。

Twitterの場合

Twitterの場合

ツイートを記事内に埋め込んだ場合も「第三者コードの影響を抑えてください」の原因になります。

こちらも先程のAdSence広告と同じ要領で遅延読み込みさせることで解決します。

step1
scriptタグを見つける

ツイートを埋め込む際に発行されるコードの中に、以下のようなscriptタグがあると思います。まずはこの諸悪の根源を見つけましょう。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
step2
scriptタグを削除

先ほど見つけたscriptタグを、ツイートを埋め込んでいる全ての記事で削除します。

もし既に複数の記事にツイートを埋め込んでしまいscriptタグを削除するのが大変な場合は、以下のコードをfunctions.phpに追記することで全記事のタグを削除することができます。

//Twitterのscriptタグの削除
add_filter( 'comment_form_defaults', 'my_comment_notes_before');
function remove_twitter_script($content) {
$content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','',$content);
return $content;
}
add_filter('the_content','remove_twitter_script', 11);
step3
jsファイルに追記
//Twitterの遅延読み込み
let lazyloadads = false;
window.addEventListener('scroll', function () {
  if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
    let twitter = document.createElement('script');
    twitter.type = 'text/javascript';
    twitter.async = true;
    twitter.src = 'https://platform.twitter.com/widgets.js';
    let scTwitter  = document.getElementsByTagName('script')[0];
    scTwitter.parentNode.insertBefore(twitter, scTwitter );
    lazyloadads = true;
}

そして上のコードをJavaScriptファイルに追加してあげれば完了です。

こちらもアドセンスの方と同様に、scriptタグで囲みfotter.phpに直接追記する方法でも大丈夫です。

もしアドセンス広告とTwitter、両方を遅延読み込みさせたい場合は以下のようになります。

//アドセンスとTwitterの遅延読み込み
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);

    let twitter = document.createElement('script');
    twitter.type = 'text/javascript';
    twitter.async = true;
    twitter.src = 'https://platform.twitter.com/widgets.js';
    let scTwitter  = document.getElementsByTagName('script')[0];
    scTwitter.parentNode.insertBefore(twitter, scTwitter );
    lazyloadads = true;
}
以上がアドセンスとTwitterの遅延読み込みの方法でした。

PageSpeed Insightsでだけでなく、実際にスクロールしてから表示されているか確認してみてくださいね。
参考 TwitterやInstagramの埋め込みを遅延読み込みして高速表示しようよっし~ずウェブサービス【Yws】

余談ではありますが、自分の場合は埋め込みツイートが無い記事で上のコードが実行されて欲しくないため、以下のようにカスタマイズの際に囲んだ特定のクラスの有無で分岐させています。

if (document.querySelector(".p-twitter-box") != null) {
  (省略)
}

埋め込みツイートのカスタマイズの詳細については以下の記事をどうぞ。
埋め込みツイートのいいね数と日付を非表示にするカスタマイズ【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

まとめ

以上、PageSpeed Insightsで厄介な「第三者コードの影響を抑えてください」の解決法でした。

【SANGO】サイトを高速化するために行ったカスタマイズ8選【スコア90点越え】SANGOを高速化するためのカスタマイズ9選

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す