how to preconnect or prefetch google analytics

LB_Boyce
Excursionist
21 0 18

How to preconnect or prefetch google analytics?

Do not know where in the liquid file this is?

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

Replies 8 (8)
drakedev
Shopify Partner
618 132 181

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 to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
LB_Boyce
Excursionist
21 0 18

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
Shopify Partner
618 132 181

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
LB_Boyce
Excursionist
21 0 18

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
Shopify Partner
618 132 181

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 to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
LB_Boyce
Excursionist
21 0 18

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
Tourist
10 0 2

@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
Shopify Partner
618 132 181

@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 to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.