Enable Prefetch DNS Requests on external Google services used by Site Kit

[glanglois]

Feature Description

Several WP Chacing Plugins offer the possibility to connect to external sites (such as Google Fonts, Analytics, ...) to reduce DNS Lookups and improve user experience by improving loading time.

For instance, see WP Rocket documentation on their implementation: https://docs.wp-rocket.me/article/1302-prefetch-dns-requests

I would be useful if SiteKit offer directly this option as part of the plugin settings, especially to embed in one unique plugin, everything related to Google services.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The frontend should include a dns-prefetch directive for //www.googletagmanager.com when the Analytics tag or Tag Manager tag is placed.
• The frontend should include a dns-prefetch directive for //pagead2.googlesyndication.com when the AdSense tag is placed.
• Note: The wp_resource_hints filter should be used.

Implementation Brief

• Using includes/Modules/AdSense/Web_Tag.php,
  • Use the wp_resource_hints filter to add //pagead2.googlesyndication.com to the list of urls if the relation type is dns-prefetch.
• Using includes/Modules/Tag_Manager/Web_Tag.php,
  • Use the wp_resource_hints filter to add //www.googletagmanager.com to the list of urls if the relation type is dns-prefetch.

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Connect and activate the Analytics module.
• Inspect the markup on the front end and the following line should be present: <link rel='dns-prefetch' href='//www.googletagmanager.com' />
• Deactivate the Analytics module, connect and activate the Tag Manager module.
• Inspect the markup on the front end and the following line should be present: <link rel='dns-prefetch' href='//www.googletagmanager.com' />
• Connect and activate the AdSense module.
• Inspect the markup on the front end and the following line should be present: <link rel='dns-prefetch' href='//pagead2.googlesyndication.com' />

Changelog entry

• Enable Prefetch DNS Requests on external Google services used by Site Kit

[felixarntz]

@glanglois Thanks for the suggestion (and sorry for the super long delay 🤦‍♂️ )!

We're going to look into adding DNS prefetch directives for the external services that Site Kit uses (e.g. Analytics, AdSense, Tag Manager snippets), to improve performance. Regarding any external Google services, that is rather out of scope for this plugin and IMO is more suitable in a performance plugin, for example since we are not actually loading Google fonts in the frontend in Site Kit.

As such, I'd like to focus this issue on adding DNS prefetch for the services actually used by Site Kit in the frontend.

[glanglois]

@felixarntz Thank you for your reply.

I was only thinking that Google Site Kit would perform a prefetch of connected Google services (analytics, tag manager, etc.). It's great to know that this could go in your roadmap.

For any other prefetch, I agree that it's out of scope and should be handled by performance plugins.

Have a great day!

[asvinb]

@aaemnnosttv @felixarntz I noticed that after setting up Tag Manager, we already have the dns-prefetch directive set for //www.googletagmanager.com I'am on WordPress 5.7.1 and using the Twenty Twenty-One theme. Any idea why this is the case?
I've added the IB which caters only for the AdSense tag.

[felixarntz]

@asvinb I think that is actually due to Analytics, not Tag Manager. WordPress automatically includes dns-prefetch directives for assets that are enqueued, and we enqueue https://www.googletagmanager.com/gtag/js... via Analytics.

So for Tag Manager, we still need to do something about it just for the scenario that the user has only Tag Manager enabled (in the Tag Manager Web_Tag, the asset is not enqueued, but just added via the script on the page. So this part needs to be added to the IB. (Make sure to only add the hostname if it is not already present, e.g. via Analytics.)

[asvinb]

Thanks @felixarntz . IB updated to cater for Tag Manager.

[felixarntz]

IB ✅

[wpdarren]

QA Update: Pass ✅

Verified:

• For Analytics: Inspected the markup on the front end and the following line is present: - Screenshot
• For Tag Manager: Inspected the markup on the front end and the following line is present: -
  Screenshot
• For Adsense: Inspected the markup on the front end and the following line is present: - Screenshot