How to Fix LCP Issues

Search Console Google

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 <= 2.5 seconds
  • Needs improvement 2.5 seconds till 4 seconds
  • Poor > 4 seconds

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)

Easiest way is to use PageSpeed Insights and look for ‘Largest Contentful Paint (LCP)’ Tab click on it to reveal the LCP page element. Another method for more technical people is to use Chrome web developer toolbar (press F12 on your keyboard) and inspect Performance Tab or Lighthouse Tab. Both of which can reveal LCP straight on the browser. highlights Largest Contentful Paint

Advanced Ways to Find LCP Largest Contentful Paint for Developers

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 by placing 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

Don't let Google's latest Page Experience update derank your business website in search, instead, master Google rankings and website conversions with this Master Class Course by RankYa (Free Lessons Included)

Learn how press here

By RankYa

RankYa is a passionate digital marketer, website optimizer, content creator, and a fully qualified web developer helping businesses of all sizes (big or small) to achieve better results online. We are a reputable and registered Australian business serving valued clients worldwide since 2008, built on hard work, honesty and providing exceptional personalized service

We love sharing our passion through freely available how to videos and courses related to business website marketing and optimization, Google (Search Console, Ads, Analytics, YouTube), SEO, HTML5, Structured Data and WordPress. Thank you for visiting our website. Rest assured that it will serve you well as well.

1 comment

Leave a comment

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