<aside> 💡 This page contains the documentation for eliminating all Page Speed Insights/Web Vitals issues that are related to scripts used inside your Webflow site, like:

• Minimize main-thread work.
• Reduce the impact of third-party code.
• Reduce JavaScript execution time.
• Eliminate render-blocking resources.
• Reduce unused JavaScript. 📹 Video Tutorial: https://youtu.be/0K_r6AkqrDo

</aside>

Step 1: Lazy load Google Tag Manager

The first step is to add the following code inside Project Settings → Custom Code → Footer Code. The following script will make sure that your Google Tag Manager container only loads when user perform any of the following actions: start scrolling, click, touch the page with the finger, or move the mouse over the page.

<aside> 💡 The following code is already minified. Replace the GTM-XXXX with your actual Google Tag Manager container ID (found in the top left corner of your GTM dashboard)

</aside>

<!-- This code loads your GTM container only if user starts interacting with the page. Put yout GTM ID inside GTMCode="GTM-XXXX" -->
<script>var GTMCode="GTM-XXXX",GTMLoaded=!1;function loadGTM(){if(!GTMLoaded){GTMLoaded=!0;var e,a,t,o,d,r="script",s="dataLayer";e=window,a=document,t=GTMCode,e[s]=e[s]||[],e[s].push({"gtm.start":new Date().getTime(),event:"gtm.js"}),o=a.getElementsByTagName(r)[0],(d=a.createElement(r)).async=!0,d.src="<https://www.googletagmanager.com/gtm.js?id="+t+("dataLayer"!=s?"&l="+s:""),o.parentNode.insertBefore(d,o)}}$(window).one("scroll> touchstart mousemove",loadGTM);</script>

Step 2: Add the GTM Tags

With the code added to your Webflow project, head over to Google Tag Manager and create a tag for each of the scripts you’re using inside your Webflow site. Group them by their function and what they do. Tag Manager will act as a bucket for all your custom code.

<aside> 💡 Make sure you minify your scripts using this minifier tool.

</aside>

<aside> 💡 Google Tag Manager code compiler does not support ES6 syntax. Make sure that you do convert your ES6 code into ES5 format. You can use ChatGPT or ask your devs to make this change. The reason why GTM does not support ES6 is because not all browsers are compatible with this newer syntax.

</aside>

Here’s an example on how to structure your tags:

This is how our tags looks like inside GTM.

This is how we group scripts under one tag, keeping everything neatly organized.

Step 3: Publish

Lastly, just publish your Tag Manager & Webflow changes. Head over to your page in the browser, and re-run the Page Speed Insights or Lighthouse audit.

FAQs

Is this the only solution to fix the issues?

I’m using analytics tools through Tag Manager. Will these impact my metrics?

<aside> 💬 Found a bug or simply have a question? Send us a message at [email protected]

</aside>