Fast-loading WordPress sites deliver serious benefits when it comes to enhancing the user experience for visitors, improving your website visibility on search engines, and increasing your site’s organic traffic.
|Type of Code||Usage|
|HTML||Used for content and the structure of the page|
|CSS||Used for fonts, colours, spacing and other styling|
I encourage you to read the whole article to get a full understanding of the subject, but if you’re a beginner, the one thing that you should take away from this article is that Defer and Async can significantly improve your website’s page loading times.
Parsing is the process in which the browser analyses and converts the page’s code to a format it can execute. Any code that stops this process is called “Render-Blocking” as it is delaying the process of rendering the page for visitors.
One of the most important metrics that website benchmarking services such as Google PageSpeed Insights and GTmetrix consider is First Contentful Paint, which is the time it takes for the first content to be displayed to visitors. Google states that an FCP time of 0 to 1.8 seconds to be good and 1.8 to 3 seconds to be moderate. Anything above 3 seconds is considered slow.
When you add the defer or async attribute to the HTML script element, you are advising the browser to download the file at the same time the page is parsed. With defer, the file is executed once the page has been fully parsed.
In contrast, the async attribute is an asynchronous operation that executes the file as soon as it has been downloaded. As such, the total time to parse a page with async will be slightly higher as the browser will briefly stop parsing HTML to execute the file.
If you were to specify both defer and async, browsers will use async.
|Download the file the same time the page is parsed||Download the file the same time the page is parsed|
|Execute the file once the page has finished parsing||Execute the file as soon as it is available|
|Files are executed in sequential order||Pauses HTML parsing to execute files|
An important standard to understand is the Document Object Model, which is frequently referred to as the DOM. The DOM represents a whole document, such as an XML file or HTML page, as a single object. Important elements such as the head, body and headers, can be considered as branches of the DOM.
The goal of defer and async is to reduce blocking of page rendering and you will see a major improvement in page loading times whichever method you use.
I recommend reading Zell Liew’s article “How and when to use Async and Defer attributes” for a more comprehensive explanation of when to use defer and async.
Be mindful of the fact that the wrong configuration setting will cause problems with your website design. For example, contact forms may not display correctly unless you choose the right configuration settings or exclude the contact form’s files from optimization.
Trial and error is, therefore, necessary to find the right configuration settings and the best performance for your website.
- Website Backups – Backup your website before you activate an optimisation WordPress plugin
- Test Performance – Test the performance of key pages on your website and each time you change an optimisation configuration setting
- Review Your Website – Check that no part of your website is broken after changing your configuration
Perfmatters can be used to disable core WordPress features to improve security and performance. It also lets you define a custom login URL, preload content, lazy load images, integrate Google Analytics, optimize Google Fonts, and more.