6 posts tagged with "Image Optimization"

Deferring offscreen images is a web performance optimization technique that can help you improve user experience and Core Web Vitals on your site. Also known as lazy loading, it downloads out-of-view images only when they're about to appear in the user's viewport. Deferring offscreen images is especially important on image-heavy websites.

In the past, lazy loading was a complicated process that involved either the manual setup of JavaScript event listeners together with viewport calculations, or the integration of a third-party library. However with the introduction of the loading HTML attribute and the IntersectionObserver browser API, the situation has improved a lot.

'Responsive images' is an umbrella term for a number of image optimization techniques that allow web designers and frontend developers to reduce page weight, improve site speed, and enhance user experience.

As image weight impacts your Largest Contentful Paint score, one of Google's Core Web Vitals metrics included in its search algorithm, you can also improve your SEO rankings by using responsive images.

Since images are a key aspect of web performance, in this article, we'll look into responsive images in detail, including their pros and cons, a handful of code examples, a couple of recommendations, and a bit of theory related to the subject.

Choosing the right image file type is an often overlooked, but key aspect of image optimization. The importance of using performant yet high-quality images is also reflected by Lighthouse's Serve images in next-gen formats audit, which is one of its web performance signals designed to help developers and website owners improve user experience and web performance.

While serving images in next-gen formats is a huge opportunity to improve web performance, these new image formats are not always the best option. Sometimes you can be better off using other image file types. For example, the lossless versions of the WebP and AVIF formats have questionable performance results while lossy WebP and AVIF perform great.

I was recently looked at the speed of the Waitrose homepage and was surprised by its massive uncompressed HTML document size: 3.5 MB.

This article takes a look at how images make the document so big and asks if this reduces site speed.

I recently made some performance improvements to the DebugBear homepage. This article explains how to use the loading="lazy" HTML attribute to make your website render more quickly.

The Element Timing API lets you track when images appear on the screen.

While this could be done with JavaScript, the Element Timing API is more accurate and doesn't require blocking JavaScript execution.