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

[coliff]

I checked that...

• ... the documentation does not mention anything about my problem
• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... there are no open or closed issues that are related to my problem

Description

The theme currently has <link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"> in the head. The Google Analytics integration follows immediately afterwards so there is no need to preconnect so I think this can be removed. Furthermore, I think Safari does not accept more than one value for link rel so neither would be used.
REF: https://web.dev/preconnect-and-dns-prefetch/#resolve-domain-name-early-with-reldns-prefetch

[squidfunk]

git blame shows that @Stanzilla added it. Any thoughts? I don't care what it is, but we should settle on something we all can agree on, so we won't be removing and adding it again.

[Stanzilla]

I would be fine with the format change but not the removal.

[coliff]

I can open a PR then to remove preconnect leaving <link rel="dns-prefetch" href="https://www.google-analytics.com">

[squidfunk]

I would be fine with the format change but not the removal.

Could you elaborate? I'd be interested in the why. I'm with @coliff's objection on the location – it's basically directly in front of the actual script, so it should make no difference. Did you add this as a recommendation from Lighthouse?

[Stanzilla]

@squidfunk yes but it should make a difference since the script is loaded with the async keyword. I'm pretty sure I compared the numbers before but I don't have them anymore.

[coliff]

fair enough - I'm fine to leave <link rel="dns-prefetch" href="https://www.google-analytics.com"> there then. dns-prefetch consumes less resources than preconnect and may still save a few microseconds. :-)

[Stanzilla]

well preconnect does what dns-prefetch does + more, I only left in dns-prefetch as a fallback

[coliff]

I know but Google Analytics isn't a high-priority resource - it's not critical to load and display the page, by adding preconnect it can take browser resources away from loading other assets such as Google Fonts or the GitHub API (which the user does see).

https://www.webpagetest.org/result/200605_14_88ca7dd3a427cb2c9e919f74affcd297/3/details/#waterfall_view_step1

The difference either way is very small, so I don't really mind... but overall I'd suggest to not use preconnect for a non-critical resource like Google Analytics.

[squidfunk]

I missed that it's async, that's correct. However, I have to say again that I really don't want to blindly follow the Lighthouse cargo cult. I'm all for making the TTFCP, TTFMP and TTI as small as possible, but I'd say that actual measuring will lead to better decisions than following generic advice and making Lighthouse happy. In my life as a programmer, I've fallen all too often into the trap believing A is faster/better than B without having measured, and it either fired back or I was really stunned that it's not the way I expected. I'd say it's probably better too provide fewer hints to the browser than to provide too many competing hints. For this reason, my opinion is that we should remove it entirely (as suggested in the OP), unless somebody comes up with data showing that it has a measurable, significant and (most importantly) positive effect.

[squidfunk]

Google Analytics is a non-critical and optional resource. It's loaded asynchronously, and DNS prefetching will save as little as 25-50ms (as I get from the waterfall graphs @coliff posted). Keeping the prefetching hint is a micro-optimization, which seems to have no measurable effect, but may steal resources from the browser for loading other asynchronous requests like Google Fonts or GitHub stars. For this reason, I consider it the safest to remove the link tag altogether.

We can re-consider integration when the following conditions are met:

1. Including the tag does not slow down average render time by stealing resources.
2. The hint has a positive impact, which for Google Analytics means a smaller rate of dropped events due to a long-running DNS request.

If you want to keep the tag, it's very easy to achieve the same with theme extension, by either extending the extrahead or analytics blocks:

{% block analytics %}
  <link rel="preconnect dns-prefetch" href="https://www.google-analytics.com">
  {{ block.super() }}
{% endblock %}

[squidfunk]

Fixed in 1df750a.

[squidfunk]

Released as part of 5.2.3