Creating great content with Joomla is one thing, making it accessible is another. Lazy loading is one solution that combines the two without altering your workflow. The technique loads images only if and when needed. If the reader never reaches an image on the webpage, it never gets downloaded.
The benefits are many. Pages load faster, which means that the user experience is better, SEO scores soar and your Joomla content is accessible to users on low-end devices or slow internet access. A few weeks ago, we presented an improvement on the basic lazy loading recipe on WordPress. Today, we are presenting it for Joomla too, but before that, a look at lazy loading on Joomla.
Lazy loading on Joomla is part of the Speed Cache extension. Activating lazy loading is as simple as flicking on a switch, but Joomla’s Speed Cache also includes new features that are not present in WordPress yet. To get started, head to Speed Cache’s configuration from your Joomla backend.
All the lazy loading options reside in a new tab, aptly named lazy loading. To enable lazy loading, just switch on the very first option. Below, the Joomla extension adds new options to customize lazy loading to suit your website.
With the first two fields, you can exclude certain images from lazy loading if they are very small. This is useful to enable lazy loading for images that actually impact the loading time of your Joomla blog, not, for example 16px width icons. For this reason, ensure that you only exclude small images so as not to render lazy loading ineffectual.
The exclusion by image width and / or height.
In some cases, however, you might want to exclude certain posts from lazy loading. Perhaps the media that they include is integral to the content. The following two fields are used to this effect. With the first field you can enable lazy loading only for certain pages, and with the second field you can disable lazy loading for only a selection of content. In both cases, wildcards are also allowed. Save changes to enable lazy loading - the feature takes effect automatically.
Lazy loading serves content as soon as it is required. However, downloading media can still take some time, especially on lower-end mobiles or slow internet access. Whereas your Joomla blog cannot magically speed up mobiles or internet access, it can do the next best thing - improve user experience.
Progressive image lazy loading automatically creates a small version of images - 20px width, 4 colors, weight few Kb - then blows them up to the original size and then blurs them. The effect is a blurred version of the full-sized image that indicates that the image is still being downloaded. When the image finishes downloading, the blurred image is replaced with the full image.
Progressive lazy loading is enabled automatically with lazy loading, which means that you do not need to make any additional changes. Best of all, by using only small versions of the image, progressive lazy loading adds very little overhead.
Progressive lazy loading compromises between showing media and delaying downloading them by adding visual cues while still making navigating your Joomla blog a faster experience. There should be no boundaries to sharing great content and now, with progressive lazy loading there are no boundaries to making it accessible.
Lazy loading is about scrolling and screen height. The SpeedCache lazy loading is very smart in a way that it applies only on the current screen height (based on viewport) and preload the next one. So if you have fast connection or if you scroll slowly, you won't even notice the lazy loading is activated on your Joomla website.
Furthermore, this screen height lazy loading only applies on the current screen height even if it's on the middle of the page, in case of a link to an anchor for example. Then, the lazy loading is applied once you scroll up or scroll down.
The lazy loading used in Speed Cache does not impact SEO, in fact search engines that crawls your content like Google bot will only see advantages
Check Speed Cache for Joomla: https://www.joomunited.com/products/speed-cache