With images making up 65% of all web content, page load time on websites can easily become an issue.
Images can weight quite a bit. This can have a negative impact on the time visitors have to wait before they can access content on your website. they will get navigate somewhere else, unless you come up with a solution to image loading.
What is lazy loading?
Lazy loading images means loading images on websites asynchronously that is, after the content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t be loaded.
Over the years, various packages were introduced to the React ecosystem to optimize applications through lazy loading. Let us take a look at five lazy-loading libraries popular in the React community:
1. react-lazyload: Flexible customization
react-lazyload can be used to lazy load any type of component in a React application. It is one of the most popular lazy-loading libraries in the React community, supporting decorators and server-side rendering.
Features of react-lazyload
- Has a set of properties to enable users to customize the functionalities of the component.
- Provides utilities such as forceCheck to display hidden content that becomes visible without a resize or scroll event.
- Supports horizontal lazy load out of the box.
- Implements only two event listeners for all lazily loaded components, optimizing the performance further.
Link to Demo
react-lazy-load is a React component that can be used to defer loading content in a predictable way. It is comparatively fast, with a minimal bundle size (6KB minified).
Features of react-lazy-load
- Automatically detects scrolling containers such as a <div> with a scrollbar and therefore can be used even inside a scrolling container.
- Lets users set the threshold to begin content loading from any side of the viewport, using props such as offsetVertical, offsetHorizontal, offsetTop, offsetBottom, etc.
- Works in IE8+.
- Has built-in support for debouncing functions.
However, compared to the react-lazyload library, this component has a very limited number of props and therefore provides less flexibility. The main disadvantage is that it doesn’t allow users to apply a placeholder for the lazy-loaded component.
3. react-lazy-load-image-component: Compatible with TypeScript declarations
The react-lazy-load-image-component is an easy-to-use library for lazy loading any type of component. It supports the IntersectionObserver, and you can determine when an element leaves and enters the viewport.
Features of react-lazy-load-image-component
- The most significant feature of this library is its HOC, trackWindowScroll, which allows components to track window scroll positions without using scroll or resize event listeners for every element.
- The lazy-loaded components will have an offset of 100 pixels by default.
- Built-in, on-visible effects such as blur, black and white, and opacity transitions help to improve the user experience.
- Server-side rendering compatible.
- Support for TypeScript declarations.
- A placeholder is provided by default with the same size as the image or component, though it can be customized.
Link to Demo
4. react-lazy-images: Fallback strategies for SEO- or JS-disabled environments
react-lazy-images is a flexible library that provides components and utilities to lazy load images in React. It gives full presentational control for the caller using render props.
Features of react-lazy-images
- Uses IntersectionObserver with polyfill to improve performance.
- Supports server-side rendering.
- Supports background images and works with horizontal scrolling.
5. react-lazy-blur-image: Provides a lightweight gray placeholder
react-lazy-blur-image is the ideal library to lazy load images into a low-resolution placeholder. By default, this component displays a lightweight, gray placeholder and is replaced with an actual placeholder when the component is about to reach the viewport. This placeholder will be replaced only when the actual image is lazily loaded completely.
Features of react-lazy-blur-image
- It provides a minimalistic approach to lazy load images, providing the perfect UX and performance balance.
- The component accepts only two props for customization: src and style.
- Component can use styled-components to transition an image from the placeholder.
Here is a summary of the statistics of these 5 lazy loading libraries
Any libraries/packages you’ve used and recommend for lazy loading of images in React? Let me know in the comments section below.