reactjs - PageSpeed Insights は、サードパーティのオリジンを事前に接続するように指示し、事前接続後にブラウザーで使用されていないことを伝えます

Question

PageSpeed Insights を実行したところ、次のように表示されました

Preconnect to required origins
Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. Learn more.
URL
Potential Savings
https://fls-na.amazon-adsystem.com
https://ir-ca.amazon-adsystem.com
https://fonts.googleapis.com
https://images-na.ssl-images-amazon.com
https://ws-na.assoc-amazon.com

私は Gatsby を使用しているので、プラグイン gatsby-plugin-preconnect を使用してそれらを接続しました

{
  resolve: 'gatsby-plugin-preconnect',
  options: {
    domains: [
      "https://ir-ca.amazon-adsystem.com",
      "https://fls-na.amazon-adsystem.com",
      "https://images-na.ssl-images-amazon.com",
      "https://fonts.googleapis.com",
      "https://ws-na.assoc-amazon.com"
   ]
 }
}

次に、PageSpeed Insights を再度実行すると、次のように表示されます

Preconnect to required origins
Warnings:
A preconnect <link> was found for "https://fonts.googleapis.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://ws-na.assoc-amazon.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://images-na.ssl-images-amazon.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://fls-na.amazon-adsystem.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://ir-ca.amazon-adsystem.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

---

それらが事前に接続されていると、パフォーマンススコアが大幅に低下しました