<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>LCP | John Nessime</title>
	<atom:link href="https://john-nessime.com/blog/tag/lcp/feed/" rel="self" type="application/rss+xml" />
	<link>https://john-nessime.com/blog/tag/lcp/</link>
	<description>Cloud, DevOps, Data &#38; AI — Built, Tested, Explained</description>
	<lastBuildDate>Sun, 02 Aug 2026 08:51:55 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://john-nessime.com/blog/wp-content/uploads/2026/07/cropped-jn-32x32.png</url>
	<title>LCP | John Nessime</title>
	<link>https://john-nessime.com/blog/tag/lcp/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>A 100 Score and a Failing Report: Fixing Core Web Vitals on a Real WordPress Site</title>
		<link>https://john-nessime.com/blog/technical-guides/core-web-vitals-wordpress/</link>
					<comments>https://john-nessime.com/blog/technical-guides/core-web-vitals-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[John Nessime]]></dc:creator>
		<pubDate>Mon, 03 Aug 2026 12:33:00 +0000</pubDate>
				<category><![CDATA[Technical Guides]]></category>
		<category><![CDATA[Web Performance]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Caching]]></category>
		<category><![CDATA[CDN]]></category>
		<category><![CDATA[Cloudflare]]></category>
		<category><![CDATA[CLS]]></category>
		<category><![CDATA[Core Web Vitals]]></category>
		<category><![CDATA[INP]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[LCP]]></category>
		<category><![CDATA[PageSpeed Insights]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Troubleshooting]]></category>
		<category><![CDATA[Website Performance]]></category>
		<category><![CDATA[Website Speed]]></category>
		<category><![CDATA[WordPress Hosting]]></category>
		<guid isPermaLink="false">https://john-nessime.com/blog/?p=95</guid>

					<description><![CDATA[<p>You got PageSpeed Insights to 98 and six weeks later Search Console still says the same URLs are failing. The score and the assessment measure different things, and Lighthouse cannot measure INP at all. Here is how to fix Core Web Vitals on WordPress in the order that actually moves the report.</p>
<p>The post <a href="https://john-nessime.com/blog/technical-guides/core-web-vitals-wordpress/">A 100 Score and a Failing Report: Fixing Core Web Vitals on a Real WordPress Site</a> appeared first on <a href="https://john-nessime.com/blog">John Nessime</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">You spent a fortnight on it. Deferred the scripts, converted everything to WebP, turned on a caching plugin, tuned the CDN. PageSpeed Insights now returns 98 on desktop and 92 on mobile, and you screenshot it for the client.</p>



<p class="wp-block-paragraph">Six weeks later the Core Web Vitals report in Search Console still says the same URLs are failing. Nothing moved.</p>



<p class="wp-block-paragraph">Here is why, and it is the single most important thing to understand before touching anything: <strong>the score and the assessment are two different measurements of two different things.</strong> The score is Lighthouse running a simulated page load on throttled hardware, once, from wherever you are. The assessment is Chrome telemetry from real visitors on real devices, aggregated over 28 days, graded at the 75th percentile.</p>



<p class="wp-block-paragraph">Worse: Lighthouse cannot measure one of the three metrics at all. Interaction to Next Paint requires an actual human interacting with the page, so no lab tool produces it. You can score 100 and fail INP for every mobile visitor you have.</p>



<p class="wp-block-paragraph">This walks through fixing <strong>Core Web Vitals on WordPress</strong> the way that actually shifts the report: get field data first, then work each metric in the order that pays.</p>



<h2 class="wp-block-heading">Field data first, or you are guessing</h2>



<p class="wp-block-paragraph">Three facts that determine everything else.</p>



<p class="wp-block-paragraph"><strong>You are graded at the 75th percentile.</strong> Three quarters of page views need a good result. Not the median, not your laptop. The fourth-slowest visitor out of four, typically a mid-range Android phone on patchy mobile data, decides whether you pass.</p>



<p class="wp-block-paragraph"><strong>The window is 28 days and it rolls.</strong> Deploy a fix today and the report will not reflect it for weeks, and even then it moves gradually as old data ages out. Anyone promising you a same-week improvement in Search Console does not understand the mechanism.</p>



<p class="wp-block-paragraph"><strong>Thin URLs fall back to origin-level data.</strong> If a page has too few visits for its own dataset, Google uses a group or your whole origin instead. So one badly performing template can drag URLs that are individually fine.</p>



<p class="wp-block-paragraph">Practically: start in the Core Web Vitals report in Search Console to see which templates fail and how many URLs are affected. Then run PageSpeed Insights on a representative URL and read <em>only the field data section at the top</em> to decide what is broken. Use the Lighthouse section below it to work out why, which is what lab data is genuinely good for.</p>



<p class="wp-block-paragraph">If you want faster feedback than 28 days, add real user monitoring. Google&#8217;s <code>web-vitals</code> JavaScript library reports all three metrics from your own visitors and you can send them wherever you like. On a site where performance matters commercially, this is worth the afternoon it takes.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">LCP: the biggest thing on screen</h2>



<p class="wp-block-paragraph">Largest Contentful Paint is when the largest visible element finishes rendering. Good is under 2.5 seconds. On WordPress it is almost always the hero image or the first image in post content, and the causes are boringly consistent.</p>



<h3 class="wp-block-heading">The lazy-loaded hero</h3>



<p class="wp-block-paragraph">Still the most common LCP problem on WordPress sites, years after core started handling it. Core skips lazy loading on the first image in content and adds <code>fetchpriority="high"</code> to the likely LCP candidate, but the heuristic only works on images core knows about. A hero rendered by a page builder, a theme header, or a slider often sits outside that, and some optimisation plugins re-add <code>loading="lazy"</code> to everything regardless.</p>



<pre class="wp-block-code"><code># Look at what the server actually sends. If your hero image has
# loading="lazy" on it, you have found your LCP problem.
curl -s https://example.com/ | grep -o '&lt;img[^&gt;]*&gt;' | head -5</code></pre>



<p class="wp-block-paragraph">For a theme-rendered hero, be explicit rather than hoping a heuristic catches it:</p>



<pre class="wp-block-code"><code>&lt;!-- No loading="lazy". width and height reserve space, which
     also protects CLS. fetchpriority tells the browser this
     is the one image worth fetching before everything else. --&gt;
&lt;img src="/hero.webp"
     width="1600" height="900"
     fetchpriority="high"
     decoding="async"
     alt=""&gt;</code></pre>



<h3 class="wp-block-heading">Slow server response</h3>



<p class="wp-block-paragraph">LCP cannot be faster than time to first byte. On shared hosting with no page cache, an uncached WordPress response can eat most of your budget before a single byte of image is requested. Full-page caching is the single highest-yield change on most WordPress sites, and a CDN in front of it removes the geographic distance as well.</p>



<p class="wp-block-paragraph">If TTFB is still poor with caching on, the cache is being bypassed. Cookies from analytics, a cart, or a logged-in session will do it. Check the cache-status header on a real request rather than trusting the plugin&#8217;s dashboard.</p>



<h3 class="wp-block-heading">Render-blocking CSS</h3>



<p class="wp-block-paragraph">The browser will not paint until it has the stylesheets. A theme loading four separate CSS files plus a font stylesheet plus an icon library delays every LCP candidate on the page. Self-host fonts with <code>font-display: swap</code>, drop icon libraries you use six glyphs from, and be sceptical of &#8220;combine CSS&#8221; plugin features, which on HTTP/2 often make things worse rather than better.</p>



<h3 class="wp-block-heading">Speculative loading, which is free</h3>



<p class="wp-block-paragraph">Worth knowing because most WordPress performance guides predate it. Since WordPress 6.8, core ships speculative loading using the Speculation Rules API: the browser starts fetching a link&#8217;s destination when the visitor interacts with it, so the next page is partly or entirely loaded before they arrive. It is on by default for logged-out visitors, using prefetch with &#8220;conservative&#8221; eagerness, and it is a progressive enhancement with no downside for browsers that do not support it.</p>



<p class="wp-block-paragraph">You can push it further, at a cost:</p>



<pre class="wp-block-code"><code>add_filter( 'wp_speculation_rules_configuration', function ( $config ) {
    // Prerender actually renders the next page, including running
    // its JavaScript. Much faster, and analytics or anything with
    // side effects may fire for a visit that never happens.
    return array(
        'mode'      =&gt; 'prerender',
        'eagerness' =&gt; 'moderate',
    );
} );</code></pre>



<p class="wp-block-paragraph">Test that carefully on anything transactional. Core also honours <code>no-prefetch</code> and <code>no-prerender</code> CSS classes on individual links, which is the simplest way to keep carts, checkouts and logout links out of it.</p>



<h2 class="wp-block-heading">INP: the hard one, and it is your JavaScript</h2>



<p class="wp-block-paragraph">Interaction to Next Paint measures the time from a user interacting to the browser painting the response, across every interaction on the page, and reports roughly the worst one. Good is under 200 milliseconds; above 500 is poor.</p>



<p class="wp-block-paragraph">It replaced First Input Delay in March 2024, and the change matters more than a metric swap sounds. FID measured only the delay before processing the first interaction. INP measures the whole round trip, every time. Plenty of sites that comfortably passed FID fail INP, because the thing that was always sluggish is now the thing being graded.</p>



<p class="wp-block-paragraph">Since no lab tool reports it, use Total Blocking Time in Lighthouse as a proxy, and Chrome DevTools&#8217; Performance panel to find which handler is blocking. On WordPress the usual suspects:</p>



<ul class="wp-block-list">
<li><strong>Plugin JavaScript loading site-wide.</strong> A form builder, a slider and a popup tool each shipping their bundle on every page, including pages that use none of them.</li>
<li><strong>Third-party tags.</strong> Tag managers, chat widgets, heatmaps, ad scripts. These run on the main thread and are usually the largest single contributor.</li>
<li><strong>Long tasks in event handlers.</strong> Anything doing real work synchronously in response to a click.</li>
<li><strong>jQuery-era code</strong> attaching handlers to hundreds of elements on a listing page.</li>
</ul>



<p class="wp-block-paragraph">The fixes, in order of yield. First, stop shipping JavaScript to pages that do not use it. Conditionally dequeue plugin assets rather than accepting that a contact form script belongs on every article. This alone often solves INP.</p>



<p class="wp-block-paragraph">Second, audit the third-party tags. Every one is somebody&#8217;s request from two years ago, and at least one of them is for a tool nobody uses any more. Removing a tag is the cheapest performance work available.</p>



<p class="wp-block-paragraph">Third, break up long tasks so the browser can paint between chunks:</p>



<pre class="wp-block-code"><code>// Yielding lets the browser respond to the click that started this,
// instead of finishing all the work first. INP measures exactly
// that gap, so yielding moves the metric even though total work
// stays the same.
async function processAll(items) {
  for (const item of items) {
    doWork(item);
    await new Promise(resolve =&gt; setTimeout(resolve, 0));
  }
}</code></pre>



<p class="wp-block-paragraph">Newer Chrome versions offer <code>scheduler.yield()</code>, which does the same thing without losing your place in the task queue. Feature-detect it and fall back to the above.</p>



<p class="wp-block-paragraph">One honest warning: &#8220;delay JavaScript until user interaction&#8221; features in optimisation plugins look like an INP fix and frequently are not. Delaying scripts until the first interaction means the first interaction now waits for all of them to load and execute, which is the worst possible moment. It improves lab scores and can make INP worse.</p>



<h2 class="wp-block-heading">CLS: usually an afternoon</h2>



<p class="wp-block-paragraph">Cumulative Layout Shift measures unexpected movement of visible content. Good is under 0.1, and it is the metric most likely to be fixable in one sitting.</p>



<ul class="wp-block-list">
<li><strong>Images without dimensions.</strong> Set <code>width</code> and <code>height</code> so the browser reserves space before the file arrives. WordPress does this for media library images; hand-written theme markup often does not.</li>
<li><strong>Ads and embeds.</strong> Reserve a fixed-height container. An ad slot that collapses to nothing and then expands is a large shift on every page view.</li>
<li><strong>Fonts.</strong> A web font swapping in at a different metric reflows everything. <code>font-display: swap</code> plus <code>size-adjust</code> on the fallback, or a system font stack, both work.</li>
<li><strong>Cookie banners and notices injected by JavaScript</strong> that push the page down rather than overlaying it.</li>
<li><strong>Lazy-loaded content above the fold</strong> that appears after paint.</li>
</ul>



<p class="wp-block-paragraph">Chrome DevTools&#8217; Performance panel highlights layout shifts with the element that moved, which turns this from detective work into a checklist.</p>



<h2 class="wp-block-heading">The order I&#8217;d work in</h2>



<ol class="wp-block-list">
<li><strong>Anything in the &#8220;poor&#8221; band</strong>, whichever metric it is. Poor hurts more than two mediocre metrics.</li>
<li><strong>Caching and TTFB</strong>, because it is one change and it moves LCP for every page at once.</li>
<li><strong>The LCP image</strong> on your highest-traffic template.</li>
<li><strong>JavaScript you can delete.</strong> Unused plugin assets and dead third-party tags, for INP.</li>
<li><strong>CLS</strong>, which is quick and visible to users even where the number already passes.</li>
<li><strong>Everything else</strong>, measured one change at a time.</li>
</ol>



<p class="wp-block-paragraph">What I would skip: chasing a green Lighthouse score once field data passes, stacking a second optimisation plugin on top of the first, and micro-optimising a metric that is already comfortably good. There is no bonus for 1.1 seconds when 2.5 is the bar.</p>



<h2 class="wp-block-heading">When the numbers don&#8217;t move</h2>



<p class="wp-block-paragraph"><strong>It has been two weeks.</strong> That is normal. The window is 28 days and rolling, so give it a full month before concluding anything.</p>



<p class="wp-block-paragraph"><strong>Lab improved, field did not.</strong> You optimised something the lab measures and users do not experience, or the problem is INP, which the lab never measured. Go back to the field data section.</p>



<p class="wp-block-paragraph"><strong>Desktop passes, mobile fails.</strong> Expected, and mobile is what is graded for most sites. Test with CPU throttling on, because the gap is usually processing rather than network.</p>



<p class="wp-block-paragraph"><strong>One URL is fine but the group fails.</strong> Origin-level fallback, or a different template in the same group is dragging it. Check what else Search Console has bundled together.</p>



<p class="wp-block-paragraph"><strong>It regressed after a plugin update.</strong> Very common, and the reason to record your field numbers before and after any significant change rather than relying on memory.</p>



<h2 class="wp-block-heading">Common mistakes</h2>



<ul class="wp-block-list">
<li>Treating the PageSpeed Insights score as the thing being measured.</li>
<li>Optimising INP with a lab tool that cannot measure INP.</li>
<li>Testing from a fast laptop on fibre and concluding the site is fine.</li>
<li>Lazy-loading the hero image, or letting a plugin re-add it.</li>
<li>Running two optimisation plugins that both minify and both defer.</li>
<li>Enabling &#8220;delay JavaScript until interaction&#8221; and expecting INP to improve.</li>
<li>Judging a fix after a week.</li>
<li>Loading every plugin&#8217;s JavaScript on every page.</li>
<li>Adding a CDN while the origin has no page cache.</li>
<li>Fixing the homepage when the failing template is the blog archive.</li>
</ul>



<h2 class="wp-block-heading">Best practices</h2>



<ul class="wp-block-list">
<li>Decide what is broken from field data; work out why from lab data.</li>
<li>Fix by template, not by URL, since one template covers thousands of pages.</li>
<li>Full-page caching first, then a CDN, then image work.</li>
<li>Explicit <code>width</code> and <code>height</code> on every image in theme markup.</li>
<li><code>fetchpriority="high"</code> on the LCP image and lazy loading on nothing above the fold.</li>
<li>Dequeue plugin assets on pages that do not use them.</li>
<li>Review third-party tags on a schedule and delete the ones nobody owns.</li>
<li>Self-host fonts with <code>font-display: swap</code>.</li>
<li>Real user monitoring so you are not waiting a month for feedback.</li>
<li>Record field numbers before and after every significant change.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">FAQ</h2>



<h3 class="wp-block-heading">Why is my PageSpeed score 95 but Search Console says I&#8217;m failing?</h3>



<p class="wp-block-paragraph">They measure different things. The score is a simulated load on your connection; the assessment is real Chrome users at the 75th percentile over 28 days. Read the field data section at the top of PageSpeed Insights, not the score.</p>



<h3 class="wp-block-heading">How long before a fix shows up?</h3>



<p class="wp-block-paragraph">The data window is 28 days and rolls daily, so improvement appears gradually and takes about a month to fully reflect. Real user monitoring gives you same-day feedback if you cannot wait.</p>



<h3 class="wp-block-heading">Will a caching plugin fix Core Web Vitals?</h3>



<p class="wp-block-paragraph">It will help LCP substantially, because TTFB is a floor under it. It does very little for INP, which is about JavaScript execution, and nothing for CLS. Caching is a strong first move and not a complete answer.</p>



<h3 class="wp-block-heading">What happened to FID?</h3>



<p class="wp-block-paragraph">INP replaced it in March 2024 and FID is retired. Any guide still listing it predates the change, which is a useful signal about the rest of its advice.</p>



<h3 class="wp-block-heading">Do I need to switch themes?</h3>



<p class="wp-block-paragraph">Sometimes, and it is a bigger project than it looks. A heavy multipurpose theme loading a page builder, a slider library and an icon set on every request is fighting you. Measure first, because a theme swap on a site with hundreds of pages is rarely the cheapest route to passing.</p>



<h3 class="wp-block-heading">Does passing actually help rankings?</h3>



<p class="wp-block-paragraph">Core Web Vitals are a ranking signal among many, and content relevance dominates. The reliable win is on the user side: faster pages convert better and get abandoned less. Treat ranking as a bonus rather than the business case.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">The one thing to remember</h2>



<p class="wp-block-paragraph">You cannot fix what you are not measuring, and the tool most people measure with cannot see the metric most people are failing. Lighthouse is a debugger. The Chrome User Experience Report is the exam.</p>



<p class="wp-block-paragraph">So open Search Console before you open PageSpeed Insights, find out which of the three is actually red, and fix that one. Then wait a month before deciding whether it worked, because the measurement takes longer than the work.</p>



<h2 class="wp-block-heading">Site failing and not sure why?</h2>



<p class="wp-block-paragraph">Most of the WordPress sites I get sent have already had a fortnight thrown at the wrong metric. Work I take on:</p>



<ul class="wp-block-list">
<li>Diagnosing which Core Web Vital is actually failing, for which templates, from field data rather than a score.</li>
<li>LCP work: caching and TTFB, image priority and formats, render-blocking CSS, CDN configuration.</li>
<li>INP work, which is mostly JavaScript archaeology: dequeuing plugin assets by page, auditing third-party tags, breaking up long tasks.</li>
<li>CLS fixes across templates, including ads, embeds, fonts and consent banners.</li>
<li>Setting up real user monitoring so you get feedback in a day instead of a month.</li>
<li>Untangling sites running two or three overlapping optimisation plugins.</li>
</ul>



<p class="wp-block-paragraph">Send me your Search Console Core Web Vitals report and a URL from a failing template, and I will tell you what is actually wrong.</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.upwork.com/freelancers/~01f15a912ad84a6620" target="_blank" rel="noreferrer noopener">Work with me on Upwork</a></div>
</div>
<p>The post <a href="https://john-nessime.com/blog/technical-guides/core-web-vitals-wordpress/">A 100 Score and a Failing Report: Fixing Core Web Vitals on a Real WordPress Site</a> appeared first on <a href="https://john-nessime.com/blog">John Nessime</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://john-nessime.com/blog/technical-guides/core-web-vitals-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
