When you develop a website, you want it to load fast and deliver a great user experience. But how do you decide which resources are critical and which ones can be deferred or loaded later? In this article, you'll learn how to prioritize and defer loading of critical and non-critical resources using some web development techniques and tools.
Critical resources are the ones that are essential for rendering the above-the-fold content of your website, or the part that is visible without scrolling. These include HTML, CSS, fonts, images, and JavaScript that directly affect the layout and functionality of the page. Non-critical resources are the ones that are not necessary for rendering the above-the-fold content, or the ones that can be loaded after the page is interactive. These include analytics scripts, social media widgets, ads, videos, and other third-party or dynamic content.
This is a huge question that people have answered many ways. Some frameworks like Next.js, have moved to Server Side Rendered content, where to speed everything up, you do it up in the cloud and then send it to the user. Other frameworks like Gatsby does it the other way around, where they load static things quickly and then fetch data. Remix has a whole different approach in that they try to ship code to the client that doesn’t include JavaScript, and each component on the page (rather than the whole page at once) is able to request resources and re-render and even crash independently of the page as a whole.
Prioritizing and deferring loading of resources can improve the performance and user experience of your website by reducing the amount of data that needs to be downloaded, parsed, and executed by the browser. This can also lower the bandwidth and server costs, and increase the SEO ranking of your website. By loading only the critical resources first, you can ensure that your website is usable and engaging as soon as possible, while loading the non-critical resources later, when the browser is idle or when the user requests them.
Prioritizing and deferring loading of resources is important for improving website performance, user experience, and accessibility. By Optimizing the loading of critical resources, web developers can ensure that their websites are accessible and usable across a wide range of devices, network conditions, and accessibility needs. This can benefit users with different devices and connection speeds, as well as those with accessibility needs, while also improving page load times and reducing server costs.
One way to identify critical and non-critical resources is to use a tool like Google PageSpeed Insights or Chrome DevTools. These tools can analyze your website and provide suggestions on how to optimize the loading of resources. They can also show you how your website looks and behaves on different devices and network conditions, and how much time it takes to load the critical rendering path, or the sequence of steps that the browser needs to follow to render the above-the-fold content.
One technique to prioritize loading of critical resources is to inline them in the HTML document, or embed them directly in the <head> or <body> tags. This can eliminate the need for additional HTTP requests and reduce the latency. However, this technique should be used sparingly, as it can increase the size of the HTML document and make it harder to maintain and cache. Another technique is to use the <link rel="preload"> tag, which tells the browser to fetch a resource with a high priority, without blocking the rendering of the page. This can be useful for resources that are required later in the critical rendering path, such as fonts, images, or JavaScript modules.
One technique to defer loading of non-critical resources is to use the <link rel="prefetch"> or <link rel="dns-prefetch"> tags, which tell the browser to fetch a resource with a low priority, in anticipation of a future navigation or request. This can improve the perceived performance of your website by reducing the waiting time for non-critical resources. Another technique is to use the <script defer> or <script async> attributes, which tell the browser to execute a JavaScript file after the HTML document is parsed, or as soon as it is available, without blocking the rendering of the page. This can be useful for scripts that are not essential for the above-the-fold content, such as analytics, ads, or widgets.
You can also defer loading non-critical resources by delaying content that isn’t needed right away when the page first loads. Another way is to minify and compress your HTML to speed up page load times.
As far as I can tell, prefetch tries to cache resources so they will load faster in a future load of the page... it is not about giving the resource low priority.
One way to test and monitor the loading of resources is to use a tool like WebPageTest or Lighthouse. These tools can measure and report the performance metrics of your website, such as the First Contentful Paint, or the time when the first text or image is painted on the screen, or the Time to Interactive, or the time when the page is fully responsive to user input. They can also provide recommendations on how to improve the loading of resources, such as compressing, minifying, or caching them. Another way is to use the Performance API or the Resource Timing API, which are JavaScript interfaces that can collect and analyze the timing information of each resource that is loaded by the browser.
You can keep an eye on these metrics and other Core Web Vitals using Google Search Console’s ‘Core Web Vitals’ report. It shows how your URLs are doing based on their status and metric type.