Preload In Magento 2
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. You can preload a number of things like – fonts, styles, scripts, images, etc.
We set for the Largest contentful element in optimization for the images, we need to optimize your images and preload.
1.Identification
Tools like GT Metrix, Lighthouse, Page speed insights
2. Admin setting
Steps to Add Custom CSS in Theme From Admin in Magento 2
- Content > Design > Configuration.
- Open the required theme in edit mode from the Design Configuration.
- Expand the HTML Head section.
- Add the custom CSS in the Scripts and StyleSheets
- Click the “Save Configuration”.
3. Example for images,css,fonts and stylesheet
“< link rel=”preload” as=”style” href=”https://static.sooqr.com/custom/117844/1/combined.css” >”
“< link rel=”preload” as=”image” href=”https://devsite/media/catalog/product/cache/feb0898e4c29e3ab55c4c130ce0aa54d/b/r/brsi0110p-700×600.jpg “/ >”
“< link rel=”preload” as=”font” href=”https://fonts.googleapis.com/css2?family-inter:wgh@400;600;800&display=swap” >”
Skip to content
