An HTML attribute (defer) that delays execution of JavaScript until after the page loads, improving SEO performance.
Why defer Matters for SEO
Page speed has become a critical ranking signal for Google. The defer attribute is a simple yet incredibly effective way to improve your website’s performance and Core Web Vitals, particularly your Largest Contentful Paint (LCP) score. A script that is not deferred can block the rendering of your page, causing a delay for the user. By using the defer attribute, you ensure that your website’s content, especially the most important elements, loads as quickly as possible, which is a key part of providing a great user experience and a positive signal to search engines. It’s a key part of your technical SEO.
Across Different CMS Platforms
The way you add the defer attribute to your JavaScript files depends on your CMS.
WordPress
For WordPress, you can add the defer attribute to your script tags using a plugin or by adding a filter to your theme’s functions.php file. This is a common and effective way to speed up a WordPress site, as many themes and plugins load a lot of JavaScript.
Shopify
Shopify’s themes are generally well-optimized, but you can add the defer attribute to your theme’s liquid files to improve performance. This is particularly useful for third-party apps that may load a lot of JavaScript and slow down your site.
Wix
Wix has a closed system, so you cannot manually add the defer attribute to your script tags. The platform is designed to handle its own JavaScript rendering and optimization, so you typically don’t have to worry about this.
Webflow
Webflow gives you a high degree of control over your website’s code. You can manually add the defer attribute to any JavaScript file you embed in your site. This is a simple but powerful way to improve your website’s performance.
Custom CMS
With a custom CMS, you have complete control over your website’s code. You can build a system that automatically adds the defer attribute to all your external script tags, ensuring your site is as fast as possible.
Across Different Industries
The use of the defer attribute is universal, but its importance can vary by industry.
E-commerce
For e-commerce, every millisecond counts. A slow-loading product page can lead to a high bounce rate and a loss of sales. Using the defer attribute is crucial for ensuring your product pages load as quickly as possible.
Local Businesses
Local businesses need their key pages, like their homepage and contact page, to load as quickly as possible. Using the defer attribute can help ensure that a user can see their contact information and hours of operation without any delay.
SaaS Companies
SaaS companies often use JavaScript for their marketing pages and dashboards. Using the defer attribute can help ensure their pages load quickly, providing a better user experience and a higher conversion rate.
Blogs
Blogs often load a lot of JavaScript for features like a social share button or a comment section. Using the defer attribute can help ensure that the article’s content, which is the most important part, loads as quickly as possible.
Do’s and Don’ts of defer
Do’s
- Do use the defer attribute for non-critical scripts. Scripts that are not needed to display your page’s content should be deferred.
- Do use a CDN for your scripts. A CDN can help deliver your scripts from a server closest to the user, which can reduce the download time.
- Do use a tool like Google PageSpeed Insights. This tool can show you which of your scripts are blocking the rendering of your page.
Don’ts
- Don’t use defer for a script that is critical for your page’s rendering. If a script is needed to display the content of your page, it should not be deferred.
- Don’t use async and defer at the same time. Both attributes serve a similar purpose, and using them together can lead to unpredictable results.
- Don’t ignore the basics. The defer attribute is a great tool, but it is not a substitute for having clean, optimized code.
Common Mistakes to Avoid
- Using defer for a critical script: A script that is needed to display your page’s content should not be deferred.
- Forgetting the basics of optimization: The defer attribute is a great tool, but it is not a substitute for having a clean, well-structured website.
- Failing to test your site’s performance: You must test your site’s performance before and after using the defer attribute to ensure it is having a positive effect.
FAQs
How is defer different from async?
The async and defer attributes are both used to load JavaScript asynchronously. The difference is that async executes the script as soon as it is downloaded, while defer executes the script after the page has been fully parsed.
Does the defer attribute help with my website’s Core Web Vitals?
Yes. By preventing a script from blocking the rendering of your page, the defer attribute can significantly improve your website’s performance and Core Web Vitals, particularly your Largest Contentful Paint (LCP) score.
Is defer a direct SEO ranking factor?
No, the defer attribute is not a direct SEO ranking factor. However, it can significantly improve your page speed, which is a major ranking factor.
Can I use the defer attribute for an internal script?
Yes, you can use the defer attribute for an internal script. However, it is a best practice to use it for external scripts that are not critical to your page’s rendering.
What is an example of when to use defer?
A great example is for a comment section script. This script is not needed to render your page, so it can be deferred without any negative effect on your website’s performance.
