Preloading allows you to specify resources (such as fonts, images, JavaScript, and CSS) that are needed immediately or soon during page load. Add a link rel=’preload’ tag at the top of the <head>…</head> section of every page of your site.

When a web page is opened, the browser requests the HTML document from the server, parses its content, and submits a separate request for the referenced resource. As a developer, you know all the resources your page needs and which ones are most important. You can use this knowledge to request critical resources ahead of time, speeding up the loading process. This article describes how to use <link> for this purpose.

How to improve website loading speed by preloading key resources?

How Preloading Works

Preloading is best for resources that the browser typically discovers late.

In this example, the Pacifico font is defined in the stylesheet via the @font-face rule. The browser does not load the font file until it has finished downloading and parsing the stylesheet.

By preloading a resource, you want the browser to fetch it earlier than it normally would, because you think it’s important to the current page.

In this case, the Pacifico font is preloaded, so the download happens in parallel with the stylesheet.

The key request chain represents the order in which the browser prioritizes processing and fetching resources. Lighthouse will identify assets located on the third layer of the chain as later discovered assets. You can use preload critical request auditing to determine which resources to preload.

Preload CSS files

If you used the critical CSS method, the CSS would be split into two parts. Critical CSS required to render above-the-fold content is inlined in the <head> of the document, non-critical CSS is usually lazy loaded using JavaScript. Waiting for JavaScript to execute before loading non-critical CSS can cause rendering delays as the user scrolls, so it’s better to use a <link> to start the download faster.

How to improve website loading speed by preloading key resources?

Preload JavaScript files

Since browsers do not execute preloaded files, preloading helps separate fetching from execution, which can improve metrics like Time to Interactive. Preloading works best if you split your JavaScript bundle and only preload critical chunks.

Things to remember when preloading

Don’t preload every script, or it can actually cause performance issues, such as increasing total blocking time (TBT). Preloading should only be used for resources that are needed immediately, so they are loaded in a non-blocking manner. This is typically used for web fonts, images, CSS and JS.

If you’re using cache-busting techniques (such as the query string, don’t forget that the browser sees the exact URL. So you will need to use a query string URL, or you can dynamically preload with a handle.

If you have a CDN that rewrites the URLs of your assets, make sure that all resources you want to preload are properly rewritten first. If the URLs don’t match, you might end up loading the resource twice.

If you preload stylesheets (CSS) or scripts (JS), and you are using plugins to combine your CSS/JSS (Autoptimize, WP Rocket, etc.), make sure to exclude your preloaded assets from the connection process. Otherwise, it might get packaged twice and end up putting more code on your site.

Recommended reading:

Fouad WhatsApp Update v9.76 APK Download | August

The latest function of fmwhatsapp group call

Leave a Reply

Your email address will not be published. Required fields are marked *