Performance Audit is an important method to measure website performance analysis, while performing a performance audit on any tool, it shows a warning as Defer Offscreen Images.
Further down, we will discuss what “defer offscreen images” warning, its causes, and how to defer offscreen images.
What is Defer Offscreen Images?
“Defer offscreen images” refers to a technique used in web development to improve performance.
To defer offscreen images means to delay the loading of images that are not immediately visible on the screen when the page loads.
Defer offscreen images help to load the critical resources above the fold and then load below-the-fold (offscreen) images.
Above-the-fold content is visible on the webpage when a page loads; below-the-fold means the content only loads when a user scrolls.
Deferring off-screen images also contributes to the other performance metrics such as LCP, INP, and FCP.
Why Should You Defer Offscreen Images?
You should defer offscreen images for the following reasons, It provides several benefits for web developers and users.
You can improve the initial page load time by stopping loading images that are not important.
Loading only the visible content reduces unnecessary bandwidth usage. This can be particularly useful for users on limited data plans or in areas with slow Internet speeds.
Faster load times and reduced bandwidth consumption provide a good user experience. Users are more likely to interact with your website if they have a good experience.
Mobile devices generally have smaller screens and slower connections compared to desktop devices. Deferring off-screen images helps optimize your website for mobile users by prioritizing visual content.
Faster load times can indirectly improve your website’s search engine optimization by reducing bounce rates and increasing user engagement. Google and other search engines consider user experience factors while ranking.
Tools to Check Defer Offscreen Images Warning
To check for warnings related to deferring offscreen images, you can use various tools that analyze website performance and provide recommendations for optimization, Here are some popular tools:
Google Lighthouse:
Lighthouse is an open-source tool developed by Google that monitors websites for performance, accessibility, SEO, and more. It is built into Google Chrome DevTools and can be accessed by opening DevTools, going to the “Audits” tab, and running a performance audit.
PageSpeed Insights:
PageSpeed Insights, analyzes the performance of web pages on mobile and desktop devices.
It offers suggestions for improving page speed, including suggestions for deferring images off-screen.
If the Defer offscreen Images warning is cleared then you will get it as passed audits.
GTmetrix:
GTmetrix is a website performance testing tool that provides insights into page speed and optimization.
Pingdom Website Speed Test:
Pingdom provides a website speed testing tool that analyzes your website’s performance. It highlights things like raw images, including those behind the screen.
Chrome DevTools:
In addition to Lighthouse, Chrome DevTools itself offers a range of performance analysis tools.
You can monitor network activity, analyze rendering performance, and identify potential image-loading issues, including on-screen images.
How to Defer offscreen Images?
There are four easy ways to defer offscreen images they are,
1. Implement Lazy Loading
Lazy loading is a technique to stop loading images until they are needed.
Instead of loading all images when the page starts loading, lazy loading will load images as the user scrolls down the page.
This approach prioritizes the loading of viewable content, improves page loading time, and reduces unnecessary bandwidth usage.
If you are coding your website from scratch, use lazy loading using the loading=”lazy” attribute of the <img> tag.
This feature instructs the browser to lazily load the image when it comes into view.
For existing websites, consider using JavaScript libraries or frameworks that provide lazy loading functionality, such as LazyLoad.js.
Make sure not to impose a lazy load on images above the fold, this will increase the time of First Contentful Paint Metric which in turn leads to poor performance of the webpage.
2. Utilize Intersection Observer API
The Intersection Observer API is a powerful tool for successfully detecting when objects such as images are entering or leaving a viewport.
Using this API, you can delay placing images on the screen until they are about to be viewed, thus optimizing performance and improving the user experience.
Use the Intersection Observer API to create a callback function that will load images as they intersect a viewpoint.
To do so,
Use the IntersectionObserver object and define the thresholds to trigger image loading.
Add event listeners to view specific objects, such as images, and execute a callback function when they pass with a view station.
3. Defer offscreen images using WP Plugins
There are many plugins available for WordPress and other website platforms that simplify the process of deferring images off-screen.
These plugins typically offer user-friendly interfaces and customizable layouts, making it easy for website owners to modify their images without much coding skills.
Most website designers use WP Rocket because of its easy user interface.
Hop on to the WP Admin dashboard,
Install the plugin, if already installed, activate the lazy loading plugin such as WP Rocket or Lazy Load by WP Rocket.
Configure plugin settings for lazy loading for images and other media types.
Test your website to make sure the lazy loading is working properly and the images are lazy loading.
Best Practices for Defer Offscreen Images:
Deferring offscreen images is crucial for improving website speed and user experience.
Here are some best practices to achieve optimal performance:
- Lazy Loading:
Implement lazy loading for offscreen images so that they are loaded only when they are about to come into view, rather than loading all images at once. This can reduce initial page load time.
- Responsive Images:
Use responsive image techniques to serve appropriately sized images based on the user’s device and viewport size.
This prevents unnecessary bandwidth usage and ensures that images look good on all devices.
- Image Compression:
Compress images to reduce file size without reducing quality. Tools like ImageOptim, TinyPNG, or Squoosh can help in compressing images effectively.
- Use the Correct Image Formats:
Choose the appropriate image format based on the content of the image.
For example, use JPEG for photographs and PNG for images with transparency. WebP is also a highly efficient format for web images, providing better compression and quality.
- Optimize Cache-Control Headers:
Set cache control headers for images to leverage browser caching. This reduces the number of requests made to the server for images that haven’t changed since the last visit.
- CDN (Content Delivery Network):
Utilize a CDN to deliver images from servers closer to the user’s location, reducing time and speeding up image delivery.
- Preload Critical Images:
Identify critical images that are necessary for the initial rendering of the page and preload them to ensure they are available when needed.
- Progressive Loading:
Load images by displaying a low-quality placeholder first and then gradually loading higher-quality versions. This gives users a sense of faster loading and improves performance.
- Optimize Offscreen Image Loading:
Prioritize loading of offscreen images based on their position in the viewport. Images that are closer to the viewport should be loaded first.
- Use CSS Sprites:
Combine multiple small images into a single sprite sheet and use CSS to display specific portions as needed. This reduces the number of HTTP requests and improves loading speed.
- Minimize DOM Manipulation:
Avoid manipulating the DOM excessively when loading offscreen images, as this can cause layout problems and degrade performance.
Instead, use efficient JavaScript techniques to handle image loading.
- Monitor and Analyze Performance:
Regularly monitor website performance using tools like Google PageSpeed Insights, and analyze the impact of offscreen images on overall performance.
Make adjustments as needed to optimize loading times.
By following these best practices, you can provide optimal performance of offscreen images, leading to faster loading times and a better user experience for your website visitors.
Conclusion:
Defer offscreen images is a critical performance metric, consider optimizing it in a better way to increase the performance score of the webpage.
Use appropriate plugins and it is an easy way to handle many warnings in the performance metric analysis.
