Score better in Google with asynchronous script loading
Every second counts on the internet. If a website loads slowly, people will click away. That's a shame, especially if you've invested a lot of time in your content. One of the things that can slow down your website are JavaScript files. Fortunately, there's a smart way to solve this: asynchronous loading.
What are scripts and why do they slow down your website?
A script is a piece of code that makes your website interactive. Think of menus that expand, sliders that move automatically or buttons that you can click. These scripts are usually written in JavaScript.
But there's a problem: by default, scripts are loaded at the top of the page, before the rest of your site is visible. This means that visitors often have to wait until all scripts have been downloaded before they can see or do anything on your page.
The difference between normal, asynchronous and deferred loading
When adding a script to your HTML, you can do this in different ways. We explain them below:
1. Standard loading (blocking)
<script src="script.js"></script>This is the standard way. The browser stops loading the HTML, first fetches the script and executes it. Only then does it continue with the rest of the page. This can cause delays.
2. Asynchronous loading (async)
<script src="script.js" async></script>With asynchronous loading, the browser retrieves the script without stopping the HTML load. Once the script is in, it executes it immediately. This is useful for scripts that do not depend on other components.
3. Deferred loading (defer)
<script src="script.js" defer></script>
With defer, the browser loads the script in the background, but only executes it when the entire HTML is ready. This is ideal for scripts that are only needed once the entire page is ready.
What is the benefit for your SEO?
Google not only looks at the content of your site, but also at its speed. If your page loads quickly, users like that. And Google rewards that with a higher position in the search results. Asynchronous loading helps in the following ways:
- faster visible content: Visitors see what is on your site faster, even when scripts are still loading.
- lower loading times: This improves your Core Web Vitals, such as LCP (Largest Contentful Paint).
- better mobile performance: Speed is even more important on mobile, because mobile networks are often slower.
In short: by loading your scripts smarter, you improve the experience for your visitors and you signal to Google that your site is well put together.
When to use async and when to use defer?
This is a frequently asked question. Here’s a handy overview:
- Use
async: for scripts that are independent, like Google Analytics or a social media tracker. - Use
defer: for scripts that your site needs, but only after the HTML has loaded, like menus or sliders.
When in doubt, use defer. It’s safer because you know your HTML will load first.
Example: How to add scripts to your HTML page
Let’s say you have a script that shows a message when someone clicks a button. You can then add this script in different ways:
Example script (file: script.js)
document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("klikMij");
button.addEventListener("click", function () {
alert("Thanks for clicking!");
});
});
HTML page with async (for quick, individual scripts)
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Async example</title>
</head>
<body>
<button id="clickMe">Click here</button>
<script src="script.js" async></script>
</body>
</html>
HTML page with defer (for scripts that interact with the HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Defer example</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="klikMij">Klik hier</button>
</body>
</html>
Please note: if you use async, you need to make sure that your script does not depend on anything that is not loaded yet. Otherwise it will not work properly.
Common mistakes with asynchronous loading
- load scripts that need each other async anyway: This can cause errors if one script is already running before the other is loaded.
- make important scripts async: For example, scripts that control your menu or contact form. If these load too late, your site won’t work properly.
- place scripts at the end of the page without async or defer: This can help with speed, but is less clear and organized than async/defer.
Extra tip: combine async/defer with caching and compression
Asynchronous loading is powerful, but it works even better when you combine it with:
- compress files: Use Gzip or Brotli to make your scripts smaller.
- set up browser caching: This way, users don’t have to re-download scripts every time.
- use a CDN: This will deliver your scripts faster, regardless of where your visitors come from.
How to measure it result?
After optimizing your scripts, you can measure whether your site has really become faster. For example, use:
Pay particular attention to the time to first view (First Contentful Paint) and interactivity (Time to Interactive).
Conclusion
Asynchronous or deferred loading of scripts is a simple but powerful way to make your website faster. And a fast website scores better in Google, ensures satisfied visitors and gives you an advantage over your competitors.
By making smart use of async and defer, your site will load more smoothly and you will prevent slow scripts from ruining your SEO. Start with small adjustments and measure your results. Before you know it, your website will rank higher in the search results and visitors will stay longer.
A fast website is not only nice for the visitor, but also a smart move for your online success.
Do you want to make your website faster and rank higher in Google? Then a CDN is a smart choice. In this article, we explain step by step what a CDN is, why it is important for SEO, and how you can use a CDN – both with an external partner and via your own subdomain...
Sitemap explanation and free PHP script
A sitemap is essentially a map of your website in one file. Just like a city map helps you find streets and landmarks, a sitemap helps search engines discover and understand all the pages on your site...
Score better in Google with asynchronous script loading
Every second counts on the internet. If a website loads slowly, people will click away...
What are Core Web Vitals and why are they important for your SEO
If you have a website, you want people to be able to find it quickly via Google. That's where SEO (search engine optimization) comes in...
Boost your SEO with the right server choice and opt for the perfect hosting
The hosting you choose directly affects the speed, uptime and security of your website. These technical factors are important ranking signals for search engines like Google...
Why optimized HTML makes your website fly
A fast, clean, and well-functioning website starts with the basics: HTML. It’s the backbone of your website...
The 10 biggest mistakes that are making your website slow
In the world of websites, speed is everything. A slow website drives away visitors, lowers conversions and is penalized by search engines like Google...
The best tools to measure your website speed
In today’s fast-paced online world, every millisecond counts. Visitors drop off if a website loads slowly, and search engines reward faster sites with better rankings...
Most websites can easily be taken to a higher level by first getting the most basic SEO in order. My free SEO Checker checks for you whether your website meets these basic requirements, or whether there is still room for improvement.
Use my free SEO Checker now
Enter the URL of your website and see where you can improve your website. Please note: A 100% score only means that you have the basic SEO for the page in question in order. For more tips, I would like to invite you to read all my articles.
