HTML Link Preload not working as expected

Question

I have added below link preload for Adsense:

<link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin="anonymous">
  <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
  <link rel="preload" as="script" href="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6815942738114816" crossorigin="anonymous">

And below preload tags for Google Analytics 4 /Google Tag Manager

  <!--Google Tag Manager / Google Analytics-->
  <link rel="preconnect" href="https://www.googletagmanager.com">
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <link rel="preconnect" href="https://analytics.google.com">
  <link rel="dns-prefetch" href="https://analytics.google.com">
  <link rel="preload" as="script" href="https://www.googletagmanager.com/gtag/js?id=G-PMCHMHK7J9">

For Adsense I have below script tag in my markup:

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=MY_CLIENT_ID" crossorigin="anonymous"></script>

And for Google Analytics 4 I have below tags in my markup:

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-PMCHMHK7J9"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-PMCHMHK7J9');
  </script>

But this setup doesn't seems to work and when running in browser both Adsense and Google Analytics scripts are not preloaded.

The Adsense Script has below response headers:

access-control-allow-origin: *
cache-control: private, max-age=3600
content-type: text/javascript; charset=UTF-8
cross-origin-resource-policy: cross-origin
expires: Tue, 07 Jun 2022 12:32:56 GMT
timing-allow-origin: *
vary: Accept-Encoding
vary: Origin
x-content-type-options: nosniff
x-xss-protection: 0

And Google tag Manager has below Response Headers:

access-control-allow-credentials: true
access-control-allow-headers: Cache-Control
access-control-allow-origin: *
cache-control: private, max-age=900
content-encoding: br
content-length: 70509
content-type: application/javascript; charset=UTF-8
cross-origin-resource-policy: cross-origin
date: Tue, 07 Jun 2022 12:32:56 GMT
expires: Tue, 07 Jun 2022 12:32:56 GMT
server: Google Tag Manager
strict-transport-security: max-age=31536000; includeSubDomains
vary: Accept-Encoding
x-xss-protection: 0

Can anyone please guide if I am missing anything.

Thanks

Answer 1

You are loading the script https://www.googletagmanager.com/gtag/js?id=G-PMCHMHK7J9 together with the HTML. By doing so, you are not helping the browser to perform a preload. The Google Analytics script is loaded without obvious priority. Even if you try to use a 103 early hit with a CDN, it will not give you a significant result. Preconnect works well for scripts that are called inside other scripts. For example, in Google Adsense, when loading the main script, the browser loads additional scripts (analytics, local ad script) and preconnecting these scripts would give you some profit on slow inte.net.