Our Magento Blog

Advanced javascript bundling in Magento 2 1. What Is Javascript Bundling ? JavaScript bundling is an optimization Process,its impact on reducing the number of server requests for JavaScript files. Bundling this by merging multiple JavaScript files together into one file to reduce the number of page requests. 2. Javascript bundling in Magento Bundling javascript modules for better performance is [...]

Move Js From Head To Bottom In Magento2 Magento 2 JavaScript extension allows you to enable deferred JavaScript loading and move JS code from the head to the bottom automatically. That way you increase the website loading speed and eliminate render-blocking. So basically javaScript < script > tags just before the closing < /body > tag or in thesection [...]

Reduce Unused JS(scripts) For Magento 2 It is all about unused js, that are not in use or that are unwanted for your site and block the site speed. 1.Identification Tools like GTMetrics, Lighthouse, Page speed insights 2. There are two Methods: 2.1 Override the files We need to find out what files are not being used and [...]

Table Of Content  Identification  Admin setting  Example for images,css,fonts and stylesheet 24 January, 2022 | 5 min read 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 [...]

Reduce the Impact of Third Party Code in Magento 2 A third-party script is defined as any script hosted on a domain that's different from the domain of the current URL so even if you serve assets from an alternative domain that you manage yourself, such as cdn.mysite.com, it will still be treated as the third party. 1. Identification [...]

Ensure Text Remains Visible During Webfont Load In Magento 2 The way to do that is to specify a fallback system font that will display until the web font is ready. by using the CSS declaration font-display: swap, this tells the browser to display the text immediately with a fallback font and then swap it for the requested font [...]

Table Of Content  Types of Image formats  Image format: webP Image Format WebP in Magento 2 Instead, you can use the extension that automatically converts images from PNG, JPG, and GIF to WebP format. We recommend using the Magento 2 WebP Images Extension since it has all the necessary options to help you optimize images and boost [...]

Use CDN In Magento 2 Optimization A Content Delivery Network (CDN) is used to store media files. Content Delivery Networks are the preferred means to serve images for your online store. a content delivery network,CDN distributes your images over a secure network of servers around the world. so when a user accesses your site, that gets connected to the [...]

Using Picture Tag In Magento 2 Optimization The < img > element serves two purposes: It describes the size and other attributes of the image and its presentation. It provides a fallback in case none of the offered elements are able to provide a usable image. 1.What are Different breakpoints Following are the different types of breakpoints for desktop [...]

Image Elements Do Not Have Explicit Width and Height In Magento 2 Optimization The < img > width attribute is used to set the width of the image in pixels.In this example, we will set the width and height of an image. Applying a width and height attribute the browser can now calculate the aspect ratio before it renders [...]

Optimize for Speed: Eliminate Render Blocking Resources In Magento 2 Delivering a lightning-fast experience is crucial for your Magento 2 store's success. However, certain resources can act as roadblocks, hindering initial page rendering and frustrating users. These culprits are known as render-blocking resources, including static files like fonts, HTML, CSS, and JavaScript. The Importance of Minimizing Render-Blocking - Prioritize [...]

Table Of Content  Identification  Example Reduce Unused CSS In Magento 2 Having unused CSS can really slow down your applications and just makes your web page longer, which also makes it take longer to load. Therefore, it is important to keep your excess code to a minimum. 1. Identification Tools like GT Metrix,lighthouse, Page speed insights. 2. [...]