Now, in this blog, we are going to discuss how we can improve web page performance using Preload, Prefetch, and Preconnect. Let’s discuss each of them one by one.
Preload enables the browser to quickly download and cache a resource. It’s useful when you need a resource within a few seconds of the page loading and wants to save time.
Add a <link> tag with rel=”preload” to the head of your HTML document to preload resources:
<link rel=“preload” href=“critical.js” as=“script”>
You can preload a number of things like – fonts, styles, scripts, images, etc.
Uses of Preload
- It’ll prove useful if you know you’ll require a resource soon after loading the page and want to begin loading it faster.
- By referencing what is defined in the ‘as’ attribute, the browser can verify if the request is consistent with the content security policy.
Preloading everything will not automatically speed up the site; rather, it will prevent the browser from scheduling things effectively.
It instructs the browser to download and cache a resource when it is inactive. It works great when you know you’ll require a resource on a later page and want to cache it ahead of time.
Add a <link> tag with rel=”prefetch” to the head of your HTML document to prefetch resources:
<link rel=“prefetch” href=“/style.css” as=“style” />
Types of prefetching
- Link Prefetching – Link prefetching allows the browser to fetch resources and cache them in anticipation of a user request. <link
- DNS Prefetching – While the user is browsing, DNS prefetching allows the browser to do DNS lookups on a page in the background. <link
- Prerendering – Prerendering is similar to prefetching, it renders the entire page, including all of the document’s assets, in the background.<link rel=“prerendering” href=“www.cloudflare.com“>
Uses of Prefetching
- It’ll come in handy if you need a resource on a different page and want to preload it to speed up the page’s rendering.
- Prefetches are normally given the lowest priority by browsers to avoid interfering with other resources. This implies that prefetching a large amount of data is probably safe.
It’s useful if you know you’ll be downloading something from that domain shortly but aren’t sure what it will be and want to speed up the connection.
When a browser requests something from a new third-party domain, such as a font from Google Fonts, React from a CDN, or a JSON response from an API server, the browser must establish a connection.
Add a <link> tag with rel=”preconnect” to the head of your HTML document to prefetch resources:
<link rel=“preconnect” href=“https://webkul.com/>
Uses of Preconnect
- It’ll come in handy if you need a specific style, script, or image from a third-party domain but don’t know the resource URL.
- The preconnect directive instructs the browser to establish early connections before sending an HTTP request to the server.
- Preconnecting your website in a well-thought-out and efficient manner can not only help you optimize it, but it will also save you from under-utilizing resources.
Setting up and maintaining a connection is expensive for both the client and the server. Use this tag for no more than 4-6 domains, according to the simple rule of thumb.
Hopefully, you now have a better understanding of what preload, prefetch, and preconnect are and how you may use them strategically to speed up the delivery of content and assets.
Thank You for reading this Blog!
For further more interesting blogs, keep in touch with us. If you need any kind of support, simply raise a ticket at https://webkul.uvdesk.com/en/.
You may also visit our Magento development services and quality Magento 2 Extensions.