On this side of the world spring is blossoming: what better way to celebrate the blooming season than a brand-new WP Rocket version? ?
<\/p>
Today we\u2019re introducing the latest major version of our plugin: 3.3 is here<\/strong>, and it includes magic features and new enhanced compatibilities! ?\u2728 Most of the new features will work under-the-hood<\/strong>, so don\u2019t worry if you don\u2019t see big changes in the plugin\u2019s interface: rest reassured they\u2019ll be silently working to make your site faster, and boost its performance! <\/p> This was the first time we ran a staggered release for a major version<\/strong>. The primary goal of this method was adding an extra level of safety to our release: we wanted to be able to identify unexpected issues before making the new version available to 100% of our customers. <\/p> That\u2019s why some of you were able to update to 3.3 before the rest of our customers. ? Let\u2019s now see the new features in detail.<\/p> Until now, WP Rocket was able to only defer the loading of standard images on your site, such as those found within <img<\/em>> tags. All images added in posts, widgets etc., were (and still are!<\/em>) LazyLoaded automatically. From WP Rocket 3.3, our Lazyload will be applied on the template_redirect<\/em> hook: in plain English, this means that our LazyLoad will be able to optimize more images<\/strong><\/a> and, at the same time, will encounter fewer conflicts. Other enhancement to this new process is that our LazyLoad will now apply to certain background images and images on <<\/strong>picture<\/em><\/strong>> elements<\/strong>! ? WP Rocket will automatically LazyLoad background images that are found in the HTML of your page using this markup: <div style=”background-image: url(image.jpg)”><\/em> The <div><\/em> element can have other attributes or classes, and it will still work. <\/p> When LazyLoaded, the element will be transformed into:<\/p> <div data-bg=”url(image.jpg)” class=”rocket-lazyload” style=””><\/em><\/p> This is common markup used by popular page builders. Generally speaking, background images will be automatically LazyLoaded when using: <\/p> The automatic LazyLoad will also work on images added with the <picture<\/em>> element, including WebP images inserted this way. On the other hand, if the background image is added another way, such as in a CSS file, or inline CSS <style<\/em>> tag, LazyLoad won\u2019t work at this time. Furthermore, it\u2019s worth mentioning that most of the code for LazyLoad now lives in the separate Rocket LazyLoad Common<\/em> library. This is used as a dependency, for both WP Rocket and our standalone plugin<\/a>.<\/p>
<\/p>Implementing Staggered Releases<\/h2>
On April 1st we started rolling out 3.3 for a small random sample of customers (10% of them); we slowly increased the sample day after day, until we reached our full customer base on April the 9th.
<\/p>
<\/p>An Expanded LazyLoad Experience<\/h2>
<\/p>
<\/p>
<\/p>
<\/p>
<\/p>
<\/p>
<\/p>