Magento 2 Google Page Speed Optimizer v1.x Configuration

Step-by-step guide:

1.  “Enable“: set the option to Yes to enable the Page Speed Optimizer extension on your Magento 2 store.
2. “Serial Key“: enter the unique serial key provided after the purchase for the legitimate and proper functioning of your extension. Note: in most cases, this field will be pre-filled with the serial key automatically, and the green check mark will be displayed. Otherwise, please read the Serial Key Activation article in order to find and paste your serial key manually.

Step-by-step guide:

1. “Enable“: set to Yes to enable image preloading on your store. This option allows you to speed up the initial page display by loading the main images on the page before any other resources.
2. Please specify the number of images you want to preload on the Category Page, CMS Page, and other pages. It is recommended to preload only above-the-fold and the most important images on pages in order not to slow down the loading of important resources and ensure the fastest possible page rendering.
3. “Minimum Image Width (px)“: ignore only small and minor images during preloading by setting minimum width and height for images in this field.
4. “Preload by Image Attribute“: add a data-hero image attribute to your HTML code to manually mark images as the ones that should be preloaded first, ignoring size restrictions set in the previous option.

Step-by-step guide:

1. “Enable“: set to Yes to enable image lazy loading on your store. Lazy loading defers loading of non-critical (off-screen) images at page load time until they are needed, which greatly improves LCP Core Web Vital score.
2. “Enable For“: select the pages/lists you want to apply lazy loading to.
3. “Blocks“: please specify the container/block to preload all images inside.

Step-by-step guide:

1. “Lazy Load by CSS Class“: please provide CSS class(es) to lazy load all images that contain it.
2. “Lazy Load by URL“: enter URL pattern(s) to lazy load all images that contain it. Learn more about URL pattern formats in our developer guide.
3. “Exclude by CSS Class“: exclude some images from lazy loading by specifying their CSS class in this field. This option may be useful for carousels or any third-party elements that already have lazy loading built-in to ensure full compatibility with the extension.

Step-by-step guide:

1. “Minify Inline JavaScript“: by enabling this option, the content inside <script> tags will be minified to reduce the page weight and speed up the page loading.
2. “Move JS to The Page Footer“: by default, JS files may be executed or processed before loading the page content, which slows down the page rendering. Enable this option to move JS to the bottom of the page so your web server would quickly render the page and only then the user’s browser would execute JavaScript. This will significantly boost the page loading time and Core Web Vitals score.

Step-by-step guide:

1. “Enable Smart Bundling“: enable this option to start the automatic bundle generation of JS files for your website.
2. “Bundle Status“: here you can see the status of the bundle generation. Bundles are generated and run properly if all three warnings are green.
   • If creating bundles for the first time, click Generate Bundles and follow the steps in the quick wizard.
   • If you created bundles before but see the red alerts, click Regenerate Bundles to go through the bundle creation process again. Note that it’s recommended to regenerate bundles every time you install new extensions to include any additional JS files they may provide.

Step-by-step guide:

1. When clicking Generate Bundles, you will be prompted to complete 5 simple steps with our quick wizard.

Step-by-step guide:

1. “Max Bundle Size (KB)“: change the maximum bundle size if necessary.
2. “Create Bundles for the Following Pages“: the extension automatically detects your Homepage, Category Page, and Product Page to create bundles for these page types. Expand the View selected pages tab to see which pages have been selected.
3. Optionally, provide another page type, for example, a blog page.
4. “Exclude JS Files From Bundling“: you may need to exclude JS files from bundling that are causing JS errors. Please follow the troubleshooting guide provided in the field comment to get it right.

Step-by-step guide:

1. “Minify Inline CSS“: minify CSS content in <style> tags to reduce the page weight and speed up page load time.

Step-by-step guide:

1. “Preload Fonts“: preload your web fonts by entering the font URL in this field. This helps avoid layout shifts and improves the Cumulative Layout Shift (CLS) Core Web Vital score.

Step-by-step guide:

1. “Preconnect“: preconecting to third-party domains allows you to establish early server connections with that domains (before the content is requested), which saves time later and renders the page faster. Note that preconnect is a resource-consuming process and is only efficient when preconnecting to the most critical domains. Click Add Row to provide the domain URL.
2. “DNS-prefetch“: unlike Preconnect that establishes a full server connection to third-party domains early in the page load, DNS-prefetch performs only the first part of that connection (DNS-resolve). This is a less resource-consuming process to speed up the rendering of the content from third-party domains.

Step-by-step guide:

1. “Prioritize Resource Loading“: it is recommended to set this option to Yes to reorder child <head> tags and ensure that page resources are more efficiently loaded and lazy loading works properly.
2. “Sign Static Files“: set to Yes to invalidate the browser and CDN cache for static resources and immediately display changes on the website. This is a default Magento feature that is recommended to be enabled to improve page speed.
3. “Minify Html“: set to Yes to minify HTML only once during static content deployment, speeding up page rendering.
4. “Asynchronous Indexing“: enable this option to prevent database locks and slow order processing during checkout, when a large number of orders are placed at the same time (for example, during large sales).
5. Click Save Config to save all your configurations.