how to preconnect or prefetch google analytics

LB_Boyce
Excursionist
19 0 11

How to preconnect or prefetch google analytics?

Do not know where in the liquid file this is?

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

0 Likes

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 the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
LB_Boyce
Excursionist
19 0 11

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.

0 Likes

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

Without preconnection

2020-10-10 02_06_43-.png

With preconnection

2020-10-10 02_07_29-.png

You can clearly see a difference.

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
LB_Boyce
Excursionist
19 0 11

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.

0 Likes

You can fix the warning in this way

<link rel="preconnect" href="https://www.google-analytics.com/" crossorigin>
• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
LB_Boyce
Excursionist
19 0 11

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.

0 Likes