How to Fix LCP Issues

Google Search Console Report

Core Web Vitals report now tells website owners to fix poor user experiences on their site. And since this is important for improving SEO, let RankYa simplify and also show you ways to fixing LCP Issues in Google Search Console.

What is LCP?

LCP is short for Largest Contentful Paint, its the chunk of web page element that takes the longest to load when webpage visitors visit your web page.

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.

Types of elements considered by LargestContentfulPaint API (W3C) are: <img>, <image>, <svg>, <video>, url(), and Block-level elements

What Google Search Console Core Web Vitals Recommends

Good Needs improvement Poor
LCP <=2.5s <=4s >4s

Although the reports are different for Mobile as opposed to Desktop view (for example longer than 4seconds and longer than 2.5seconds) the magic number your website should focus on is 2.5 seconds both for Desktop & Mobile devices.

Video How to Identify and Fix LCP issue: longer than 4s (desktop) Issues

How to Find Largest Contentful Paint (LCP)

You can use PageSpeed Insights and look for ‘Largest Contentful Paint (LCP)’ Tab click on it to reveal the LCP page element. highlights Largest Contentful Paint You can also use Chrome web developer toolbar to inspect Performance Tab or Lighthouse tab.

(Advanced) How to Find LCP Largest Contentful Paint

Although PageSpeed insights shows you the location of LCP on a given web page. You can also run in-depth tests to learn about page load and figure out exactly which LCP element is on the page, and how long other resources loaded till that point using GitHub Google Chrome web-vitals scripts.

Basically, there are 2 ways to accomplish this, easiest is using CDN

Place this within HTML HEAD tag

<script> // Inline code from `https://unpkg.com/web-vitals/dist/polyfill.js` here. !function(){var e,t,n,i,r={passive:!0,capture:!0},a=new Date,o=function(){i=[],t=-1,e=null,f(addEventListener)},c=function(i,r){e||(e=r,t=i,n=new Date,f(removeEventListener),u())},u=function(){if(t>=0&&t<n-a){var r={entryType:"first-input",name:e.type,target:e.target,cancelable:e.cancelable,startTime:e.timeStamp,processingStart:e.timeStamp+t};i.forEach((function(e){e(r)})),i=[]}},s=function(e){if(e.cancelable){var t=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,t){var n=function(){c(e,t),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,r),removeEventListener("pointercancel",i,r)};addEventListener("pointerup",n,r),addEventListener("pointercancel",i,r)}(t,e):c(t,e)}},f=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(t){return e(t,s,r)}))},p="hidden"===document.visibilityState?0:1/0;addEventListener("visibilitychange",(function e(t){"hidden"===document.visibilityState&&(p=t.timeStamp,removeEventListener("visibilitychange",e,!0))}),!0);o(),self.webVitals={firstInputPolyfill:function(e){i.push(e),u()},resetFirstInputPolyfill:o,get firstHiddenTime(){return p}}}(); </script>

Then after HTML BODY tag call getLCP function and log LCPs

<script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. // webVitals.getCLS(console.log); // webVitals.getFID(console.log); webVitals.getLCP(console.log); } document.head.appendChild(script); }()) </script>

Using WordPress CMS? Edit header.php file Like This

WordPress header.php file Look at Chrome Web Developer Toolbar > Console Tab

Chrome Web Developer Toolbar Console Tab

By RankYa

RankYa is registered Australian digital marketing and web development business. Founded in 2008 we've built a reputation for hard work, honesty and experience. Particularly for Google and WordPress. RankYa also shares how to videos related to Google (Search Console, Ads, Analytics, YouTube), SEO, FB, WordPress. We also created FREE Google & SEO related courses in hope it will help those wanting to earn an income online. Thank you for visiting our website. You're also welcomed to hire us

Leave a comment

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