Magento 2 Google Page Speed Optimizer Extension

This Google Page Speed Optimizer for Magento 2 provides advanced code and image optimization features that are fully automated yet offer simple configurations for each merchant to tailor them to their unique website structure.

All Features:

JavaScript Bundling

• Enable Smart JS Bundling - a unique optimization technique from Plumrocket that reduces the number of server requests for JavaScript files
• Specify the maximum bundle size or use the default one
• Enable the RequireJS file merging (library, configs, mixins, resolver) to reduce server requests
• The extension automatically scans the JavaScript files and generates bundles along with dependencies
• Default JS bundles are used for all pages and are cached the first time a user visits the website. Loading JS files from the browser cache instead of from CDN significantly speeds up website browsing
• In addition to the default bundles, the extension automatically creates unique bundles for each page type - homepage, product page, product page, category page, category page with layered navigation, simple product page, and configurable product page
• The admin can provide the URL of any custom page type so that extension analyzes JS files and creates bundles
• Run the process of bundle creation using a simple wizard from the extension configuration page

Code Optimizations

• Automatically minify inline JavaScript to decrease the number of HTTP requests to the server
• Enable automatic CSS Minification to minify CSS content inside the <style> tags to rescue the page weight
• Enable HTML minification that will be performed only once during static content deployment instead of minifying after each page render
• The “Move JS to the Bottom of the Page” option allows you to load JS after all the content, which is more time efficient as it makes the content interactive after it has completely loaded
• Admin can enable the Sign Static Files feature that forces the browser cache to refresh each time the changes are made to the website in order to always display the latest version of the website to users
• Keep the “Prioritize Resource Loading” feature enabled so that the extension automatically sets the proper, more efficient priority for loading JavaScript, CSS, images, iFrames, and other resources to speed up page rendering.

Third-Party Connection Optimizations

• Get more control over third-party resource loading with preload, preconnect, and DNS prefetch features. They define custom loading logic and reduce the time it takes to fetch the resources
• Preconnect to the most critical third-party domains to setup early connections to the resources and serve them to users almost instantly
• Use the DNS-prefetch feature to perform DNS lookups on a page in the background while the user is browsing (the first step of the connection process) to minimize latency when loading files from third-party domains
• Enable font preloading to instantly render them and prevent layout shifts

Image Optimizations

• Magento 2 Google Page Speed Optimizer includes the features of the Lazy Load extension, which provide image optimization tools to optimize overall site performance
• Image Lazy Loading delays the loading of above-the-fold images until users scroll down to them, and can be automatically applied for the entire Product List, CMS page content, Related Products, Cross-Sells, and Up-Sells
• Manually specify blocks or containers to lazy load images inside
• Developers can apply lazy loading with image CSS classes or URLs
• A Lazy Load exclude list can be used to ensure full extension compatibility with other third parties that use their built-in lazy load functionality
• The Lazy Load Exclude List can be used to ensure the extension is fully compatible with other third-party functionality that already uses built-in lazy loading
• Admins can set up Image Preload for main images to load them prior to other resources to ensure the fastest initial page loading and increase the LCP score
• The number of preload images can be set for Category, CMS, and other pages individually to ensure the highest page loading speed even with a poor Internet connection
• Some images can be ignored during preload by setting limits on their height and width
• The data-hero image attribute can be used in HTML code to prioritize preloading of specific images, ignoring size limits
• Enabling automatic resource loading prioritization improves page rendering