How to Improve Largest Contentful Paint (LCP)

Improve Largest Contentful Paint (LCP)

Facing the Largest contentful Paint problems and want to fix them?

Well, as we know, Google launches Core Web Vitals in May 2021. And Pagespeed becomes a ranking factor.

Let’s be friendly with Core Web Vitals.

Core Web Vitals is part of Google’s page experience score Which also includes things like mobile optimization, having HTTPS on your site, and so on. We have published detailed article on Core Web Vitals.

Page experience is part of Google’s effort to deliver the best possible experience for its users.

And that means recommending fast websites to its users in the search results.

But why should you care about this stuff?

First, because Core Web Vitals is part of the actual Google ranking algorithm from May 2021.

Second, Google wants happy users. And when you make life easy for Google, they rank you higher.

Third, because pleasant web experiences better convert visitors into buyers.

Google found that users are 24% less likely to abandon web pages when they meet the Core Web Vitals standards. Now, do you need to stop everything? Is that what you are doing right now just to fix Core Web Vitals?

But as you know, SEO is a battle of edging out in front of your competitors using any advantage you can get. Everyone is using tools like Surfer these days to optimize their content. Everyone is building good links.

But you’re going to be one of the few people that optimizes for Core Web Vitals, giving you that edge. Understanding it can be a little bit tricky, but this article is to make it very simple.

So let’s know…

What Is Largest Contentful Paint (LCP)?

The largest contentful paint is a Core Web Vitals metric and the largest element on your Website’s Page, and it could be text such as paragraphs. This can be images, videos, or scripts.

And the way it works is that The largest contentful paint can change page loads over time.

Largest Contentful Paint Example on cnn.com

So I’ve put up an image on the screen above here, which shows highlighted by the green box that as the page progresses for its loading process, the largest contentful paint changes from text to image.

How to Improve Largest Contentful Paint?

1. Optimize Images

Indeed, beautiful images can make the content look more memorable. But were you aware that images can slow down a website? Sites that have lots of images are likely to experience this problem. 

Yes, high-quality images take longer to load and eventually slow down your site.

There are two ways to reduce image size without compromising quality: use a WordPress image optimization plugin, or adjust the image size. For the first method, you can use a WordPress plugin called Smush.

2. Reduce Server Response Time

One of the best ways to improve server response times on your website, focus on learning how to improve Time To The First Byte (TTFB).

Reducing TTFB can help ensure that your site loads and visitors browse as quickly as possible, making it less likely that they’ll abandon it.

What is TTFB?

TTFB is the time it takes to receive the first byte of data from the server. In other words, this metric calculates the duration from an HTTP request (when entering a website address in a browser or clicking a website link) until the server responds to your request.

Then, what is the difference between TTFB and load time (total website loading time)?

So, TTFB is part of the load time. If the TTFB only calculates the time from the HTTP request until the server responds, load time measures the time it takes from the HTTP request to the full website page.

Easy Ways to Reduce TTFB

Now that you know your website’s TTFB number, what should you do next?

Relax. Below we will explain some tips you can do to reduce TTFB.

You can apply all these tips at once to get maximum results.

  1. Using Fast Web Hosting
  2. Make use of cache plugins
  3. Updating Themes and Plugins
  4. Using a Content Delivery Network (CDN)
  5. Using Premium DNS Services

1. Using Fast Web Hosting

Before creating a website, of course, you have to choose the right hosting provider. Well, this decision will affect the TTFB of your website too.

To support the performance of your WordPress website, choose reliable WordPress hosting. 

Make sure the hosting provider offers reliable website speed optimization features and server specifications.

2. Make use of cache plugins

Caching is one of the most effective ways to reduce server response times. With this method, your website visitors don’t need to load your web site’s static content a second time because the website files are already stored locally in their browser. 

In other words, website visitors only need to load static content on your website the first time they visit. Furthermore, the loading process will be noticeably faster.

This method does not only affect the overall load time. The TTFB will also be shorter because the time it takes to wait for a server response is faster.

There are two ways to enable caching. You can add code to your website or use plugins.

3. Updating Themes and Plugins

This is a straightforward but sometimes overlooked tip. In fact, the developers of the themes and plugins you use are always trying to improve security and effectiveness through updates. 

So, every time you get an update notification, do it as soon as possible.

In addition, new themes and plugins will also affect the performance of your website. Therefore, delete the ones you are sure you no longer use.

Don’t forget to update your WordPress too. WordPress developers not only increase security and features when updating but also speed. 

4. Using a Content Delivery Network (CDN)

A Content Delivery Network (CDN) can help you send static content to visitors more quickly through a network spread across various countries.

This can solve problems that arise due to remote server locations.

Using a CDN will feel very essential if your target audience is spread abroad.

5. Using Premium DNS Services

One of the factors that affect the TTFB is the duration of the DNS lookup when making HTTP requests. Using premium DNS services, the DNS lookup process will be faster because a global DNS server network supports it.

Choose a premium DNS service that suits your website needs. Some examples of well-known premium DNS service providers are Cloudflare DNS and Google Cloud DNS.

3. Render-blocking JavaScript and CSS

To understand these instructions further, we must look at Google’s criteria for scoring sites on PageSpeed ​​Insights. 

There are ten rules regarding the loading speed of websites that Google has set, and if you fail to implement any of these rules, it will result in a point or score deduction.

Render-blocking JS and CSS in above-the-fold content is one of these ten rules. In particular, the JS and CSS scripts force the web browser to delay loading HTML pages.

Of course, this is no big deal. That’s what you really want; no one wants to see content that is not yet styled.

However, render-blocking JS and CSS refer to these scripts, which carry loading latency but are not used in above-the-fold (ATF) content.

ATF content refers to the part of a web page that is visible when the page loads; every aspect of the page that has to be scrolled down is non-ATF.

So, through these pointers,  Google would like to inform you that there is a JS and CSS script on this web page that is slowing down unnecessarily on the web page, as the part of the page being slowed down cannot even be observed by the user.

4. Load CSS after HTML loading

In order for the CSS to load after the full HTML is submitted, Google recommends this code snippet to be added at the end of your HTML, for example after the closing footer tag and before the closing body tag:

<script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = './style.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script>

To optimize your website, it is also a good idea to remove unused CSS code, an operation that can be tedious if you do not know web design.

If you haven’t created your website theme, it might be wise to use an external system to remove unused CSS code on your pages on your behalf, such as Ezoic Leap, for example, a new (and completely free) version of their external site.

5. Preload Important Assets

If you think that a particular resource on a page should be prioritized, use <link rel=”preload”> to load it sooner. Many types of resources can be preloaded, but essential assets should be loaded first, such as fonts, critical-path CSS or JavaScript, and above-the-fold images or videos.

To preload images, videos, scripts, and web fonts, add below given Code to the <head> of the document.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Conclusion!

We have discussed many effective ways like optimize Images, reduce server response time, Render-blocking JavaScript and CSS and Preload Important Assets etc, to improve Largest Contentful Paint (LCP).

What do you think? Which way is more & more important to improve largest Contentful Paint? Don’t hesitate to Share your thoughts in the Comment box.

As you know, Largest Contentful Paint is the main factor of Core Web Vitals if you need help with this, the team here at WebVitalsDev is more than happy to help you. You can either drop us a message through the email or contact form.

We have a development team that fixes CWV (Core Web Vitals) errors for our clients. So drop us a message or see our Pricing if you’re struggling with Core Web Vitals stuff, and we’ll fix all Core Web Vitals errors for you.

If you enjoyed this article, Don’t forget to share!

Leave a Comment

Your email address will not be published. Required fields are marked *