{"id":26434,"date":"2023-02-13T06:33:10","date_gmt":"2023-02-13T11:33:10","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26434"},"modified":"2025-09-30T11:46:52","modified_gmt":"2025-09-30T15:46:52","slug":"magento-2-google-page-speed-optimizer-v1-x-configuration","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-page-speed-optimizer\/v1\/configuration","title":{"rendered":"Magento 2 Google Page Speed Optimizer v1.x Configuration"},"content":{"rendered":"\n

In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Page Speed Optimizer extension<\/a>. Please follow this guide after installing the plugin.<\/p>\n\n\n\n

<\/a>Configuring Magento 2 Google Page Speed Optimizer Extension<\/h2>\n\n\n\n

In the main Magento menu, go to the Plumrocket<\/strong> tab > select Google Page Speed Optimizer <\/strong>> Configuration<\/strong>.<\/p>\n\n\n\n

<\/a>General<\/h3>\n\n\n\n
\n

Step-by-step guide:<\/p>\n\n\n\n

  1.  “Enable<\/strong>“: set the option to Yes<\/em> to enable the Page Speed Optimizer extension on your Magento 2 store.<\/li>
  2. “Serial Key<\/strong>“: enter the unique serial key provided after the purchase for the legitimate and proper functioning of your extension. Note<\/strong>: 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<\/a> in order to find and paste your serial key manually.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
    \"Magento<\/figure>\n\n\n\n

    Image Preload<\/h3>\n\n\n\n
    \n

    Step-by-step guide:<\/p>\n\n\n\n

    1. “Enable<\/strong>“: set to Yes<\/em> 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.<\/li>
    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. <\/li>
    3. “Minimum Image Width (px)<\/strong>“: ignore only small and minor images during preloading by setting minimum width and height for images in this field.<\/li>
    4. “Preload by Image Attribute<\/strong>“: 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.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
      \"Magento<\/figure>\n\n\n\n

      Image Lazy Loading<\/h3>\n\n\n\n
      \n

      Step-by-step guide:<\/p>\n\n\n\n

      1. “Enable<\/strong>“: set to Yes<\/em> 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.<\/li>
      2. “Enable For<\/strong>“: select the pages\/lists you want to apply lazy loading to.<\/li>
      3. “Blocks<\/strong>“: please specify the container\/block to preload all images inside.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
        \"Magento<\/figure>\n\n\n\n

        Lazy Load Conditions (For Developers)<\/h4>\n\n\n\n
        \n

        Step-by-step guide:<\/p>\n\n\n\n

        1. “Lazy Load by CSS Class<\/strong>“: please provide CSS class(es) to lazy load all images that contain it.<\/li>
        2. “Lazy Load by URL<\/strong>“: enter URL pattern(s) to lazy load all images that contain it. Learn more about URL pattern formats in our developer guide<\/a>.<\/li>
        3. “Exclude by CSS Class<\/strong>“: 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. <\/li><\/ol>\n<\/div><\/div>\n\n\n\n
          \"Magento<\/figure>\n\n\n\n

          Javascript Optimization<\/h3>\n\n\n\n
          \n

          Step-by-step guide:<\/p>\n\n\n\n

          1. “Minify Inline JavaScript<\/strong>“: by enabling this option, the content inside <script> tags will be minified to reduce the page weight and speed up the page loading. <\/li>
          2. “Move JS to The Page Footer<\/strong>“: 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.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
            \"Magento<\/figure>\n\n\n\n

            JavaScript Smart Bundling<\/h3>\n\n\n\n

            Smart Bundling from Plumrocket is the most efficient and fast way to load JavaScript files. The extension not only bundles JS files to reduce the network requests, but it also creates different bundles for each page type to load only those files that are required for a specific page type. <\/p>\n\n\n\n

            This allows for minimum network requests and increases the Total Blocking Time (TBT), Time To Interactive (TTI), and First Input Delay (FID) metrics of Web Vitals. As a result, the page becomes interactive for users much faster.<\/p>\n\n\n\n

            \n

            Step-by-step guide:<\/p>\n\n\n\n

            1. “Enable Smart Bundling<\/strong>“: enable this option to start the automatic bundle generation of JS files for your website. <\/li>
            2. “Create Bundles for the Following Pages<\/strong>“: specify the pages for which bundles should be created.<\/li>
            3. “Bundle Status<\/strong>“: here you can see the status of the bundle generation. Bundles are generated and run properly if all three warnings are green.