Largest Contentful Paint (LCP) is the measurement of how long a browser takes to render the largest text or image block in the viewport. More simply, it estimates how soon users can see above-the-fold content.

In this article, we look at techniques that improve LCP render times.

Quickly jump to a topic:
Critical CSS and Asynchronous Asset Loading
Optimize images
Reducing server response time

Critical CSS and Asynchronous Asset Loading

Critical CSS is the set of styles required to display the page’s structure, look, and feel displayed in the viewport or above-the-fold. These are the only styles that should be loaded synchronously on any given page, embedded into the HTML output, not a separate file.

There are plenty of tools to generate a page’s critical CSS. Typically, building critical CSS generation into a pre-processor system for the web application makes the most sense. Node.js libraries like critical and critical-css are popular solid options. Some online apps and tools can generate it for you.

The rest of the CSS for the page should be loaded asynchronously after page load. That eliminates CSS as a render-blocking resource and streamlines the browser’s ability to download and render the necessary assets to show the above-the-fold content as quickly as possible. That is Largest Contentful Paint.

Portent utilizes Autoptimize to handle our asynchronous CSS loading, which implements the loadCSS library by the Filament Group.

It is also important to asynchronously load (or defer) JavaScript. That eliminates JavaScript as a render-blocking resource. Eliminating render-blocking resources is an essential foundational topic for most of the Core Web Vitals metrics. We discuss it in further detail in our article about improving First Input Delay (FID) and First Contentful Paint (FCP).

Optimize Images

First time optimizing your site for speed? Start with images. Quite often, images will be the first, biggest bandwidth hogs. They’re also some of the most significant, easiest speed improvements you can make because the fewer assets there are to download, the faster.

Images are almost always found in above-the-fold content, so it is important to optimize them for the web. Using the right type, compressing, and properly sized images will reduce extra bloat your browser will have to download, which will aid in a faster LCP score.

#1: Use the Right File Format

There are two widely-used image file formats:

JPEG or JPG (Joint Photographic Experts Group, pronounced jay-peg) refer to the same image format. We’ll use ‘JPG’ here. JPG files should have the file extension .jpeg or .jpg. JPG is usually best for images with thousands or millions of colors, like photographs. Those tend to be the biggest files, and JPG is a compression powerhouse.

Use JPG for photographs and photographic images. JPG is known as lossy compression. It reduces file size by removing data. That’s why JPG compression is so effective for humungous, many-colored images. It deletes data. That can reduce quality, but done right, JPG compression is nearly undetectable.

PNG (Portable Network Graphics, pronounced ping or pee-en-gee) is ideal for line-art and other images with fewer colors.

All of these file types refer to the way the image files are compressed.

Use PNG for line art or images where your design requires transparent backgrounds. PNG is a lossless file format. It works by rearranging data to more efficiently use file space. It doesn’t reduce the photographic image file size that much. But for line art and images with few colors, it’s fantastic. And it preserves transparency.

Choosing the right format makes a huge difference.

Here’s an entirely uncompressed photograph:

Here’s a photograph compressed using PNG. The file size is actually larger:

Clearly, JPG is the best format for photographs like this.

PNG, though, excels with simpler images and icons. Here’s the Portent logo as a transparent PNG. It’s a 12kb file:

And here it is as a JPG. It’s almost 2x larger, at 22kb:

Choosing the right format has an immediate impact.

#2: Compress Your Images

Choosing the right format is the first step. Use that format’s compression algorithm, and you can see even bigger savings.

You can increase or decrease the ‘lossiness’ of jpg compression. Remember the previous example? That image was 2.7 megabytes in JPG format.

Compress it 20%, though, and you can get the file size down to 400kb.

Hard to tell the difference, but it’s less than one-sixth the size. That’s a huge savings.

You can go too far with JPG, though. The more you compress, the more data JPG removes, and the more the image starts to look like this:

It’s a balancing act. Compress as much as you can but always be aware of context. It’s not just about speed, after all. Images are there to deliver a message. A pixelated image may not deliver the message you want.

You can also change PNG 32 to PNG 24 to PNG 8. Each removes colors from the image. Here’s the Portent logo again, still transparent but converted from a PNG 32 to a PNG 8. It’s now 7kb:

A caveat: PNG may be the better format for really small photos.

Testing and Compressing Images

You can use Google Page Speed to test images on your page. Run Page Speed Insights. Then look for ‘Efficiently encode images.’

If ‘efficiently encode images’ does not appear under ‘opportunities,’ nice! You don’t have to worry about your images. If you’re like the rest of us, though, you’ll see a few:

You can see all of the compressed images you need on the page. Handle these and see your performance scores improve.

Image Compression Tools

If you want more effective compression than Google Page Speed Insights will provide, use one of these tools:

1. Adobe Photoshop. Professional image software.
2. Squoosh. Popular free and web-based compression app.
3. EWWW Image Optimizer. A quality (and free) image optimization plugin for WordPress.
4. Imageoptim on the Mac. Far and away the best easy-to-use image compressor you’ll find. It’s what we used for the examples above.
5. Caesium on the PC. Not quite as easy, but still awfully good.

We ran Imageoptim PNG optimization on our 8-bit PNG logo, and it reduced it by 2kb to 5kb:

#3: Resize Images

Images on a web page have dimensions: Width and height. You can set those dimensions two ways:

• Using your photo editing software
• Using the HTML IMG tag’s height and width attributes

If you use the latter to squash an image down to size, you’re wasting bandwidth. Say you’re displaying a 400 x 400 pixel image on your page, and the original is 1200 x 1200 pixels.

If you deliver that file at 1200 x 1200 pixels and then set the IMG height and width attributes to 400 x 400, you’re still delivering the larger file and using all that bandwidth.

Resize it in your photo editor, though, and you deliver the 400 x 400 image.

The difference? Here’s our example image, resized in a photo editor to 400 pixels wide:

Only deliver what you need.

Reducing Server Response Time

Server response time, often known by time to first byte (TTFB), is the time it takes the web server to respond to a browser’s request, which includes the HTML, CSS, JavaScript, font files, and any other assets requested. Reducing the amount of time this takes is a fundamental principle of improving page speed. It will improve all facets of page speed, including Core Web Vitals metrics — Largest Contentful Paint (LCP), First Input Delay (FID), and First Contentful Paint (FCP).

You can make many improvements to your server response times, including page caching, enabling keep-alive, and compressing transferred data. We do a deep dive into server optimizations in our article on how to improve server response times.

Conclusion

Implementing the topics discussed in this article will improve LCP scores, enhance the user experience, and contribute to site conversion goals. When combined with best practices for quickening server response time, improving First Input Delay (FID) and First Contentful Paint (FCP), and reducing Cumulative Layout Shift (CLS), the performance results will be enterprise level.

The post How to Improve Largest Contentful Paint (LCP) appeared first on Portent.