Thread by @remkusdevries

Did you know LCP makes up for 25% of the Google Lighthouse score of your #WordPress site? That's a huge chunk that when optimized correctly gives

Let me explain what Largest Contentful Paint (LCP) is, and what you can do to improve it:

If you're reading a book and the most interesting part of the book, the hook, takes too long to get to, it can make reading the whole book less enjoyable. So much so you'll not want to finish it.

LCP is like waiting too long for that part.

So...

Similarly, if the biggest and most important part of a website takes too long to load, it can make the whole website experience less enjoyable. If the wait is too long, people just stop waiting and move on.

How to fix this? Here are the most important ways to fix this:

Minimize the size of the resources that are being loaded on the page, such as images and fonts. This can be achieved by compressing and optimizing these resources.

Defer the loading of non-critical resources, such as third-party JavaScript scripts, that are not needed for the initial render of the page.

This can be done using the defer or async attributes on script tags.

Have the browser preload critical resources that are needed for the initial render of the page, such as fonts and key images, using the link tag with the rel attribute set to preload.

Minimize the number of requests that are made to load resources, such as by combining multiple CSS or JavaScript files into a single file.

Tools like @wp_rocket and @_perfmatters can help you with those, for example.

This should be a no-brainer by now, but use a Content Delivery Network (CDN) to serve resources, reducing the time it takes for the browser to download resources by reducing the physical distance between the browser and the server. I use @cloudflare for this.

Make sure you utilize browser cache to store resources. This prevents a browser to have to download assets again (for repeat visits).

Focus on lazy-loading of images, iframes and videos. This prevents the browser from having to download superfluous assets.

Use WebP image format instead of JPEG or PNG. And lastly, my favorite: reduce the time it takes to generate, and serve the initial HTML by optimizing the backend process and database queries. Make sure you time to first byte (TTFB) is as short as possible.

Curious how I could help you or your clients? Hit that link in bio and let's start that conversation.

If you enjoyed this thread, please

① Retweet the tweet below to share this thread with your audience
② Follow me @remkusdevries for more of these

🙏🏻🤩

https://twitter.com/remkusdevries/status/1617604623119912960