How to preconnect or prefetch google analytics?
Do not know where in the liquid file this is?
Should it be preconnect, dns prefetch or.......?
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.