Use Async And Defer To Speed Up Your Website
What Does Async And Defer Mean?
Async is short for asynchronous where you don’t need to have all of the items in a list go one by one. Instead, you can have multiple files execute at the same time. This will allow the website to load faster as it doesn’t have to wait as long for all of the files to load one after the other.
Defer means to defer the loading of this file until later. This is useful for items that do not need to be loaded right away so the first draw of the page can occur. This works well with elements that are lower down the page and do not need to be loaded right away to get the first part of the page to show up.
Use Caution With Async And Defer
As with all of the optimization techniques, there are potential downfalls. If you async and defer the wrong items, such as your tracking code, your website tracking can become inaccurate. Async and Deferring can also cause parts of your website to break. Some files many need to load right away for the functionality of the page. For example, if you have a component on your website that needs the JS to calculate the user’s account balance or hours they spent on your services, if you load that too late, their numbers may not show up at all or the system will give an inaccurate number.
There are other ways to improve your website loading speed!
Check out our article on the other methods to improve the speed of your website.