web-dev-qa-db-ja.com

サードパーティコードの影響を軽減する-Google CDN

私のページ速度スコアはこの問題の影響を大きく受けているようです：

サードパーティのコードの影響を軽減するサードパーティのコードが[number]ミリ秒間メインスレッドをブロックしました

この数値は、テストを実行するたびに変化します。1,000の場合もあれば、1,400の場合もあります。

google CDNから私はjqueryプラグインをロードし、フォントを遅延ロードするためにWebフォンドスクリプトをロードするだけです。関連するコードは次のとおりです。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,600','Roboto:400,500,700']
    }
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

これはページ速度の洞察からの情報です：

サードパーティ|サイズ|メインスレッドのブロック時間

Google CDN | 40 KB | 1,001ミリ秒

ブートストラップCDN | 70 KB | 0ミリ秒

速度を上げるにはどうすればよいですか？

私のサイトにJSコードを追加または削除すると、そのコードがGoogle CDNからのものではなくても、この「メインスレッドのブロック時間」に影響していることに気付きました。

たとえば、次のローカルスクリプトのような一部のjavascriptブロックを削除するとします。

<script src="/js/d3.v5.min.js"></script>
<script src="/js/billboard.min.js"></script>
<script defer src="/js/moment.min.js"></script>

google CDNからのメインスレッドブロック時間は500ミリ秒に減少し、スコアは増加します

javascriptjquerypagespeedgoogle-pagespeedpagespeed-insights
1
user8411456

あなたのサイトのためにこれを改善するためにあなたができることがいくつかあります：-

  1. JSにasync属性を追加します（または、deferが競合状態に陥ることなく非同期読み込みを許可するように設定されていないためにasyncがサイトを破壊する場合はsetTimeout）。これの目的は、ブロッキングJSを削除することです。
  2. 使用する <link rel="preconnect" href="itemURL" />すべてのDNS、TLS、およびTCPマジックをできるだけ早く実行することで、スクリプトソースのルックアップ時間を短縮するために、サードパートドメインで。
  3. スクリプトが特に重く、ページ操作に不可欠ではない場合は、メインスレッドが重要な作業を邪魔にならないように、数秒後に遅延読み込みを検討してください（スクリプトを挿入するか、短い_ [$ var]の後に初期化するだけです） _）。
  4. 他のすべてが失敗した場合-スクリプトを置き換えてください。一部のスクリプトはリソースを独占しているだけであり、軽量の代替案がある可能性があります（インスピレーションの源として http://microjs.com/ を試してください）
1
Graham Ritchie