くるみ
ということで今回は
- 「第三者コードの影響を抑えてください」が中々消えず厄介すぎる
- そもそも第三者コードってなんなの？
という方に向けてPageSpeed Insightsで頻出の「第三者コードの影響を抑えてください」の解決方法をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
第三者コードとは？
第三者コードとは、ざっくりと言ってしまうと外部のサービスを利用するために読み込まれるファイルやスクリプトのことです。
例として以下のようなものが当てはまります。
- Google AdSence
- Twitter・Facebook
- CDN
そう、WordPressの場合だとどれも連携しがちなものばかりですよね。
これらによって読み込まれるCSSファイルやjsファイルの影響によってページの読み込みがその分遅れてしまっている、ということになります。
くるみ
ですがその連携や読み込みを解除する必要は全くなく、ほんの数分の作業でこの「第三者コードの影響を抑えてください」は解決することができます。
早速その方法について見ていきましょう。
「第三者コードの影響を抑えてください」の解決法
解決方法は大きく分けて2つあります。
- preconnectを付与して事前接続する
- 遅延読み込みする
難易度的には前者の方が簡単ですが、その場合は「Autoptimize」というプラグインが必要になります。
とはいえ後者がめちゃくちゃ難しいというわけでもないので、どちらの方法にするかはAutoptimizeを使っているかどうかで選ぶとよいでしょう。
ということでまずはpreconnectを付与する方法について見ていきましょう。
方法1：preconnectで事前接続する
linkタグのrel属性に「preconnect」を指定することによって、外部ファイルに事前接続する方法です。
header.phpを直接いじってもいいのですが、直接ファイルを編集する必要が無い「AutoPtimize」を使う方法をおすすめします。
もし複数ある場合は以下のようにコンマ区切りで入力します。
(URL1),(URL2),(URL3)ページ下部にある「変更を保存」ボタンをクリックして完了です。
もし万が一これで解決しない・変化が無い場合は、キャッシュが原因である可能性があるので、管理画面上部のバーからAutoptimizeや他のプラグインによるキャッシュを削除してあげてください。
方法2：遅延読み込みする
ページが読み込まれた後に、スクロールされ次第スクリプトをheaderに追加して読み込むという方法です。
こちらは先程のpreconnectで事前接続する方法と違って、プラグインを用いない方法なので個人的におすすめになります。
くるみ
何が悪さをしているかについては、PageSpeed Insightsの項目を見れば判断することができます。(ちなみに「Google Doubleclicks Ads」はアドセンス広告です)
今回は原因として挙げられることの多いGoogle AdSence広告と、Twitterの埋め込みツイートの場合の解決法を見ていきましょう。
Google AdSenceの場合
まずアドセンス広告の場合。これが諸悪の根源である場合が多いでしょう。
アドセンス広告をサイトに貼る時に、新しく発行し挿入した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タグ全てを削除してあげます。
サイト内に複数アドセンス広告を設置している場合は気を付けてください。(※例え違うタイプの広告でも同じ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;
}そして上のコードをJavaScriptファイルに追加してあげれば完了です。
もしjsファイルに追記するのが厳しいようであれば、scriptタグで囲みfotter.phpの直前に追加する形でも大丈夫です。
Twitterの場合
ツイートを記事内に埋め込んだ場合も「第三者コードの影響を抑えてください」の原因になります。
こちらも先程のAdSence広告と同じ要領で遅延読み込みさせることで解決します。
ツイートを埋め込む際に発行されるコードの中に、以下のようなscriptタグがあると思います。まずはこの諸悪の根源を見つけましょう。
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></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);//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;
}PageSpeed Insightsでだけでなく、実際にスクロールしてから表示されているか確認してみてくださいね。
参考 TwitterやInstagramの埋め込みを遅延読み込みして高速表示しようよっし～ずウェブサービス【Yws】
余談ではありますが、自分の場合は埋め込みツイートが無い記事で上のコードが実行されて欲しくないため、以下のようにカスタマイズの際に囲んだ特定のクラスの有無で分岐させています。
if (document.querySelector(".p-twitter-box") != null) {
(省略)
}埋め込みツイートのカスタマイズの詳細については以下の記事をどうぞ。
【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法
まとめ
【スコア90点越え】SANGOを高速化するためのカスタマイズ9選参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
