preconnect / dns-prefetch
Can be added inside HEAD tags in theme.liquid file
preconnect was introduced after dns-prefetch, but as today is widely supported by browser.
Therefore I suggest you to use preconnect because not only starts the DNS lookup, but initiate also the TCP/TLS handshake.
In order to add preconnect for Google Analytics you can insert this code
<link rel="preconnect" href="https://www.google-analytics.com/">
Thank you for your reply. I tried adding it however I guess I was under the misconception that it would reduce dns look up time.
As it did not make an improvement I removed the preconnect code.
It's not a misconception, it reduces the DNS look up time, initial connection and SSL hand-shaking.
You can clearly see a difference.
I added it again to header however I receive this warnings: A preconnect <link> was found for "https://www.google-analytics.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly. After receiving this message I removed it.
You can fix the warning in this way
<link rel="preconnect" href="https://www.google-analytics.com/" crossorigin>
Added code however still getting error:
Warnings: A preconnect <link> was found for "https://www.google-analytics.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
@drakedev I have a question. Where did you such reports like in screenshots? Is it from Google Chrome or did you use any 3rd party apps?
@tobychen you can find it in Chrome Inspector
Network Tab, then select a file resource name and in the Timing tab you can find the details.
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023