Speed up Magento 2 using Preload, Prefetch, and Preconnect

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 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.
  • This enables 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.

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“>

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.

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/>

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.

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 query, please contact us or raise a ticket.

author
. . .

Comment

Add Your Comment

Be the first to comment.

css.php