MENU
あなたが知りたい芸能ニュースを運営するメディア「芸能マーケティング図書館」です。皆様の芸能における疑問の謎が解決します!

第三者コードの影響を抑えてください!モバイルやgoogle cdnやgoogle analytics

  • URLをコピーしました!

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

第三者コードの影響を抑えてくださいとは?

プラグイン「Autoptimize」を利用する方法

WordPressテーマファイルを編集する方法

[ad2]

目次

第三者コードとは?影響を抑えてくださいとは?原因についてアドセンス・cocoonや

第三者コードの影響を抑えてくださいとはとは何でしょうか?

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

第三者コードとは?

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

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

  • Google AdSence
  • Twitter・Facebook
  • CDN

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

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

「第三者」の行にGoogleアナリティクスやYahoo!、Facebook、Twitterがあるはずです。
つまり外部サイトと連携する時に接続されるリンク先のことになりますね。

そのままの名前の通りといえばます。WordPressのテーマによっては、TwitterやFacebookへのSNS共有機能があるはずです。Facebookとの接続はそこから行われています。

第3者コード
第3者コード

[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で事前接続する方法と違って、プラグインを用いない方法です。

scriptタグを探す

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テーマファイルを編集する方法をお伝えしました。現在は外部のコードとの連携がないシステムは少ないのでおぼえておいたほうがよいでしょうね。

  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

More
芸能と音楽をを追求しつづけるメディアです。東京都内に住んでいます。アネックといいます。
子供の頃から芸能・音楽・テレビっ子でした。ですので昔の芸能音楽や芸能の知識は自信があります。好きな芸能ニュースに自分の見解をいれますので意見もいただけますと幸いです。今だけでなく昔の芸能もお伝えして楽しんでいただければと感じます。とくに皆さんが興味をもってもらえるような懐かしい気持ちに浸れるメディアとしたいと考えています。
法人サイトの実績:
①某大手総合商社系メディア/コーポレイトサイト3件でインフラやセキュリティの技術面で要件定義から運用
②渋谷の大手ファッションモールのショッピングサイトのインフラ担当エンジニア


【資格】
Webディレクション資格認定者、Google アナリティクス個人認定資格(GAIQ)など他 IT資格を取得

【お問い合わせ先メールアドレス】
ybox4907@gmail.com

コメント

コメントする

目次