{"id":5972372,"date":"2023-09-19T08:22:04","date_gmt":"2023-09-19T06:22:04","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=5972372"},"modified":"2023-09-19T12:54:42","modified_gmt":"2023-09-19T10:54:42","slug":"wp-rocket-3-15","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/","title":{"rendered":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance"},"content":{"rendered":"<p>What\u2019s the main goal you have in mind when optimizing your website for speed? You may think about delivering an exceptional experience to your visitors. Or you may want to improve your Core Web Vitals grades and PageSpeed Insights score, as they are related to optimizing your website visibility on Google.<\/p><p>Either way, we bet you\u2019ll enjoy our new major release. Say hello to WP Rocket 3.15!<\/p><p>We\u2019re proud and excited to introduce this new major version with a brand-new feature: LazyLoading CSS background images. This new option helps you address two PageSpeed Insights audits and improve some key performance metrics \u2013 therefore, your PageSpeed Insights score, too. The feature is also a game-changer option on the market. You\u2019ll discover why in the next section.\ud83d\ude80<\/p><p>WP Rocket 3.15 also comes with removing the Combine CSS feature \u2013 you\u2019ll understand the reason behind our decision in the article.<\/p><p>Say hello to our new release, watch our video, or keep reading to learn everything about this new WP&nbsp;Rocket milestone!<\/p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/4ktfmZlFhRE?si=HrwZB-nY0vUVJgiC\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen=\"\"><\/iframe><h2 class=\"wp-block-heading\">Why Does Image Lazy Loading Help Improve Performance?<\/h2><p>Lazy loading is a powerful performance optimization technique that allows the browser to load only the files visible before scrolling (above the fold). They\u2019re the files essential to display the page to the user quickly.&nbsp;<\/p><p>Thanks to lazy loading, the files not included in the highest part of the viewport (below the fold) are loaded asynchronously. They\u2019re not needed when the page loads at first, and they are shown only when the user scrolls down the page. As a result, the page is displayed quicker because the browser doesn\u2019t have to wait until all resources \u2013including the non-critical ones\u2013 are loaded.<\/p><p>Lazy loading should be applied to all images except the ones above the fold \u2013 as explained, these are immediately visible to the users and must be loaded as soon as possible. Among the images to lazy load, there may also be the images defined in the CSS files and inline CSS code, such as the background images.<\/p><p>You can see how lazy loading helps the page load faster and improves the overall loading time, right?<\/p><p>Now that we explained why lazy loading is essential to boosting performance let\u2019s discover the new WP Rocket feature.<\/p><h2 class=\"wp-block-heading\">3.15: What LazyLoading for CSS Background Images Entails<\/h2><p>The most important news about LazyLoading for CSS background images is that it directly impacts two important PageSpeed Insights audits: <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/avoid-enormous-network-payloads\/\">Avoid enormous network payloads<\/a> and <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/keep-request-counts-low-transfer-sizes-small\/\">Keep request count low and transfer sizes small<\/a>. Both audits are related to how heavy your pages and their elements are when loading a page.<\/p><p>And that\u2019s why the LazyLoading CSS background images feature comes in handy \u2013 especially because it\u2019s the first option on the market to allow this type of optimization automatically upon the feature\u2019s activation, without any effort from your side.<\/p><p>Depending on how your page is built, the new feature can also help you improve three performance metrics: <a href=\"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/improve-largest-contentful-paint\/\">Largest Contentful Paint<\/a> (Core Web Vitals), <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-first-contentful-paint\/\">First Contentful Paint<\/a>, and <a href=\"https:\/\/wp-rocket.me\/lighthouse-performance-score-wordpress\/improve-speed-index\/\">Speed Index<\/a>.&nbsp;<\/p><p>All these metrics are included in Google\u2019s Performance report, affecting the overall PageSpeed Insights score. By improving them, you\u2019ll likely improve the Core Web Vitals assessment and the overall performance grade.<\/p><h3 class=\"wp-block-heading\">The Impact of the New Feature on Performance<br><\/h3><p>We ran some performance tests to measure the impact of the brand-new feature on the PageSpeed performance report.<\/p><p>We included 22 background images in the website test to measure the effect of enabling the new feature.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"937\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1.jpeg\" alt=\"List of the background images included in the test website before the test - Chrome Network tab\n\" class=\"wp-image-5972377\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1.jpeg 1920w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1-310x151.jpeg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1-768x375.jpeg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1-123x60.jpeg 123w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-1-184x90.jpeg 184w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">List of the background images included in the test website before the test &#8211; Chrome Network tab<br><\/figcaption><\/figure><p>Before enabling the LazyLoad for CSS Background Images feature, we ran the PageSpeed report.&nbsp;<\/p><p>The result showed room for improvement for the two audits mentioned above: Avoid enormous network payloads and Keep request count low and transfer sizes small.&nbsp;<\/p><p>In particular, the tool highlighted the total size of the resources (6,229 KB) and the number of resources found (23 requests) in red.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"294\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1.png\" alt=\"Diagnostics section before enabling the LazyLoad CSS Background Images\n\" class=\"wp-image-5972385\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1.png 966w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1-310x94.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1-768x234.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1-190x58.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-audits-1-296x90.png 296w\" sizes=\"(max-width: 966px) 100vw, 966px\" \/><figcaption class=\"wp-element-caption\">Diagnostics section before enabling the LazyLoad CSS Background Images<br><\/figcaption><\/figure><p>The overall grade and the five Lighthouse metrics were pretty good:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"667\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1.png\" alt=\"Performance report before enabling the LazyLoad CSS Background Images\n\" class=\"wp-image-5972392\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1.png 937w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1-274x195.png 274w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1-768x547.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1-84x60.png 84w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-before-test-PSI-1-126x90.png 126w\" sizes=\"(max-width: 937px) 100vw, 937px\" \/><figcaption class=\"wp-element-caption\">Performance report before enabling the LazyLoad CSS Background Images<br><\/figcaption><\/figure><p>Let\u2019s see what happened after enabling LazyLoading for the CSS background images.<\/p><p>Take a look at the list of images included in the Chrome Network Tab. As you can see, the number of images went from 22 to only 7 \u2013 these are the ones that needed to be loaded on this specific viewport.<\/p><p>You see 5 images in the screenshot, while the Network Tab list shows 7 because we use a 300px threshold for LazyLoading. It means that all images included in such threshold will be loaded. In this specific case, there were 2 additional images visible in the 300px of the viewport.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"937\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1.jpeg\" alt=\"List of the background images included in the test website after the test - Chrome Network tab\n\" class=\"wp-image-5972405\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1.jpeg 1920w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1-310x151.jpeg 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1-768x375.jpeg 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1-123x60.jpeg 123w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-1-184x90.jpeg 184w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">List of the background images included in the test website after the test &#8211; Chrome Network tab<br><\/figcaption><\/figure><p>We ran the PageSpeed report once again, and here\u2019s what we got.<\/p><p>The Diagnostics section showed a big improvement. The number of requests went from 24 to 7, and their size from 6,229 KB to only 930 KB. No red warning anymore!<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"182\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-PSI-audits-1-1.png\" alt=\"Diagnostics section after enabling the LazyLoad CSS Background Images\n\" class=\"wp-image-5972412\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-PSI-audits-1-1.png 709w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-PSI-audits-1-1-310x80.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-PSI-audits-1-1-190x49.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3.15-after-test-PSI-audits-1-1-351x90.png 351w\" sizes=\"(max-width: 709px) 100vw, 709px\" \/><figcaption class=\"wp-element-caption\">Diagnostics section after enabling the LazyLoad CSS Background Images<br><\/figcaption><\/figure><p>In fact, the Avoids enormous network payloads audit went under the Passed ones:<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"80\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1.png\" alt=\"Avoids enormous network payloads - Passed audit\n\" class=\"wp-image-5972420\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1.png 875w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1-310x28.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1-768x70.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1-190x17.png 190w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/3-15-after-test-PSI-audits-2-1-750x69.png 750w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><figcaption class=\"wp-element-caption\">Avoids enormous network payloads &#8211; Passed audit<br><\/figcaption><\/figure><p>While the overall score and grades were already good, we can still see an improvement. The Largest Contentful Paint (Core Web Vitals) decreased from 2.3 s to 1.3 s. The speed Index went from 1.1 s to 0.8 s, and the First Contentful Paint went from 1.0 s to 0.8 s.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"631\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1.png\" alt=\"Performance report after enabling the LazyLoad CSS Background Images\n\" class=\"wp-image-5972434\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1.png 889w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1-275x195.png 275w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1-768x545.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1-85x60.png 85w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Performance-report-after-enabling-the-Lazy-Load-CSS-Background-Images-1-1-127x90.png 127w\" sizes=\"(max-width: 889px) 100vw, 889px\" \/><figcaption class=\"wp-element-caption\">Performance report after enabling the LazyLoad CSS Background Images<br><\/figcaption><\/figure><p>\ud83d\udca1It\u2019s important to remember that the improvements you can get with such a feature depend on how the page is structured and how many background images below the fold are used. <br>First Contentful Paint, Speed Index, and Largest Contentful Paint are all potential target metrics for improvement, as well as the PageSpeed audits and the overall performance score. <br>Our test has been run on a prototype to show the improvements such a feature can make, even when the starting point is already good. Imagine what can happen when the room for improvement is bigger.<\/p><p>Let\u2019s now discover the LazyLoading CSS background images in detail!<\/p><h3 class=\"wp-block-heading\">How the New-Brand Feature Works<\/h3><p>The LazyLoading CSS background images feature is in the Media tab &gt; LazyLoad section.&nbsp;<\/p><p>The option to LazyLoad CSS background images is the second on the list. You only need to tick the box to enable it. As explained above, there\u2019s no extra work for you to do: you activate the option, and the plugin does the job for you.<\/p><p><\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"482\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1.png\" alt=\"LazyLoading CSS background images feature - WP Rocket 3.15\n\" class=\"wp-image-5972441\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1.png 934w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1-310x160.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1-768x396.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1-116x60.png 116w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/LL-CSS-background-images-1-174x90.png 174w\" sizes=\"(max-width: 934px) 100vw, 934px\" \/><figcaption class=\"wp-element-caption\">LazyLoading CSS background images feature &#8211; WP Rocket 3.15<br><\/figcaption><\/figure><p>As mentioned in the previous section, images above the fold should not be lazy-loaded because they must be displayed as soon as possible. It also applies to background images.<\/p><p>If you wish, you can use the Excluded images or iframes box to exclude them. While we&#8217;re at it, we&#8217;d like to let you know that our next version will take care of that for you, but shhh!<\/p><p>\u26a0\ufe0f We recommend not enabling this feature with CSS Combination from the other optimization plugins or themes. We don&#8217;t process combined files from other plugins. Consequently, any backgrounds located there won\u2019t be included in the lazy loading process.<\/p><p>This brings us to the next change of WP Rocket 3.15: removing the CSS Combination option.<\/p><h2 class=\"wp-block-heading\">Goodbye to the Combine CSS Feature<\/h2><p>The Combine CSS feature was designed for websites using HTTP\/1 protocol to solve one of its limitations: the ability to send multiple requests over a single connection. Over time, HTTP\/1 usage decreased and is now an outdated protocol. On the other hand, HTTP\/2 is now the main used protocol, and HTTP\/3 is getting more popular for delivering static assets.<\/p><p>For these reasons, Combine CSS becomes unnecessary. There are no performance benefits from using the Combine CSS feature with HTTP\/2 and HTTP\/3 protocols. What\u2019s more, there\u2019s even less reason to do any CSS optimization if you use the Remove Unused CSS feature, which is also compatible with the new feature.<\/p><p>On top of that, as mentioned above, when enabling the new feature to LazyLoad CSS background images, the Combine CSS feature should not be activated.&nbsp;<\/p><p>That\u2019s why Combine CSS will be automatically removed from the File Optimization tab for new users and customers updating to WP Rocket 3.14.&nbsp;<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"296\" src=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1.png\" alt=\"The Combine CSS files feature is to be removed \" class=\"wp-image-5972448\" srcset=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1.png 796w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1-310x115.png 310w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1-768x286.png 768w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1-161x60.png 161w, https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/Combine-CSS-files-1-242x90.png 242w\" sizes=\"(max-width: 796px) 100vw, 796px\" \/><figcaption class=\"wp-element-caption\">The Combine CSS files feature is to be removed<\/figcaption><\/figure><h2 class=\"wp-block-heading\">Wrapping up<\/h2><p>WP Rocket 3.15 comes with a new powerful feature to improve key performance metrics \u2013including a Core Web Vitals one\u2013, address crucial performance audits, and boost the PageSpeed Insights score.&nbsp;<\/p><p>LazyLoading CSS background images is another step towards easy and effective web performance optimization to make your website faster without any effort. You only need to tick a box to let the new feature do its optimization job \u2013 and you won\u2019t find any other caching plugins on the market doing the same optimization automatically!<\/p><p>It\u2019s also time to let go of the Combine CSS Files feature. Web performance evolved alongside the HTTP protocol, and there was no need to keep it anymore. WP Rocket includes only the features essential to improve your website speed \u2013 simplicity and easiness are always at the heart of our product.<\/p><p>Update WP Rocket to the new version right away, and let us know what you think in the comments!<\/p>","protected":false},"excerpt":{"rendered":"<p>Say hello to WP&nbsp;Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics. Discover everything in the article.<\/p>\n","protected":false},"author":160328,"featured_media":5972459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"kia_subtitle":"","footnotes":""},"categories":[62],"tags":[],"class_list":["post-5972372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inside-wp-rocket"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>3.15: Introducing LazyLoading CSS Background Images to Boost Performance<\/title>\n<meta name=\"description\" content=\"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3.15: Introducing LazyLoading CSS Background Images to Boost Performance\" \/>\n<meta property=\"og:description\" content=\"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Rocket\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-19T06:22:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-19T10:54:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1900\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Valentina Orlandi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:site\" content=\"@wp_rocket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Valentina Orlandi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\"},\"author\":{\"name\":\"Valentina Orlandi\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/90d59985e76c7851e90e680fb4b26762\"},\"headline\":\"3.15: Introducing LazyLoading CSS Background Images to Boost Performance\",\"datePublished\":\"2023-09-19T06:22:04+00:00\",\"dateModified\":\"2023-09-19T10:54:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\"},\"wordCount\":1573,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png\",\"articleSection\":[\"Inside WP Rocket\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\",\"url\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\",\"name\":\"3.15: Introducing LazyLoading CSS Background Images to Boost Performance\",\"isPartOf\":{\"@id\":\"https:\/\/wp-rocket.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png\",\"datePublished\":\"2023-09-19T06:22:04+00:00\",\"dateModified\":\"2023-09-19T10:54:42+00:00\",\"description\":\"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.\",\"breadcrumb\":{\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png\",\"width\":1900,\"height\":800,\"caption\":\"3.15: Introducing LazyLoading CSS Background Images to Boost Performance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wp-rocket.me\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inside WP Rocket\",\"item\":\"https:\/\/wp-rocket.me\/blog\/inside-wp-rocket\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"3.15: Introducing LazyLoading CSS Background Images to Boost Performance\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wp-rocket.me\/#website\",\"url\":\"https:\/\/wp-rocket.me\/\",\"name\":\"WP Rocket\",\"description\":\"Plugin d&#039;optimisation de sites WordPress\",\"publisher\":{\"@id\":\"https:\/\/wp-rocket.me\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wp-rocket.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wp-rocket.me\/#organization\",\"name\":\"WP Rocket\",\"url\":\"https:\/\/wp-rocket.me\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"contentUrl\":\"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png\",\"width\":150,\"height\":41,\"caption\":\"WP Rocket\"},\"image\":{\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829\",\"https:\/\/x.com\/wp_rocket\",\"https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/90d59985e76c7851e90e680fb4b26762\",\"name\":\"Valentina Orlandi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3032c55afa21c3b19334f7da6fb4b372?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3032c55afa21c3b19334f7da6fb4b372?s=96&d=mm&r=g\",\"caption\":\"Valentina Orlandi\"},\"description\":\"Valentina is the Product &amp; Content Marketing Manager at WP\u00a0Rocket. She loves marketing, psychology, and understanding the why behind human behaviors. She's a passionate reader and always eager to work with words.\",\"sameAs\":[\"https:\/\/wp-rocket.me\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance","description":"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.","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:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/","og_locale":"en_US","og_type":"article","og_title":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance","og_description":"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.","og_url":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/","og_site_name":"WP Rocket","article_publisher":"https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","article_published_time":"2023-09-19T06:22:04+00:00","article_modified_time":"2023-09-19T10:54:42+00:00","og_image":[{"width":1900,"height":800,"url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png","type":"image\/png"}],"author":"Valentina Orlandi","twitter_card":"summary_large_image","twitter_creator":"@wp_rocket","twitter_site":"@wp_rocket","twitter_misc":{"Written by":"Valentina Orlandi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#article","isPartOf":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/"},"author":{"name":"Valentina Orlandi","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/90d59985e76c7851e90e680fb4b26762"},"headline":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance","datePublished":"2023-09-19T06:22:04+00:00","dateModified":"2023-09-19T10:54:42+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/"},"wordCount":1573,"commentCount":4,"publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png","articleSection":["Inside WP Rocket"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/","url":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/","name":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance","isPartOf":{"@id":"https:\/\/wp-rocket.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage"},"image":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png","datePublished":"2023-09-19T06:22:04+00:00","dateModified":"2023-09-19T10:54:42+00:00","description":"Say hello to WP Rocket 3.15! Our new major release comes with LazyLoading CSS Background Images and helps you improve key performance metrics.","breadcrumb":{"@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#primaryimage","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/2023\/09\/1900x800-Blog-Post-1.png","width":1900,"height":800,"caption":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-rocket.me\/blog\/wp-rocket-3-15\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-rocket.me"},{"@type":"ListItem","position":2,"name":"Inside WP Rocket","item":"https:\/\/wp-rocket.me\/blog\/inside-wp-rocket\/"},{"@type":"ListItem","position":3,"name":"3.15: Introducing LazyLoading CSS Background Images to Boost Performance"}]},{"@type":"WebSite","@id":"https:\/\/wp-rocket.me\/#website","url":"https:\/\/wp-rocket.me\/","name":"WP Rocket","description":"Plugin d&#039;optimisation de sites WordPress","publisher":{"@id":"https:\/\/wp-rocket.me\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-rocket.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wp-rocket.me\/#organization","name":"WP Rocket","url":"https:\/\/wp-rocket.me\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/","url":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","contentUrl":"https:\/\/wp-rocket.me\/wp-content\/uploads\/1\/logo-wp-rocket-paypal-2.png","width":150,"height":41,"caption":"WP Rocket"},"image":{"@id":"https:\/\/wp-rocket.me\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WP-Rocket\/631942253526829","https:\/\/x.com\/wp_rocket","https:\/\/www.youtube.com\/channel\/UC1ozThXHd1IWIZ5wkshgp_Q"]},{"@type":"Person","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/90d59985e76c7851e90e680fb4b26762","name":"Valentina Orlandi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wp-rocket.me\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3032c55afa21c3b19334f7da6fb4b372?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3032c55afa21c3b19334f7da6fb4b372?s=96&d=mm&r=g","caption":"Valentina Orlandi"},"description":"Valentina is the Product &amp; Content Marketing Manager at WP\u00a0Rocket. She loves marketing, psychology, and understanding the why behind human behaviors. She's a passionate reader and always eager to work with words.","sameAs":["https:\/\/wp-rocket.me\/"]}]}},"_links":{"self":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/5972372"}],"collection":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/users\/160328"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/comments?post=5972372"}],"version-history":[{"count":0,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/posts\/5972372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media\/5972459"}],"wp:attachment":[{"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/media?parent=5972372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/categories?post=5972372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-rocket.me\/wp-json\/wp\/v2\/tags?post=5972372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}