In May 2020, Google officially announced that core web vitals were part of an update to ranking algorithms. Core web vitals include factors that are directly related to the user experience and play an important role in ranking our site. One of these important factors is lcp. Do you know what lcp is and how it can affect the UX and SEO performance of our site?
lcp or Largest Contentful Paint measures the display speed of the largest image element of the site. In addition to being one of the three factors of core web vitals, lcp, after the unveiling of the Page Experience update in 2021, played a more prominent role in improving the user experience and site seo in the mobile and desktop versions. For this reason, we decided to examine lcp in detail in the following article, to introduce its measurement tools and the role of lcp in site SEO. At the end of this article, you will get acquainted with 10 practical and easy ways to improve the site lcp on mobile and desktop.
What is LCP or Largest Contentful Paint?
LCP stands for Largest Contentful Paint and measures the loading time of the largest visual element of the page. You will see almost nothing on the screen until the lcp content is loaded. Because the LCP element is always at the top of the screen and is the first element to be loaded. LCP is usually an image or a text block, but it can also be a video or even an animation. It is interesting to know that the amount of lcp varies between the mobile version and the desktop version of the site in most cases.
But why is LCP so important? Imagine, the largest image or text element of the page does not load quickly, in which case the audience will be left with an almost blank page. At best, it waits a few seconds for the page to load. But are all our users so patient? Certainly not. They are leaving the site!
You see, what an incredible few seconds it can make a huge difference and what a disaster it can bring to our users’ user experience!
Google’s approach to LCP or Largest Contentful Paint
The first and most important reason that Google has made LCP one of the most important criteria for Core Web Vitals is its direct relationship with the user experience of site visitors. In June 2021, LCP was introduced as part of the new ranking factors and as one of the Page Experience signals. For this reason, Largest Contentful Paint is important not only for providing a great user experience, but also for improving the SEO performance of our site.
lcp accounts for about 25% of the total Page Speed Insights score. Images, videos, spreadsheets, image tags, images uploaded via CSS, and any text element are elements that Google uses to evaluate LCP. Google says: If at least 75% of site visits have a “good” lcp rating, the site performance will be acceptable in this criterion. In the following, you will become more familiar with the values and classification of lcp points defined by Google.
What is the best lcp score according to Google?
Google recommends that the site’s lcp be a maximum of 2.5 seconds. This means that if our site’s lcp score was more than 2.5 seconds, we should try to optimize it. If the lcp of a site is between 2.5 and 4.0 seconds, it needs to be improved by Google. But if this score is more than 4 seconds, it should be optimized as soon as possible.
Why is the role of LCP in SEO and user experience so important?
The first and simplest reason for the importance of LCP in SEO is that Google recognizes Largest Contentful Paint as an important ranking criterion. Simply put, if our site loads slowly, we lose one of the most important ranking points, namely site speed. In this regard, we suggest that you read the article ” Site Speed Optimization “ . But for now, let’s look at the main reasons for improving LCP and SEO.
1. Google itself has created and recommended this criterion
The fact that Google has recommended lcp as one of the most important criteria for evaluating the speed of a site, shows its importance. In addition, since May 2020, lcp has become the default factor for evaluating site performance.
2. The loading speed of the site affects its ranking
Google wants the various pages of our site to load quickly in the desktop and mobile versions. After Google started actively using LCP, this also affected the position of sites in the SERP results, and it was found that sites with good LCP and optimal speed, reached a better position on the first page of Google.
3. Largest Contentful Paint also affects the user experience
Lcp also affects the user experience. If the site lcp value is optimal, the site bounce rate will decrease and it will receive a better ranking. Of course, the bounce rate is also affected by other factors, but when other factors are optimal and the site lcp causes a deterioration in the user experience, the bounce rate will increase whether we like it or not.
What factors reduce the positive impact of LCP on SEO?
In the What is LCP section, we said that Largest Contentful Paint is a measure of how long a user waits to display the largest visual or textual element on a site. This criterion is influenced by 3 factors, which we will explain below:
1. Server Response Time
Server response time is the period of time that the server needs to respond to a browser request. When the browser sends a request to the server, if the response from the server is too long, the lcp score will be affected. Because the browser receives the content very slowly and it takes some time to display the Largest Contentful Paint to the user. As a result, loading time is reduced and lcp has a negative effect on site SEO.
2. Block and render CSS and JavaScript
Imagine the browser sent your request and received the content from the server. At this point, the browser renders and displays the content; Why! To deliver any content, the browser must parse the HTML of the page and convert it to readable content. However, if some HTML parsing scripts and procedures are blocked or blocked, this analysis and conversion will be delayed and the content requested by the user will still be displayed with a delay. As a result, lcp function is affected again.
3. Resource Load Times
As you know, the amount of LCP depends on the images, videos and visual elements of the page. If these files are rendered at the top of the page and it takes too long to load, the loading time and lcp of the site will still be lost. In fact, the speed of receiving and delivering the requested content by the browser determines the lcp score and speed and must be optimized.
Before we go into solving the problems caused by these 3 factors and teaching lcp optimization methods, in the next section we want to see with what tools and how we can measure the LCP element.
Get acquainted with the lcp measuring tools of the site
There are several ways to measure the LCP element. Some of these tools measure the Largest Contentful Paint with field data and others with real site data. Here are the most popular tools we can use to check LCP.
Free tools that estimate the lcp value based on real site data :
- Lighthouse
- PageSpeed Insights
- Chrome DevTools
- WebPageTest
- GTmetrix
Tools that calculate lcp with field data :
- PageSpeed Insights
- Chrome User Experience Report
- Search Console – Core Web Vitals report
For people who are new to SEO , we recommend using PageSpeed Insights and Search Console. In the following, along with examples and images, we will teach you how to use these tools.
1. Measure the lcp value with the PageSpeed Insights tool
PageSpeed Insights is the easiest way to measure lcp. This tool measures the lcp value with the help of real site data. It also offers tips for improving lcp performance in SEO and optimizing its value.
To use this tool, we must first go to the Diagnostics section and look for the “Largest Contentful Paint element” section. On this page you can measure and analyze the lcp value for each url you want. Provides a great user experience page as long as the lcp loads fast and is less than 2.5 seconds.
2. Measure the lcp value with Google Search Console tool
By examining the report of Core Web Vitals in Google Search Console, we can evaluate the performance of our site and identify any problems. With the help of this tool, we can check the performance of lcp on mobile and desktop separately.
After opening the Core Web Vitals report, we will see how our site pages behave according to the standard lcp values; Well, need to improve or weaken.
This report groups lcp performance by status, problem type, and URLs. For example, some URLs may not perform well in LCP. Clicking on the row for this url will take you to a page that lists the URLs that need to be modified.
With any of these tools, you can identify the amount of lcp and pages that need Largest Contentful Paint optimization that are easier for you to work with. In the next section, we will get acquainted with the methods of improving the site lcp.
Learn 10 ways to reduce lcp to less than 2.5 seconds on mobile and desktop
If after evaluating the lcp value we find that the condition of our site needs to be improved (ie we are in the range of 2.5 to 4 seconds or more), we should take action to improve the site lcp. Here are 10 ways to greatly improve the performance of Largest Contentful Paint and reduce its amount.
1. Improve ttfb and Server response time values
Performance Impact: High 🚀🚀🚀
One of the main reasons for bad LCP is the slow response time of the server. But since Server response time is optimized by improving ttfb, then we need to improve the value of both factors. A good Ttfb should be less than 200 milliseconds.
There are two ways to reduce ttfb and server response time:
Enable page cache
By activating the page cache, the site pages are saved as an HTML file on the server after the page is loaded for the first time. As a result, the content is displayed faster. This is a very easy way to improve ttfb. We can use the WP Rocket plugin for this.
Choose a fast server hosting service
Using the service of a fast host can make a big difference in the speed performance of the site. We need to use the services of companies whose servers are close to our users and can send data quickly. In this case, the dedicated host server ensures the fastest performance.
By activating the cache and selecting a high-speed host, we will follow PageSpeed Insights’ recommendations for reducing server response time (TTFB).
2. Delay the loading of JavaScript files
Performance Impact: High 🚀🚀🚀
Execution of JavaScript files is one of the main reasons for lcp failure. Delaying the loading of JavaScript files is the solution to this problem. If you remember, in the introduction to the factors that cause LCP drop, we said that the browser processes and loads JS files only after analyzing the HTML files and creating the DOM tree.
Delaying the loading of JavaScript files will result in much faster rendering, as there is nothing left to block the process.
3. Be sure to use the CDN
Performance Impact: Medium 🚀🚀
Content Delivery Network (CDN) distributes content across multiple servers to help users connect to the nearest server and receive site content. Using a CDN reduces the time interval between a user request and a server response.
No matter where our users are, the CDN sends site information to them in the shortest possible time and improves the user experience.
4. Optimize the size and dimensions of the images
Performance Impact: High 🚀🚀🚀
In most cases, these are the images that slow down our site, because they take too long to load. To improve the LCP of the site, take optimization of images seriously. We can use suitable image formats such as JPEG and WebP and reduce the size of images to less than 100 KB.
We can use a tool like ImageOptim to group images optimally. Also, if we want to optimize a lot more images, Imagify plugin is a great solution that reduces the size and dimensions of images at the same time.
Page builders like Elementor also allow webmasters to upload different image sizes depending on the user’s device (PC or mobile). As you know, mobile image optimization is very important and mobile score is the most important. So do not underestimate its effect on the LCP score!
5. Compress text files
Performance Impact: High 🚀🚀🚀
Compressing text files means zipping your files into a smaller, lighter format to load faster. When we reduce the size of the files, the data transfer between the browser and the server will be faster and the loading time and lcp will be improved.
We can use various techniques such as Gzip to compress text files. This method increases the speed of text transfer to users. Gzip is supported by most hosting services.
6. Postpone unnecessary CSS and delete unused CSS
Performance Impact: Medium 🚀🚀
Unnecessary CSS should be loaded after loading the most relevant content. For this reason, we need to identify critical CSS (or critical path CSS) and put it in the HTML structure, delay loading of unnecessary CSS files, and delete unused CSS. Avoid putting large, unnecessary CSS code in the <head> code. In this case, too, the WP Rocket plugin is helpful for WordPress sites.
7. Delete unused JavaScript files
Performance Impact: Medium 🚀🚀
Another recommended way to improve the site lcp is to remove unused JavaScript resources. Unused JavaScript resources are files that are not used on our site, or are still in the code, but are completely useless. So there is no reason to keep these files causing the cls score to drop. There are two ways to solve this problem:
- Upload JavaScript files only when needed
- Delay uploading JavaScript file.
8. Use Third-Party connections
Performance Impact: Medium 🚀🚀
Sending a server request to a Third-Party or third-party URL can also have a positive effect on the site LCP. Especially if the request is for essential content. To do this, we can use the code rel = “preconnect” and tell the browser that this page should create a connection in the shortest possible time.
9. Pre-load important and essential resources
Performance Impact: Low 🚀
We can pre-load many important items of the site; Resources such as fonts, images at the top of the site, essential CSS or JavaScript videos or patches. Using the code link rel = ”preload” we can help these resources to be patched quickly.
10. Do not forget to use Server Worker!
Performance Impact: Medium 🚀🚀
Server Worker can provide smaller HTML responses and can be used to cache any static source. We can provide these resources to the browser in the case of duplicate requests. Because pre-cash essential resources with Server Worker can reduce site load.
This method is especially great when the user is using a weak connection to load the site and significantly reduces the site’s cls score.
Frequently Asked Questions
If the reason for the increase in lcp is the slow ttfb, how should we fix it?
This problem is solved by improving the server response speed, using the CDN and creating a Third-Party.
Are the values estimated by gtmetrix for lcp reliable?
We suggest using the PageSpeed Insights and Search Console tools to achieve a reliable score. But if you do not have access to these two tools, you can also get help from the GT Metrics report.
What solutions do you suggest to improve server response speed?
- Server optimization in terms of hardware
- Optimization of queries and databases
- Improved server side code to speed up page loading
- Establish an early connection with a third-party
Do WordPress sites have a solution to avoid unnecessary CSS?
There is currently no professional plugin for extracting Unused CSS, but you can use plugins like Fastest Cache to load Critical CSS first.
Start optimizing your site lcp today!
Now you know for sure what an LCP is and why it needs to be improved for site SEO and user experience. From now on, you can use one of the tools we introduced to estimate the lcp score of the site and increase the Largest Contentful Paint score on your site using all the optimization techniques we have taught.