{"id":26239,"date":"2022-11-09T12:27:43","date_gmt":"2022-11-09T17:27:43","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26239"},"modified":"2022-11-09T12:30:48","modified_gmt":"2022-11-09T17:30:48","slug":"magento-2-lazy-load-v1-x-configuration","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration","title":{"rendered":"Magento 2 Lazy Load v1.x Configuration"},"content":{"rendered":"\n

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

<\/a>Configuring Magento 2 Lazy Load Extension<\/h2>\n\n\n\n

In the main Magento menu, go to the Plumrocket<\/strong> tab > select Lazy Load <\/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 Lazy Load extension on your Magento 2 store.<\/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 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
        \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\u00a0developer 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

          Additional Settings<\/h3>\n\n\n\n
          \n

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

          1. “Prioritize Resource Loading<\/strong>“: it is recommended to set this option to Yes<\/em> to reorder child <head> tags and ensure that page resources are more efficiently loaded and lazy loading works properly.<\/li>
          2. “Sign Static Files<\/strong>“: 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.<\/li>
          3. “Minify Html<\/strong>“: set to Yes to minify HTML only once during static content deployment, speeding up page rendering.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
            \"Magento<\/figure>\n","protected":false},"excerpt":{"rendered":"

            In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide after installing the plugin. Configuring Magento 2 Lazy Load Extension In the main Magento menu, go to the Plumrocket tab > select Lazy Load > Configuration. General Image Preload Image Lazy Loading Additional Settings<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[362],"tags":[],"yoast_head":"\nHow to Configure Magento 2 Lazy Load Extension v1.x Magento 2 Lazy Load v1.x Configuration - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Lazy Load v1.x Configuration\" \/>\n<meta property=\"og:description\" content=\"In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T17:27:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-09T17:30:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2022\/11\/magento-2-lazy-load-extension-configuration-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Configure Magento 2 Lazy Load Extension v1.x Magento 2 Lazy Load v1.x Configuration - Plumrocket Documentation","description":"In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Lazy Load v1.x Configuration","og_description":"In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide","og_url":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration","og_site_name":"Plumrocket Documentation","article_published_time":"2022-11-09T17:27:43+00:00","article_modified_time":"2022-11-09T17:30:48+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2022\/11\/magento-2-lazy-load-extension-configuration-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration#primaryimage","inLanguage":"en-US","url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2022\/11\/magento-2-lazy-load-extension-configuration-1.png","contentUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2022\/11\/magento-2-lazy-load-extension-configuration-1.png","width":1206,"height":566},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration","name":"Magento 2 Lazy Load v1.x Configuration - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration#primaryimage"},"datePublished":"2022-11-09T17:27:43+00:00","dateModified":"2022-11-09T17:30:48+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"In this article, you will find step-by-step instructions on how to properly configure the Magento 2 Lazy Load extension. Please follow this guide","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/configuration#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Lazy Load","item":"https:\/\/plumrocket.com\/magento-lazy-load"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-lazy-load"},{"@type":"ListItem","position":4,"name":"v1","item":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1"},{"@type":"ListItem","position":5,"name":"Configuration"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26239"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=26239"}],"version-history":[{"count":3,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26239\/revisions"}],"predecessor-version":[{"id":26435,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26239\/revisions\/26435"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=26239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=26239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=26239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}