Re: how to preconnect or prefetch google analytics

LB_B · ‎10-08-2020

How to preconnect or prefetch google analytics?

Do not know where in the liquid file this is?

Should it be preconnect, dns prefetch or.......?

drakedev · ‎10-09-2020

preconnect / dns-prefetch

Can be added inside HEAD tags in theme.liquid file

<head> 

</head>

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/">

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

LB_B · ‎10-09-2020

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.

drakedev · ‎10-09-2020

It's not a misconception, it reduces the DNS look up time, initial connection and SSL hand-shaking.

Without preconnection

With preconnection

You can clearly see a difference.

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

LB_B · ‎10-09-2020

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.

drakedev · ‎10-09-2020

You can fix the warning in this way

<link rel="preconnect" href="https://www.google-analytics.com/" crossorigin>

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

LB_B · ‎10-12-2020

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.

tobychen · ‎04-01-2021

@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?

drakedev · ‎04-01-2021

@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.

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

Re: how to preconnect or prefetch google analytics

how to preconnect or prefetch google analytics

Community Blog Articles