Reconfigure Google Analytics with the
defer attribute to eliminate render blocking, boost page speed and improve user experience.
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 and then execute after the page has otherwise rendered.
Prefer video? Watch on YouTube
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.)
async attribute. These lines are placed in the
<head> section of each page, typically as part of a template:
Although the potential impact of loading Google Analytics this way is relatively small compared to bigger render blocking issues like overall loading structure and low-priority CSS and page weight issues like image optimization and 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.
Move The Inline Snippet
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.
The next step is even easier. Replace the
async attribute on the external file reference with
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
Asynchronous Google Fonts
Eliminate the render blocking effect of Google Fonts as well! If you're also using Google Fonts, loading the font CSS
<link> asynchronously is another simple way to improve page speed: