AdSense や Google アナリティクスなど、第三者との連携によってサイトのスピードは落ちて行くのですが、その影響を軽減する方法として下記のやり方で ( 当サイトの場合 ) 改善できましたのでご紹介します。
結果的に、メインスレッドのブロック時間 が Adsense 以外は 最大 Zero になります。
現状・条件
- レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー
) - WordPress バージョン：5.2.4
- WordPress のテーマ：Cocoon 1.9.9.5.3
- Autoptimize：2.5.1
)- Autoptimize プラグインを利用して設定を行うのが条件です。
Autoptimize の「追加」タブを設定
設定方法は以下のとおりです。
- Step 1ご自身のサイトで連動中の第三者を確認します。
PageSpeed Insights でのサイト分析結果の画面で、「第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 000 ミリ秒間ブロックされました」と表示される第三者のドメインリンクをコピペしてリストを作成します。( 表示リストは環境によって異なります )
▲メインスレッドのブロック時間を減らせます！ - Step 2第三者のドメインリンクをコンマ区切りでリストを作成します。( 例 )
https://pagead2.googlesyndication.com,https://www.google-analytics.com,https://fonts.googleapis.com,https://ajax.googleapis.com,https://cdnjs.cloudflare.com,https://www.googletagmanager.com,https://adservice.google.com,https://i.moshimo.com,https://s0.wp.com,https://secure.gravatar.com,https://stats.wp.com,https://cdn.jsdelivr.net,https://googleads.g.doubleclick.net,https://www.googletagservices.com,https://pixel.wp.com,https://googleads.g.doubleclick.net,https://moat.com/,https://wp.com/,https://www.doubleclickbygoogle.com/
- Step 3そのリストを下記の「サードパーティのドメインに事前接続する(上級ユーザー向け)」にペーストし、「変更を保存」ボタンをクリックします。
▲ サードパーティのドメインに事前接続します。
GTmetrix でご自身のサイトを分析し、その結果画面から、
「YSlow」>「Reduce DNS lookups」項目に表示されるドメインを先ほど作成した第三者のドメインリンクリストに追加すると、より効果がアップされると思います。
（※ ドメインは重複しないように！）
こうすることで、<head></head> タグに プリコネクト 設定が追加されサイトのスピードがアップできます。( プリコネクトの詳細は こちら )
▼ 詳細は、Chrome デベロッパ ツール の Elements タブで確認できます。
※ Chromeブラウザで、「表示」>「開発 / 管理」>「デベロッパ ツール」をクリックするか、 Option + Command + I (大文字 i) キーを押下してデベロッパ ツールにアクセスできます。
必要であれば Cache を削除して、PageSpeed Insights で分析して結果を確認します。
この１つの項目だけでスコアが急に上がることは無いと思いますが、まずは「第三者コートの利用」項目を「合格した監査」に置いておきましょう！
※ Autoptimizeプラグインの全体の設定方法はこちらをご覧ください。
参考文献
Loading Third-Party JavaScript
リソースの優先度付け – ブラウザの有用性を高める
コメント
私もこの警告を消したくて色々と試行錯誤しているのですがなかなか合格できず困っていたところです。
情報ありがとうございます。
ただ、説明通りにやっても合格できませんでした。
このページをhttps://developers.google.com/speed/pagespeed/insights/で計測してみたのですが、「第三者コードの影響を抑えてください」という警告が出ているようです。
どこか設定ミスなどありませんでしょうか。
@楠木さん
コメントありがとうございます。合格にならなくて本当に残念です。
この記事の結果は、https://developers.google.com/speed/pagespeed/insights/に当サイト(https://jacepark.com)のURLを入力すれば誰でも確認できると思います。（この問題は現在解決済みです）
Autoptimizeの全体の設定やChromeデベロッパツールでpreconnect設定が正しく追加されたことを前提に置くと、あとは。。
1) 「Cocoon設定」>「高速化」機能は全て無効にして置く。
2) Autoptimizeを再インストール＆再設定する。
3) Autoptimizeの設定（Step3)を削除し、「Cocoon設定」 > 「アクセス解析・確認」 > 「ヘッド用コード」に link href=”第三者リンク” ref=”preconnect” を作成して追加する。
→ １＋２を適用して分析、または１＋３を適用して分析することでしょうか。
ちなみに、設定を変更した場合はCacheを削除して少し時間を置いてからPageSpped Insightsで分析して見てください。
上記のコメントの中で、「link href=”第三者リンク” ref=”preconnecct＂を追加する。」ところが原因で、Google検査結果に「このページには AMP 実装エラーがあります。」と表示されるため、最初と最後の<>を削除しました。