{"id":9917,"date":"2024-01-16T09:35:27","date_gmt":"2024-01-16T09:35:27","guid":{"rendered":"https:\/\/cloudkul.com\/blog\/?p=9917"},"modified":"2024-04-15T08:05:48","modified_gmt":"2024-04-15T08:05:48","slug":"speed-up-magento-2-using-preload-prefetch-and-preconnect","status":"publish","type":"post","link":"https:\/\/cloudkul.com\/blog\/speed-up-magento-2-using-preload-prefetch-and-preconnect\/","title":{"rendered":"Speed up Magento 2 using Preload, Prefetch, and Preconnect"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In our previous blogs<\/a><\/strong>, we have learned how we can improve our Magento 2 store performance and speed up the page performance using Signed Exchange<\/a><\/strong> and by improving TTFB<\/a><\/strong>.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Preload<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Add a <link> tag with rel=”preload” to the head of your HTML document to preload resources:<\/p>\n\n\n\n

<link<\/span> rel<\/span>=“preload”<\/span> href<\/span>=“critical.js”<\/span> as<\/span>=“script”<\/span>><\/p>\n\n\n\n

You can preload several things like – fonts, styles, scripts, images, etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Uses of Preload in Magento 2<\/h3>\n\n\n\n