The results of your speed test will tell you if:<\/p>\n
- \n
- The LCP threshold is met.<\/li>\n
- You need to optimize any other Core Web Vital.<\/li>\n<\/ul>\n
How Is The Largest Contentful Paint Calculated?<\/h3>\n
Google looks at the 75th percentile of experiences \u2013 that means 25% of real website visitors experience LCP load times of 3.09 seconds or higher, while for 75% of users the LCP is below 3.09 seconds.<\/p>\n
In this example, the real-user LCP is shown as 3.09 seconds.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear.png\")
Screenshot of a Core Web Vitals data of DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nWhat Are The Lab Test Results On My Core Web Vitals Data?<\/h3>\n
With this specific web speed test<\/a>, you\u2019ll also see lab metrics that were collected in a controlled test environment. While these metrics don\u2019t directly impact Google rankings, there are two advantages of this data:<\/p>\n
- \n
- The metrics update as soon as you improve your website, while Google\u2019s real-time data will take 28 days to fully update.<\/li>\n
- You get detailed reports in addition to the metrics, which can help you optimize your website.<\/li>\n<\/ol>\n
Additionally, PageSpeed Insights<\/a> also provides lab data, but keep in mind that the data it reports can sometimes be misleading due to the simulated throttling<\/a> it uses to emulate a slower network connection.<\/p>\n
How Do You Find Your Largest Contentful Paint Element?<\/h2>\n
When you run a page speed test<\/a> with DebugBear, the LCP element is highlighted in the test result.<\/p>\n
Sometimes, the LCP element may be a large image, and other times, it could be a large portion of text.<\/p>\n
Regardless of whether your LCP element is an image or a piece of text, the LCP content won\u2019t appear until your page starts rendering.<\/p>\n
For example, on the page below, a background image is responsible for the largest paint.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-1.png\")
Screenshot of DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nIn contrast, this page\u2019s LCP is a paragraph of text.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-2.png\")
Screenshot of DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nTo improve the Largest Contentful Paint (LCP) of your website you need to ensure that the HTML element responsible for the LCP appears quickly.<\/p>\n
How To Improve The Largest Contentful Paint<\/h2>\n
To improve the LCP you need to:<\/p>\n
- \n
- Find out what resources are necessary to make the LCP element appear.<\/li>\n
- See how you can load those resources faster (or not at all).<\/li>\n<\/ol>\n
For example, if the LCP element is a photo, you could reduce the file size of the image.<\/p>\n
After running a DebugBear speed test<\/a>, you can click on each performance metric to view more information on how it could be optimized.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-3.png\")
Screenshot of a detailed Largest Contentful Paint analysis in DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nCommon resources that affect the LCP are:<\/p>\n
- \n
- Render-blocking resources.<\/li>\n
- Images that are not optimized.<\/li>\n
- Outdated image formats.<\/li>\n
- Fonts that are not optimized.<\/li>\n<\/ul>\n
How To Reduce Render-Blocking Resources<\/h3>\n
Render-blocking resources<\/a> are files that need to be downloaded before the browser can start drawing page content on the screen. CSS stylesheets are typically render-blocking, as are many script tags.<\/p>\n
To reduce the performance impact of render-blocking resources you can:<\/p>\n
- \n
- Identify what resources are render-blocking.<\/li>\n
- Review if the resource is necessary.<\/li>\n
- Review if the resource needs to block rendering.<\/li>\n
- See if the resource can be loaded more quickly up, for example using compression.<\/li>\n<\/ol>\n
The Easy Way:<\/strong> In the DebugBear request waterfall<\/a>, requests for render-blocking resources are marked with a \u201cBlocking\u201d tag.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-4.png\")
Screenshot of DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nHow To Prioritize & Speed Up LCP Image Requests<\/h3>\n
For this section, we\u2019re going to leverage the new \u201cfetchpriority\u201d attribute on images to help your visitor\u2019s browsers quickly identify what image should load first.<\/p>\n
Use this attribute on your LCP element.<\/p>\n
Why?<\/p>\n
When just looking at the HTML, browsers often can\u2019t immediately tell what images are important. One image might end up being a large background image, while another one might be a small part of the website footer.<\/p>\n
Accordingly, all images are initially considered low priority, until the page has been rendered and the browser knows where the image appears.<\/p>\n
However, that can mean that the browser only starts downloading the LCP image fairly late.<\/p>\n
The new Priority Hints<\/a> web standard allows website owners to provide more information to help browsers prioritize images and other resources.<\/p>\n
In the example below, we can see that the browser spends a lot of time waiting, as indicated by the gray bar.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-5.png\")
Screenshot of a low-priority LCP image on DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nWe would choose this LCP image to add the \u201cfetchpriority\u201d attribute to.<\/p>\n
How To Add The \u201cFetchPriority\u201d Attribute To Images<\/strong><\/p>\n
Simply adding the fetchpriority=\u201dhigh\u201d attribute to an HTML img tag will the browser will prioritize downloading that image as quickly as possible.<\/p>\n
<img src=\"photo.jpg\" fetchpriority=\"high\"<\/strong> \/><\/code><\/p>\nHow To Use Modern Image Formats & Size Images Appropriately<\/h3>\n
High-resolution images can often have a large file size, which means they take a long time to download.<\/p>\n
In the speed test result below you can see that by looking at the dark blue shaded areas. Each line indicates a chunk of the image arriving in the browser.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-6.png\")
Screenshot of a large LCP image on DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nThere are two approaches to reducing image sizes:<\/p>\n
- \n
- Ensure the image resolution is as low as possible. Consider serving images at different resolutions depending on the size of the user\u2019s device.<\/li>\n
- Use a modern image format<\/a> like WebP, which can store images of the same quality at a lower file size.<\/li>\n<\/ol>\n
How To Optimize Font Loading Times<\/h3>\n
If the LCP element is an HTML heading or paragraph, then it\u2019s important to load the font for this chunk of text quickly.<\/p>\n
One way to achieve this would be to use preload tags<\/a> that can tell the browser to load the fonts early.<\/p>\n
The font-display: swap<\/a> CSS rule can also ensure sped-up rendering, as the browser will immediately render the text with a default font before switching to the web font later on.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-7.png\")
Screenshot of web fonts delaying the LCP on DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\nMonitor Your Website To Keep The LCP Fast<\/h2>\n
Continuously monitoring your website not only lets you verify that your LCP optimizations are working, but also makes sure you get alerted if your LCP gets worse.<\/p>\n
DebugBear can monitor the Core Web Vitals and other site speed metrics over time. In addition to running in-depth lab-based tests, the product also keeps track of the real-user metrics from Google.<\/p>\n
Try DebugBear with a free 14-day trial<\/a>.<\/p>\n
\n- \n
- \n
![\"How](\"https:\/\/marketingnewsbox.com\/wp-content\/uploads\/2022\/12\/how-to-optimize-the-largest-contentful-paint-rank-higher-in-google-via-sejournal-debugbear-8.png\")
Screenshot of site speed monitoring data on DebugBear.com, November 2022<\/span><\/div>\n<\/dt>\n<\/dl>\n<\/div>\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n