Lazy-Loading
Lazy-loading (also known as on-demand loading) is a system for optimizing your page’s loading time.
Normally, users receive an entire page in one shot. However, with lazy-loading, necessary resources are loaded first while non-critical ones are deferred. For instance, on-screen images are usually loaded first while off-screen images are loaded later.
An example of the lazy-loading technique is the infinity scroll, where the web page content loads as (and when) users scroll down the page.
Lazy Loading in Elementor
Elementor offers you several ways to take advantage of lazy loading:
- Optimized Image loading improves performance by identifying the images that will take the longest time to load and giving them priority. To learn more about this feature, see Image Loading Optimization.
- Lazy Load background images speeds up page load times by applying lazy loading to all background images except the first one. For details, see Improve performance features.
- A number of widgets that include images give you the option to apply lazy loading. For example, to improve performance, the Image Carousel widget gives you a lazy load option so images are only loaded when they are about to be displayed.
Pros & Cons of Lazy-Loading
Lazy-loading is a relatively uncontroversial performance improvement technique. It is used to cut down needless downloads for sites with lots of inline imagery, speeding up page loading times. However, there are pros and cons as with any technique.
Lazy-loading advantages:
- Reduced loading time and memory usage.
- No unnecessary code execution.
- Optimal time and resources make it cost-effective for website owners.
Lazy-loading disadvantages:
May affect the website’s search engine rankings due to incorrect indexing of the unloaded content.
