These three things are defined at the outset for those who are not clear on what they are.
Lazy Load
Lazy load is a design pattern that is used to delay the loading or rendering of an object until the right time of use to avoid unnecessary preloading of objects that might not be used. It is most commonly used for images and contributes to better load times and bandwidth savings.
The rendering of each image is delayed until it is needed, loading as you scroll through the viewport
Viewport
Viewportplaceholder, which does not have an exact translation, but is often called "graphical window", was created by Apple 2007 for its iPhone was a virtual window similar to the one Nokia had designed for Mini Map. It was a meta tag that was intended to provide a way for web pages to communicate to mobile browsers how they wanted the web browser to render the page.
Without this meta tag, iPhones rendered web pages as a 980 px wide window that the user had to zoom in and out of. With this meta tag, you get to render a page at its actual size and then adapt the layout to provide the kind of page we all expect to see when using a mobile browser. Eventually it became a standard meta tag supported by most devices and is the one used today for what is known as responsive design.
Litespeed Cache
LiteSpeed Web Server is a web server and web server software for WordPress (LSCWP) LiteSpeed Cache for WordPress (LSCWP) is its all-in-one site acceleration plugin, which features a unique server-wide cache and a collection of optimisation features for sites that use WordPress and are hosted on a WordPress server.
Loading images
Ideally, all images should load deferred, except those that are already in the viewport when the page initially loads, i.e. what is shown at first glance on the screen before we scroll.
This has a problem. The page can look ugly on first load as the images are not shown until there is no movement and you have to exclude the first two or three that are shown
Although WordPress has had native deferred loading since version 5.5 and this can be done with many other plugins such as Perfmattersthe Viewport control to limit which images in particular you want to be displayed and which not is not so simple, because we can tell it not to do deferred loading of for example the images that we want to display, but we can not set or exclude the images that we want to display first two, three or fourbut we can't set or exclude specific images for each page in a simple way and we can only do this with the in bulk.
VPI
On 25 July, LiteSpeed added in the 5.0 version update of its plugin a flexible option to fix this which it has called VPI (Viewport Images).
The VPI service examines a URL and determines which images are visible on a 1300×900 pixel screen for desktop views and which images are visible on a 480×800 screen for mobile views. It returns a list of those images to the LiteSpeed plugin, and the LiteSpeed plugin excludes them from slow loading the next time it caches that URL.
The result is a page that renders completely above the fold, while all images below the fold continue to behave as before. The page retains its good page speed score, while human visitors encounter a first full screen of content.
Configuration
To use this new service, obviously, you have to activate Lazy Load in the plugin.
Its configuration is very simple, just activate it and it has only two switches.
When viewport images (hereafter VPI) are enabled and cron is set to ON, the VPI images will be generated in the background via a cron-based queue.
If you do not want to enable cron, you will have to process the VPI queue manually. You can do this from the"Manually run VPI queue" button that will appear when there are URs in the queue. Or, from the main dashboard from the"Force cron" option.
The interesting and really useful thing about this new option is that now, both in the classic editor and in Gutenberg, in each post and page you will find a new box in the LiteSpeed options where you can completely disable this option and remove any image from the Viewport to fine-tune it to your liking.
Any images that appear in these boxes will not be deferred loaded
If the input has not yet been processed for VPI, both boxes will appear empty although you can manually add images as you wish or delete images from both boxes and force a VPI recalculation.
The good and the less good
Without a doubt, the great advantage of LiteSpeed's VPI is being able to quickly and easily decide on a whim which specific images we don't want the deferred loading to be applied to and set it manually for each page.
The catch is that this option is in addition to the other WordPress optimisation services from QUIC.cloud such as Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) and Image Optimisation for which we are offered a limited free fee, which may not always be enough, and thereafter you have to buy credits, although not expensive.
I decided to test it to compare the result with the native Lazy Load of WordPress Core and Perfmatters (with fixed exclusions per quantity) and so far I can see an improvement within the small margin that was already left.
The final visual result is exactly the same as that achieved with Perfmatters, as it is sufficient to change the colour of the placeholder from grey to white and adjust the duration of the"fade in" effect with this CSS.
/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
