Preload Key Requests

Key requests are the requests that provide an important or essential functionality within your page. This could be specific JavaScript, style sheets, or web fonts. When these key resources are called later in the page load process, it can create significant delays, especially if there are additional resources grouped underneath the main request. If there are vital resources that need to be downloaded earlier, then preloading them can help page performance by ensuring certain files are requested at the same time, and not after the main file, or resource, has been downloaded, parsed, and executed. Additionally, if those second-level or third-level resources are large in file size, it could really impact performance and cause significant delays.

Key requests can be implemented by using the ‘’ attribute. One important note about preloaded resources is that they can be cached, so they do not have to be downloaded on subsequent visits. Furthermore, adding the ‘as’ attribute will help determine to the browser how these requests can be prioritized and whether or not the resources are already cached. And as we mentioned in a previous section, this all helps to offload main-thread work to the browser so that the page can load faster for users, and they can begin interacting with it sooner.