サイトスピード ブログ

PageSpeed Insights「第三者コードの影響」を抑える方法

PageSpeed Insights「第三者コードの影響」を抑える方法

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

第三者コードを抑えてください

第三者コード警告の実際の画面

「ずっと表示されるし厄介」
「でも直し方が分からない」

と感じたことがある方も多いでしょう。

そこで今回は第三者コードの影響を抑えるための超カンタンな方法を2つご紹介します。

運営サイトの読み込みスピードで悩んでいる方は必見です!

今回のテーマ

  • 第三者コードの影響とは
  • 第三者コードの影響を抑える方法 (WordPress利用者)
  • 第三者コードの影響を抑える方法 (WordPress非利用者)

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

第三者コードの影響とは

第三者コードの影響とは

第三者コードとは何でしょうか?

外部サイトと連携する時に接続されるリンク先のこと

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

第三者コードを抑えてください

第三者コード警告の実際の画面

人によって多少異なりますが、「第三者」の行にGoogleアナリティクスやYahoo!、Facebookがあるはずです。

第三者コードとはGoogleアナリティクスなどの外部サイトと連携する時に接続されるリンク先のことをいいます。

「Facebookと連携した覚えがない」

そう疑問に思う方もいるかもしれません。
実はWordPressのテーマによっては、TwitterやFacebookへのSNS共有機能があるはずです。
Facebookとの接続はそこから行われています。

この第三者コードの接続が行われるとサイト読み込みに時間がかかり、サイトスピードが遅くなる原因になります。

メインスレッドのブロック時間が0msなら影響はないのですが、それ以上のブロック時間が発生している場合は改善が必要です。

そこで今回は第三者コードを事前読み込みすることでサイトスピードへの影響を無くす方法を2つご紹介します。

第三者コードの影響を抑える方法 (WordPress利用者)

第三者コードの影響を抑える方法 (WordPress利用者)

まず1つ目はWordPress使用者に向けて、WordPressプラグインを使用して第三者コードの影響を抑える方法をご紹介します。

使用するのは、サイトスピードに特化したプラグイン「Autoptimize」です。

ここではAutoptimizeのインストール&有効化が済んでいる前提で解説します。

合わせて読みたい

Autoptimizeの設定方法と使い方をご紹介【サイトスピード高速化プラグイン】
Autoptimizeの設定方法と使い方をご紹介【サイトスピード高速化プラグイン】

続きを見る

step
1
第三者コードのリンク先を用意

まずは第三者コードの影響があるリンク先を確認します。

第三者コードを抑えてください

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

リンク先のコピー

第三者の行の青文字を右クリックして「リンクのアドレスをコピー」すれば第三者コードのリンク先をコピーできます。

コピーしたリンク先はメモ帳などにまとめて控えておきましょう。

step
2
Autoptimizeの設定画面へ

次にAutoptimizeの設定画面に移動します。

Autoptimize設定画面

Autoptimizeの設定画面を開いたら「追加」タブを開きましょう。

すると「サードパーティのドメインに事前接続(上級者向け)」という項目があるはずです。

step
3
リンクを入力

この入力欄にコピーした第三者コードのリンク先を貼っていきます。

第三者コードの入力

リンク先が複数ある時は半角のカンマ「,」で区切るようにしましょう。

入力が完了したら「変更を保存」を押して完了です。

改めてPageSpeed Insightsでスコアを確認してみましょう。

「第三者コードの影響」が「合格した監査」に移動しているはずです。

第三者コードの影響を抑える方法 (WordPress非利用者)

第三者コードの影響を抑える方法 (WordPress非利用者)

続いてWordPressでプラグインを使わずに設定したいWordPressを使っていない方に向けて第三者コードの影響を抑える方法をご紹介します。

こちらの方法はプラグインを使うこと無くコードを入力するだけで簡単に設定できます。

step
1
第三者コードのリンク先を用意

まずは先程と同様第三者コードの影響があるリンク先を用意します。

リンク先のコピー

第三者の行の青文字を右クリックして「リンクのアドレスをコピー」すれば第三者コードのリンク先をコピーできます。

コピーしたリンク先はメモ帳などにまとめて控えておきましょう。

step
2
事前読み込みのコードを入力

続いて第三者コードを事前読み込みするためのコードをHTMLファイルに記載します。

第三者コードの影響を押さえたいページのHTMLファイルを用意したらheadタグに以下のコードを書きましょう。

 html
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="preconnect dns-prefetch" href="//www.google.com">
<link rel="preconnect dns-prefetch" href="///www.google-analytics.com">
<link rel="preconnect dns-prefetch" href="//www.googletagmanager.com">
<link rel="preconnect dns-prefetch" href="//maps.google.com">
<link rel="preconnect dns-prefetch" href="//www.yahoo.com/">
<link rel="preconnect dns-prefetch" href="//developers.google.com">
<link rel="preconnect dns-prefetch" href="//fonts.google.com/">

metaタグも忘れずに入力しましょう。

hrefには先程コピーしたリンクをペーストしてください。

ちなみに「preconnect」「dns-prefetch」とは以下のような意味を持ちます。

ポイント

dns-prefetch
外部サイトからリソースを取得する際は、DNSルックアップというドメイン名からIPアドレスを調べる作業が発生しています。これをあらかじめ行っておくことで遷移時の処理をできるだけ省略しようという機能です。PCではほとんどのブラウザでサポートされています。

preconnect
DNSルックアップに加えて、connect(TCPハンドシェイク、TLSネゴシエーション等)まで事前に処理します。IE11以外のブラウザではサポートされています。

Resource Hintsとはより引用

rel属性にpreconnectとdns-prefetchの両方を記載しているのはどんなブラウザであってもベストな方法で対応できるようにするためです。

入力が終わったら保存して完了です!

PageSpeed Insightsで確認してみましょう。

まとめ:PageSpeed Insights「第三者コードの影響」を抑える方法

まとめ:PageSpeed Insights「第三者コードの影響」を抑える方法

まとめ:PageSpeed Insights「第三者コードの影響」を抑える方法

  • 第三者コードとは外部サイトと連携する時に接続されるリンク先のこと
  • 第三者コードを読み込む時間が長いとサイトスピードに影響が出る

今回はサイトスピードを改善・高速化するための指標のひとつ「第三者コードの影響」を抑える方法を2つ紹介しました。

サイトスピードはユーザービリティに影響するため、SEOでも重要な指標の一つとなっています。

第三者コードによる影響を改善してより良いサイトを作っていきましょう!

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

▼サイトスピード高速化の詳細を知りたい方はこちらをご覧ください

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法をご紹介!

続きを見る

Page Speed Insights「最大コンテンツの描画(LCP)」の改善方法
PageSpeed Insights「最大コンテンツの描画(LCP)」の改善方法

続きを見る

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-サイトスピード, ブログ

Copyright © wagtechblog All Rights Reserved.