In our previous blogs, we have learned how we can improve our Magento 2 store performance and speed up the page performance using Signed Exchange and by improving TTFB.
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
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 want 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 several things like – fonts, styles, scripts, images, etc.
Uses of Preload in Magento 2
- It’ll prove useful if you know you’ll require a resource soon after loading the page and want to begin loading it faster.
- This enables the preloading of resources launched by CSS and JavaScript, as well as defining when each resource should be applied.
- 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. Therefore, it should be used judiciously to optimize page performance.
Prefetch
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
1. Link Prefetching – Link prefetching allows the browser to fetch resources and cache them in anticipation of a user request.
<link rel="prefetch" href="/images/pic.png">
2. DNS Prefetching – While the user is browsing, DNS Prefetching allows the browser to do DNS lookups on a page in the background.
<link rel="dns-prefetch" href="//domain.com">
3. 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“>
These techniques optimize page loading and user experience by proactively fetching and preparing resources.
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.
Prefetched resources are loaded with significantly lower priority compared to preloaded resources, ensuring that the user’s current page experience remains unaffected.
Preconnect
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/>
This approach enhances the efficiency of establishing connections with external domains, improving page loading speed.
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.
It’s important that setting up and maintaining connections can be resource-intensive, so it’s advisable to limit the use of the preconnect tag to approximately 4-6 domains as a general guideline.
Conclusion
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.
Need Support?
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.
For further help or queries, please contact us or raise a ticket.