How to optimize your LCP (with visuals!)
Tags: javascript, webdev, performance
Published: 2022-03-29 21:14:09

Largest Contentful Paint, or LCP, is a measurement of how fast your pages load. But it has even more significance: it impacts not only your user experience (namely: bounce rate), but also SEO

It can be hard to optimize without a bit of guidance, so I hope the below tips help you out:

## How LCP is measured

First, how exactly is LCP measured. From [web.dev](https://web.dev/lcp/):

> The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading

![LCP definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbvgo9dpjxu1jbdd2ljl.png)

## Use a CDN and pregeneration

As much as possible, serve all pages and content pregenerated from a CDN cache. This ensures that response times are fast, and content can be visible as quickly as possible

Learn more:  https://web.dev/optimize-lcp/#route-users-to-a-nearby-cdn

![CDN optimization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apdh76e0kbvmruhycdbo.png)

## Preconnect to important origins

Preconnect to external domains to establish early connections to important origins using `<link rel="preconnect">`:

Learn more: https://web.dev/uses-rel-preconnect/

![Code example of preconnecting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jagvce5fc2ta5ep2dkot.png)

## Optimize your images

Importantly - be sure to optimize and prioritize your images. Use nextgen formats, optimal sizing, and eager prioritize your LCP image and lazy load others

This thread goes into great detail on recommended image optimization best practices:

{% embed https://twitter.com/Steve8708/status/1506281613746917394 %}


## Remove blocking JS

It's 2022, there is no good reason to use blocking JS anymore. Make sure to load all JS asynchronously, or even better, in a worker with [Partytown](https://github.com/builderio/partytown)

Learn more: 
- https://web.dev/optimize-lcp/#render-blocking-resources
- https://web.dev/efficiently-load-third-party-javascript/

![Remove blocking JS code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw32yk1mjef87u568oy2.png)
 
## Remove blocking CSS

Similarly, as much as possible, remove blocking externally fetched CSS.

CSS-in-JS libraries like styled-components or emotion can help a lot with this, or tools that can extract and inline critical CSS.

Learn more: https://web.dev/extract-critical-css/

![Remove blocking CSS code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eatehjdru74k78w9cxio.png)
 

## Reduce JS execution

JS execution time can really hurt your LCP time as well. Be sure to optimize your site or app to require as little JS as possible to boot up. 

Some projects that can help automate this for you include [Qwik](https://github.com/builderio/qwik), [Partytown](https://github.com/builderio/partytown), [Marko](https://github.com/marko-js/marko), and [Astro](https://github.com/withastro/astro)

![Low-JS frameworks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhy2sulxsth1rrr98sj6.png)
 

## Use API-driven services

Then, no site is complete without ways of managing and optimizing content. As much as possible, prefer API driven services for best performance, as opposed to those that require in-browser JS.

Some great services for managing content, assets, and tests include [Builder.io](https://www.builder.io/), [Cloudinary](https://cloudinary.com/), [LaunchDarkly](https://launchdarkly.com/), and [Contentful](https://www.contentful.com/)

![API-driven services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04764hvkmw5o2sf8dbg5.png)
 

## Measure, measure, measure!

Be sure to measure your LCP on real world emulate devices (read: not your powerful desktop computer!). Some great tools for this

- [Builder.io performance insights](https://www.builder.io/c/performance-insights) - can tell you what can have the most impact to improve
- [Google Pagespeed Insights](https://pagespeed.web.dev/) - can give a lot of great granular suggestions
- [WebPageTest](https://www.webpagetest.org/) - can let you dive deep into your performance from a wide variety of devices, browsers, and locations

## Next Steps

To explore more about optimizing your LCP - this is a [great post](https://web.dev/optimize-lcp/) going into more detail on many of the topics mentioned above!

PS - this post was inspired by this [great tweet](https://twitter.com/filrakowski/status/1504842311083114520) from Filip Rakowski, go follow him!