PageSpeed Insights tells me to preconnect third-party origins and then tells me they are not used by the browser after preconnecting
Asked Answered
I

0

0

I ran PageSpeed Insights and it told me this

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

I'm using Gatsby so I connected them using the plugin 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"
   ]
 }
}

Then I run PageSpeed Insights again and it tells me

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.

I received a much worse performance score with them preconnected

Induna answered 14/7, 2020 at 7:9 Comment(3)
You may need to check there isn't a conflict. github.com/gatsbyjs/gatsby/issues/16984 <- this discussion points towards a conflict for an almost identical plugin that makes me think you are preconnecting twice. As always looking at outputted HTML and load order is a far easier way of tracking down issues like this. i would suggest taking a couple of hours to learn how to use profiling and dev tools as this will be a tough one for us to remotely diagnose for you. If you have a link to the site i can have a look for you.Nicolina
@GrahamRitchie So that issue is unresolved but I did get It has something to do with how the gatsby-plugin-offline preloads these assets. I have gatsby-plugin-offline but I don't know if I'm using it or not. I read that'd it'd be good to install so I did. Could I remove it possibly?Induna
Depends if you are using it, sadly I don't use Gatsby so I am just reading documents and searching for issues that are related combined with general knowledge to help. I would guess the offline plugin uses Progressive Web Apps to store a copy of the page for offline viewing. If that is the case then that may be handling resources via a Service Worker and that needs to be handled in a certain way. In developer tools go to the "application" tab and see if your page has any service workers registered. If it doesn't you are (probably) safe to remove the offline plugin. Take a backup before though!Nicolina

© 2022 - 2024 — McMap. All rights reserved.