The Importance of image optimization for Core Web Vitals
As websites continue to become more complex, optimizing images has become increasingly important for meeting user needs and improving performance. Sites that load fast prioritize the resources a user needs when they need it. With the introduction of Core Web Vitals, which includes metrics like loading speed, interactivity, and visual stability, it's essential that websites prioritize image optimization to ensure they meet user needs and performance standards.
Images Impact Core Web Vitals
Images can impact each Core Web Vital metric in different ways, depending on how they are optimized and loaded on a web page.
Largest Contentful Paint (LCP): LCP measures the loading speed of the largest element on a web page, such as an image or video. Large images that are not properly optimized can significantly impact this Core Web Vital metric.
INP (Interaction to Next Paint) which replaced First Input Delay or FID is focused on web page interactivity. Both metrics seek to give insights into user interactions and both can be impacted by images. INP takes into account subsequent interactions where FID only considered the delay associated with the first user encounter. INP considers all user interactions that occur during a user's visit to the webpage and produces a final value that represents the longest interaction, disregarding any outliers.
Cumulative Layout Shift (CLS): CLS measures the visual stability of a web page, or how much the layout shifts as content loads. Images that load after other content, or that are not properly sized, can cause layout shifts.
Now that you understand the impact images can have on Core Web Vitals, let’s dive into each metric.
Maximizing Largest Contentful Paint Performance Through Advanced Image Optimization Strategies
Largest Contentful Paint (LCP) is a crucial metric for website performance, as it measures the time it takes for the largest element on a web page to become visible to the user. Large or unoptimized images are often the biggest culprit or the main source of LCP issues. They tend to drag down the loading time of a page.
“Often this is the hero image or the title text.” - Barry Pollard
The good news? There are a lot of “easy” tweaks that can be implemented by web developers to handle this.
Image elements considered for LCP
The following are the different image elements that are considered for Largest Contentful Paint (LCP) optimization:
Image size: Large image sizes can cause longer load times and negatively affect LCP.
Image format: The format of an image can affect the time it takes to load, with certain formats like JPEG and WebP being more efficient than others like BMP or TIFF.
Lazy loading: This technique delays the loading of off-screen images until they are needed, which can help improve LCP. However, Images that are expected to be in the viewport,should not be subject to lazy loading.
Image compression: Compressing images to reduce their file size can also help improve LCP by reducing the time it takes for them to load.
Image loading priority: Ensuring that the largest image on a page is loaded first can also help improve LCP.
Improving a poor LCP score
Here is a detailed list of elements to consider for LCP when it comes to images. It’s courtesy of Aymen Loukil, performance expert and founder of Speetals, a tool that can help you achieve all of this:
Choose the right format and the right compression algorithm
Always precise the width and height attributes
Use fetch priority hints: high for LCP image
Never lazy load the LCP image.
Use loading="eager" attribute on it
Preload (link rel preload) the image link to prioritize its loading
If your images are hosted on a different subdomain, add a preconnect hint in your head to accelerate the TCP connection with it.
A note on lazy loading LCP images
Lazy-loading is an effective technique to delay non-critical resources but it causes problems when it comes to LCP images. It effectively prevents the browser from loading the image immediately. Some lab tests have shown that it can cause up to a 15% regression in LCP performance.
Identifying the largest contentful paint element
In order to improve your website's Largest Contentful Paint (LCP) score, it's important to identify the element causing the delay. Fortunately, WebPagetest can help you quickly find the LCP element for any page. Here's how to do it with Oncrawl:
Going above and beyond when it comes to LCP
“When the LCP element is an image, which happens 72% of the time on mobile devices according to the 2022 Web Almanac, it’s critical to ensure that it’s rendered as quickly as possible.” - Estela Franco, Google Developer Expert in web technologies
Another important element many of us disregard regarding images’ impact on LCP is background images. “Background images above the fold are horrible for LCP. Avoid them if you can” - Nati Elimelech, head of SEO at Wix.
Another drastically different take by Samuel Lavoie questions using images at all: “No one cares about your fancy images when they are trying to accomplish something; remove non-useful images”.
Priority Hints can help optimize the Core Web Vitals. The fetchpriority attribute allows you to provide a hint regarding the priority of a resource. Boost the priority of the LCP image by specifying fetchpriority="high" on the image element, causing LCP to happen sooner.
Optimizing for Cumulative Layout Shift from Images
Cumulative Layout Shift (CLS) is a metric that measures the amount of layout shift that occurs on a web page during the page load process. Shifts can be caused by factors ranging from images to ads loading slowly. Basically, whatever causes the content on the page to move around within the viewport could be causing a CLS issue.
A common issue: images missing dimensions can cause layout shifts
Modern browsers set the default aspect ratio of images based on height and width attributes. The browser relies on specified width and height for an image to know how much space to reserve for said image until it’s downloaded. If image dimensions are not available, this could cause layout shifts because the browser doesn’t know how much space the image will require.
Source: Image Optimization by Addy Osmani, page 27
Take it from Mark Williams-Cook: “If you implement lazy loading images, make sure you’re placeholding sizes or you’ll fix LCP issues but create CLS ones, trading one issue for another!”
Identifying elements that shifted
It's important to identify the elements that are shifting and causing the layout instability. You can use field tools or lab tools to do that.
Lab tools, such as Google Lighthouse, WebPageTest, and GTmetrix, measure CLS in a controlled environment using synthetic tests, providing accurate and detailed measurements of CLS. Lab tools provide detailed information.
Field tools, such as Google Analytics and the Chrome User Experience Report (CrUX), measure CLS in real-world user environments, providing data on how CLS is affecting actual users in the wild. Field tools provide insights on how CLS affects real-world users.
Field tools
A field tool that can help with this is the Layout Instability API, which provides a JavaScript interface for measuring and reporting layout shifts. By implementing this API on your website, you can get more detailed information about the elements that are shifting and causing CLS. You need to implement a few lines of code to your page and check out the full article regarding the API.
Lab tools
A lab tool you can use is the browser's DevTools, specifically the "Changes" tab in the Performance panel. This tab shows all the layout shifts that occur during page load and provides a visual representation of how the page changes over time. By analyzing this information, you can identify the specific elements that are shifting and causing the layout instability.
By identifying and addressing the image issues that are causing layout shifts, you can improve the CLS score and provide a better user experience for your website visitors.
Going above and beyond when it comes to CLS
Here are some considerations regarding images when it comes to CLS:
Images loaded dynamically using JavaScript may cause layout shifts if loaded asynchronously.
Ads and embedded content such as social media widgets can also cause CLS issues if loaded asynchronously.
Images with different aspect ratios loading in a container with fixed dimensions also cause issues because the container may need to adjust its size to fit the image.
Images above the fold can often cause layout shifts if they are large or take a long time to load.
Another thing to consider: icon fonts present a unique challenge when it comes to optimizing font-display strategies. Unlike traditional web fonts, fallback fonts for icon fonts can look drastically different and their characters may convey a completely different meaning. This can result in significant layout shifts, making it harder to ensure a smooth and consistent user experience.
Want to know everything about CLS? Check out the official Google Documentation on the topic.
Optimizing Your Website INP
Interaction to Next Paint is another metric to consider. It is a part of the BigQuery Crux API dataset and goes beyond pageload, diving headlong into user flow.
“INP is more challenging than FID to ‘get into the Green’. Since INP is a more comprehensive measure of interactivity, web sites are more exposed, and less likely to score favorably.” - William Woodhead, CloudFlare Blog
Here are some elements to consider for INP:
Scrolling through a product image gallery to view additional photos.
Clicking an image to view a larger version or open a lightbox.
Tapping an image to play a video or GIF.
Using an image slider or carousel to browse through a collection of images.
Scrolling through a large image or infographic, with the use of zoom or pan functions.
Interacting with a dynamic image map, where different regions of an image can trigger different actions or links.
Suspiciously large images that trigger a decoding process that stalls the rendering process.
Injected click events that include an <img> tag
All of these actions involve user input. INP measures visual feedback that comes with user input. It considers latency of all interactions (click, tap, etc.) happening throughout the user’s visit on a page.
Identifying INP issues
Identifying INP issues is crucial. You have to determine the specific interactions that contribute to the page's INP. Rely on field data and subsequently conduct laboratory testing to determine the cause of the slow interaction.
The key when it comes to images is to avoid using large image files that require extensive decoding resources. In most cases, image decoding is not a significant performance issue. However, if you are dealing with a large image, the decoding process can become a significant bottleneck. When a large image is decoded, it can take longer to complete the process, which can delay the rendering of subsequent frames. This is because image decoding is typically a synchronous operation by default. As a result, the browser must wait for the entire image to be decoded before continuing with the next task. This delay can cause the page to appear unresponsive and slow, leading to a poor user experience. To address this issue, you can use techniques like asynchronous decoding or progressive rendering.
You should also pay attention to click events that insert HTML into the page, including an <img> tag. During this process, the following steps occur:
The event callback function is executed, and the HTML is injected into the DOM.
The browser recalculates the styles of the affected elements due to the DOM injection, which may cause a slight delay.
The newly inserted image is decoded, which can take some time depending on the size and format of the image. This is where INP issues can occur.
Using the timespan mode in the Lighthouse Panel of DevTools allows you to initiate Lighthouse and interact with your test page according to your preferences, before generating a report detailing the events that occurred during that time. The report now incorporates INP, as well as an audit to assist with identifying any issues related to responsiveness.
Cloudflare also offers free INP data with their RUM provider. If you use this CND, you can enable this and keep an eye on interactivity issues.
A quick note on CDNs and caching
“Using an image cdn can result in 40–80% savings in image file sizes, and many image CDNs support automatic election of the best quality and format, image transformation, and media management.”
Using a CDN can help INP indirectly as it reduces the time it takes for the browser to receive the website's content, including images. Since you are relying on a network of servers that are geographically distributed around the world, thus reducing the distance between the user and the server. This means that the content is delivered faster to the user, resulting in improved FID.
CDNs can also cache content, meaning that frequently accessed content can be stored closer to the user, reducing the number of requests. It can also help distribute traffic across multiple servers, reducing the load on any one server and improving overall website performance.
Going above and beyond when it comes to INP
Here is key advice from web.dev optimization article from Jeremy Wagner and Philip Walton: use the web-vitals JavaScript library to identify sluggish interactions in the field data
Dealing with images that require extensive decoding resources? One way to do this is by using lazy loading, which defers the loading of images until they are needed, reducing the number of images that need to be decoded on page load.
If you want to cover all your bases, make sure your images are optimized, properly sized for the viewport, and use more efficient formats—basically all the image best practices. Source: Jeremy Wagner.
What if you must deal with massive image file sizes? Ensure the main thread isn't blocked by an expensive image decode by using HTMLImageElement.decode.
Conclusion: best practices to keep in mind for Core Web Vitals
“Why are my Core Web Vitals failing?” Sometimes, it’s because of images! In conclusion, optimizing images for Core Web Vitals is an essential step if you want to improve. By focusing on image size, format, and loading techniques, you can reduce loading times, improve interactivity, and increase visual stability, ultimately leading to a better browsing experience. By addressing these metrics through image optimization, you can improve the overall performance of any website and ensure that it meets the standards set by Google users alike. The key to success is to measure and monitor using real user data to validate the results of your optimizations. This will also help you prioritize any planned improvements as part of your roadmap.
Comments