Webspeed Optimisation - Eliminate The Render Blocking Effect Of Analytics JavaScript

July, 2023
Webspeed Optimisation - Eliminate The Render Blocking Effect Of Analytics JavaScript

Reconfigure Google Analytics with the defer attribute to eliminate render blocking, boost page speed and improve user experience.

Reference: Eliminate The Render Blocking Effect Of Analytics JavaScript

Particularly if you don't need Google Tag Manager or just want to load the analytics resources directly, Google Analytics can be set up to load in the background without interrupting initial rendering of the page.

google lighthouse optimisation

Two Parts, Two Steps

These examples use the conventional asynchronous Google Analytics code snippet, but the same concepts apply to the Global Site Tag version which has the same two-part structure and can use this same technique.

The Google Analytics tracking code includes an inline JavaScript snippet and an external file reference with the async attribute. These lines are placed in the section of each page, typically as part of a template:

<!-- other <head> stuff -->

<script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
</script>

<script async src="https://www.google-analytics.com/analytics.js"></script>

</head>

Although the potential impact of loading Google Analytics this way is relatively small compared to bigger page speed issues like lazy loading images, analytics resources still interrupt rendering of the page. When it comes to page speed every little bit helps, so reducing their priority is an easy win.

Moving The Inline Snippet

To defer analytics, the first step is to move the inline JavaScript snippet to a defer'd external JavaScript file:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

// other defer'd JavaScript...

Create a new file if necessary and of course minify the result and serve the file with compression as well as a long cache expiration period.

Deferring Analytics.js

The next step is even easier. Replace the async attribute on the external file reference with defer:

<script defer src="https://www.google-analytics.com/analytics.js"></script>

What Is The Defer Attribute?

Along with moving the inline snippet to an external file, this simple technique to eliminate the render blocking impact of Google Analytics makes great use of the defer attribute.

Similar to asyncdefer is an optional attribute for the <script> tag that instructs the browser to load the specified file in the background and then execute that JavaScript later in the loading process. Placed in the <head> section, defer'd files can begin loading as early as possible but without interrupting initial rendering of the page.

All Together

And that's it. The result still has two parts, but both the external file reference and the snippet will now load in the background at a low priority and then execute later in the loading process after the page has otherwise rendered, just before the DOMContentLoaded event.

<!-- other <head> stuff -->

<script defer src="scripts.js"></script> <!-- contains formerly-inline snippet -->
<script defer src="https://www.google-analytics.com/analytics.js"></script>

</head>

As a bonus, the inline snippet is now also cache-able and removing the inline JavaScript also cleans up the HTML a bit.

Deferring More?

Google Analytics is just one of many JavaScript files that can be deferred for page speed.

Sustainable Digital Agency Service

At Thelematics.com, we understand the importance of a fast-loading website for businesses. Slow-loading websites can lead to higher bounce rates and lower conversion rates. That's why we offer website optimization services to help businesses improve their loading speed and enhance user experience.

Our team of experts will analyze your website and identify any performance bottlenecks. We'll then implement various optimization techniques such as image compression, minification of CSS and JavaScript files, and caching strategies. These measures will help reduce the size of your web pages, resulting in faster load times. We'll also ensure that your website is fully optimized for mobile devices, further enhancing its speed and accessibility.

In addition to website optimization, Thelematics.com provides sustainable digital agency services. We believe in building long-term partnerships with our clients, and that includes adopting sustainable practices. Our team focuses on eco-friendly solutions, including energy-efficient hosting, green web design, and carbon offset initiatives. By choosing us as your digital agency, you can be confident that your online presence is aligned with your commitment to sustainability.

Furthermore, our expertise extends to managing clients' advertising campaigns. We understand the importance of targeted advertising to reach your audience effectively. Our team will work closely with you to develop a comprehensive advertising strategy that aligns with your business goals. We'll handle all aspects of campaign management, including ad creation, keyword research, budget allocation, and performance tracking. By entrusting your advertising campaigns to us, you can focus on other critical aspects of your business while we drive traffic and conversions.

With Thelematics.com, you can optimize your website's loading speed, benefit from sustainable digital agency services, and effectively manage your advertising campaigns. Contact us today to learn more about how we can help your business thrive in the digital landscape.

Related Stories

The ByBit Crypto Scamdemic: A Theoretical Exploration of Hidden Agendas in the Crypto World

The recent ByBit hack, described as one of the largest cryptocurrency thefts in history, has sparked widespread discussion about the... Read more >

The Importance of Identifiable Information and the Fight Against Scams and Identity Theft

In an increasingly digital world, identifiable information has become both a valuable asset and a significant vulnerability. The recent surge... Read more >

Secure Success in 2025: Navigating Cybersecurity Challenges and Opportunities

As we step into full-scale 2025, the cybersecurity landscape is evolving rapidly, bringing both challenges and opportunities for businesses, resellers,... Read more >

Domain Ownership, Management, and Delegation Rights: Lessons from a .ID.AU Renewal Issue

Domain names are more than just web addresses—they are critical assets that represent personal identities, businesses, and organizations. For individuals,... Read more >

Wir Uns Tot All: The Death of Ethics and Human Narrative in Cybersecurity

The naming of VirusTotal, when dissected or reinterpreted, can take on a deeper, almost ominous meaning that reflects the concerns... Read more >

Do you read what you like
?

We are your one-stop-shop for your digital products and we think far beyond classic websites and we are dedicated in how we can make you more successful through online services. We create digital experiences that sustainably bind your customers to your company. We deliver sustainable online strategies, visionary web solutions, and brand-building designs. We reliably connect your brand to your target audience. We are Thelematics
Enquire for a Copywrite project
Connect your online journey *
* Connect your journey will start initiating your ecommerce onboarding. Domain name and ecommerce business (from $6,840)
Copyright 2025, Thelematics Inc. All rights reserved. Powered by ⚡ CONNECT, 2u2 Web Technologies
heartusercartmagnifiercrossmenuchevron-uparrow-right
Chat with us