Last updated: September 2026 · Reading time: 13 min · By the Best Web Developer team
Quick answer
To fix Largest Contentful Paint, measure field data first, identify the LCP element, then split its time into four parts: server response, load delay, load duration and render delay. Fix the largest part: add a CDN and caching for slow servers, preload the hero image with high fetch priority, compress it to AVIF or WebP, and remove render-blocking CSS, JavaScript and font delays. Aim for 2.5 seconds or less.
Key takeaways
- A good LCP is 2.5 s or less for at least 75% of page visits; over 4 s is poor.
- Most slow LCP on hero images comes from load delay: the browser discovers the image too late.
- Never lazy-load the LCP image. Give it fetchpriority=”high” and make it discoverable in the HTML.
- Heavy Arabic web fonts and third-party scripts are common render-delay causes on Saudi sites.
- Field data updates on a rolling 28-day window, so confirm fixes over four weeks, not one test.
What Largest Contentful Paint measures and why it matters
Largest Contentful Paint measures how long it takes for the biggest visible element on the screen, usually a hero image or headline block, to render. It is Google’s main loading metric and one of the three Core Web Vitals.
LCP is the time from when a user starts loading a page until the largest image, video poster or text block in the viewport is painted. Google classes it as good at 2.5 seconds or less, needs improvement up to 4 seconds, and poor above 4 seconds, assessed at the 75th percentile of real visits.
A slow Largest Contentful Paint hurts in two ways. Visitors leave before they see your offer, and your page may miss the page experience signals Google uses in ranking. On Saudi sites where most traffic arrives on phones, a hero that takes 5 seconds to appear is often the single biggest leak in the funnel.
Note: lab data vs field data
Lab tools such as Lighthouse simulate one device and network. Field data from the Chrome UX Report reflects real users over the last 28 days, and it is what Google uses for Core Web Vitals. Use lab tests to debug, and field data to judge whether a fix worked. Improvements in this guide are typical ranges from our audits, not guaranteed results.
Steps 1 to 3: measure and diagnose Largest Contentful Paint
Before changing anything, confirm which pages are slow for real users, find the exact LCP element, and break its time into parts. This diagnosis usually takes 30–60 minutes per page template and saves days of guesswork.
Step 1: find slow pages with field data
Open the Core Web Vitals report in Google Search Console. It groups URLs with similar problems, so you can see whether the issue affects all product pages, only blog posts or just the homepage. Then run representative URLs through PageSpeed Insights to see field LCP for mobile and desktop separately.
Step 2: identify the LCP element
In Chrome DevTools, open the Performance panel, enable a mobile CPU and network throttle, and record a page load. The LCP marker shows which element counted. On most sites it is the hero image, a product photo, a large heading or a background image set in CSS. The LCP element on mobile is often different from desktop, so check both.
Step 3: split LCP into its four parts
Google’s LCP guidance breaks the metric into four sub-parts. Each has a different fix.
| Sub-part | What it is | Rough target share | Typical fix |
|---|---|---|---|
| Time to first byte (TTFB) | Server response for the HTML | About 40% | CDN, page caching, faster hosting |
| Resource load delay | Gap before the LCP image starts loading | Under 10% | Preload, fetch priority, no lazy-load |
| Resource load duration | Time to download the image | About 40% | AVIF/WebP, right size, image CDN |
| Element render delay | Gap between download and paint | Under 10% | Cut render-blocking CSS, JS and fonts |
If LCP is a text block rather than an image, there is no load delay or duration; focus on TTFB and render delay, especially web fonts.
Steps 4 to 7: fix each part of Largest Contentful Paint
Work on the largest sub-part first, then move to the next. On most sites we audit, fixing load delay and image size alone moves mobile LCP from the 4–6 second range to 2–3 seconds.
Step 4: reduce server response time
- Target: aim for TTFB under about 800 ms on mobile.
- Cache full pages: on WordPress, use server-level or plugin page caching so HTML is not rebuilt for every visit.
- Use a CDN with nearby edges: serving Saudi visitors from a server in Europe or the US adds latency on every request. Choose a CDN with edge locations in or near the Kingdom.
- Reduce redirects: each hop (http to https, non-www to www, language redirects) adds a round trip.
- Fix slow back-end calls: database queries, uncached API calls and heavy plugins often hide behind a slow TTFB.
Step 5: remove resource load delay
The browser can only fetch the hero image once it knows about it. Put the image in the HTML as a normal img element rather than a CSS background or a JavaScript-injected element. Add fetchpriority=”high” to it, and remove loading=”lazy” from it. If the image is set in CSS or chosen by a slider script, add a preload hint in the head, for example <link rel=”preload” as=”image” href=”hero.avif” fetchpriority=”high”>.
Sliders and carousels are a frequent cause of delay: the first slide often waits for a script to initialise. Replace the hero slider with a single static image, or render the first slide in plain HTML.
Step 6: shorten resource load duration
- Modern formats: AVIF or WebP are usually 30–60% smaller than equivalent JPEGs in our tests.
- Right-size images: use srcset and sizes so a 390px phone does not download a 2,400px desktop image. A mobile hero rarely needs more than 800–1,200px width.
- Set a byte budget: keep the mobile hero under about 100–150 KB where possible.
- Use an image CDN: automatic format and size selection removes manual work.
Our free image inspector shows an image’s dimensions, format and file size in your browser, so you can check hero images before uploading them.
Step 7: cut element render delay
Render delay happens when the image has arrived but the browser is still blocked by CSS, JavaScript or fonts. Inline the critical CSS for above-the-fold content, defer non-essential scripts, and remove A/B testing “anti-flicker” snippets that hide the whole page until a script loads. For text LCP, use font-display: swap or optional, preload the main font file, and subset fonts to the characters you use.
Highlight: the Arabic font trap
Arabic web fonts often weigh several times more than Latin ones because of the larger character set. On bilingual Saudi sites, we frequently find two or three Arabic font families loading in four weights each. Limit to one family, two weights, WOFF2 format and a subset covering Arabic and Latin, and render delay on text LCP often drops by more than a second.
Step 8: validate, then fix by platform
After deploying fixes, re-test in the lab immediately, then watch field data for four weeks. Each platform has its own typical culprits and limits.
Validating the fix
- Run three lab tests per template and take the median, since single runs vary.
- Check the LCP element has not changed to something else after your fix.
- In Search Console, click “Validate fix” on the affected issue group.
- Watch the 28-day field data in PageSpeed Insights; improvements show gradually.
- Add a performance budget to your release checklist so new banners and apps do not undo the work.
Platform-specific fixes
- WordPress: page caching, an image optimisation plugin, disable lazy-load on the first image, and remove page-builder bloat. Our WordPress development team does this routinely.
- Shopify: use the theme’s responsive image helpers, limit apps that inject scripts above the fold, and avoid video heroes on mobile.
- Salla and Zid: you control less of the server, so focus on image size, a single static banner instead of a slider, and fewer marketing apps.
- Next.js and React: use server rendering or static generation, mark the hero image as priority, and avoid rendering the hero only on the client.
Pro tip
Check the hero on both language versions. On bilingual Saudi sites the Arabic homepage often uses a different, heavier banner than the English one, or loads its hero through a separate RTL slider script. We regularly find the Arabic page one to two seconds slower than the English page for this reason alone.
Key benefits of a fast LCP
A fast Largest Contentful Paint means visitors see your offer sooner, stay longer and convert more often. It also removes a negative page experience signal and makes paid traffic cheaper to convert.
- Lower bounce rates: in our audits, pages moving from poor to good LCP typically see noticeably fewer early exits on mobile.
- Better ad efficiency: landing page experience affects Google Ads quality, so faster pages can reduce cost per click.
- Stronger SEO foundation: Core Web Vitals are part of Google’s page experience signals.
- Lower data usage for visitors: smaller images help users on prepaid mobile plans.
- Cheaper hosting: caching and a CDN reduce server load during Ramadan and White Friday peaks.
- Healthier codebase: removing unused scripts and fonts makes future changes safer.
“Most slow LCP is not a server problem. It is a browser finding the hero image too late. Fix discovery first, then size.”
— Best Web Developer strategy team
Common LCP problems on sites in Saudi Arabia
Saudi sites share a few recurring Largest Contentful Paint causes: hosting far from the Kingdom, heavy Arabic fonts, hero sliders and many marketing scripts. Fixing these four covers most of the problems we see.
Retail and e-commerce homepages
Seasonal banners for Ramadan, White Friday or Saudi National Day on 23 September are often uploaded as 2–4 MB images straight from the design tool. Add an upload rule: every banner exported as AVIF or WebP, under 150 KB for mobile, with a separate mobile crop.
Corporate and government-facing sites
These often use video heroes and many tracking tags. Replace autoplay video on mobile with a compressed poster image, and load chat widgets, heatmaps and tag managers after the main content.
Illustrative case: a Jeddah fashion store fixes its mobile LCP
Challenge: A Jeddah fashion retailer on WooCommerce had a field mobile LCP of 5.8 s on its Arabic homepage. The hero was a five-slide carousel of 1.9 MB JPEGs, hosted in Europe, with three Arabic font families.
What we did: We replaced the carousel with one static hero in AVIF at 118 KB, added fetchpriority=”high”, moved to hosting with a CDN serving from the region, enabled page caching and reduced fonts to one family in two weights. The work took 6 days and cost SAR 9,500.
Result: After 28 days, field mobile LCP was 2.1 s and TTFB fell from 1.4 s to 0.5 s. Mobile conversion rate rose from 1.1% to 1.6% over the next two months with similar traffic.
LCP fixes compared: effort, impact and cost
Some LCP fixes take minutes and deliver most of the gain; others take weeks. Start with the top rows of this table and move down only if field data is still above 2.5 seconds.
| Fix | Effort | Typical LCP gain | Agency cost (SAR) |
|---|---|---|---|
| Remove lazy-load, add fetch priority | Minutes | 0.3–1.5 s | Under 1,000 |
| Compress and resize hero images | Hours | 0.5–2 s | 1,000–3,000 |
| Replace slider with static hero | 1–2 days | 0.5–2 s | 2,000–5,000 |
| CDN, caching and hosting move | 2–5 days | 0.3–1.5 s | 3,000–10,000 |
| Font and critical CSS clean-up | 2–5 days | 0.2–1.2 s | 3,000–8,000 |
| Theme rebuild or re-platform | Weeks | 1–4 s | 25,000+ |
Gains and costs are typical ranges from our audits, before 15% VAT. Our technical SEO services include a Core Web Vitals audit that ranks fixes by this effort-to-impact ratio. For a wider view, see our guide to technical SEO site health.
Highlight: our LCP checklist
1) LCP element identified on mobile and desktop, in Arabic and English. 2) Hero is a real img in the HTML. 3) No lazy-load on the hero; fetchpriority=”high” set. 4) Hero under 150 KB in AVIF or WebP, with srcset. 5) TTFB under 800 ms with CDN and caching. 6) Critical CSS inlined, scripts deferred. 7) One font family, two weights, subset WOFF2.
Performance, Vision 2030 and what comes next
As Vision 2030 moves more services and shopping online, Saudi users are comparing every site with fast government and banking apps. Performance expectations will only rise.
- More local infrastructure: new data centres and cloud regions in the Kingdom make low TTFB easier and support data residency under the PDPL.
- Speculative loading: browser features that prerender likely next pages can make navigation feel instant.
- Performance in contracts: Core Web Vitals targets are becoming acceptance criteria in tenders and agency agreements.
- AI search: fast, well-structured pages are easier for crawlers and AI systems to fetch and summarise.
- Better Arabic fonts: variable Arabic fonts can replace several static weights with one file.
Frequently Asked Questions about LCP
What is a good Largest Contentful Paint score?
Google considers LCP good at 2.5 seconds or less, needing improvement between 2.5 and 4 seconds, and poor above 4 seconds. The score is judged at the 75th percentile of real page visits, so at least three out of four visits must load the main content within 2.5 seconds. Check mobile and desktop separately, because they often differ.
What causes a slow LCP?
The most common causes are a slow server response, a hero image discovered late because it is lazy-loaded or set in CSS, oversized image files, and render-blocking CSS, JavaScript or web fonts. Sliders, video heroes, anti-flicker scripts and many third-party tags make it worse. Breaking LCP into its four sub-parts shows which cause matters most on your page.
Should I lazy-load my hero image?
No. Lazy-loading tells the browser to wait before fetching the image, which directly delays LCP when the hero is the largest element. Load the hero normally, add fetchpriority=”high”, and keep lazy-loading for images further down the page. Many WordPress themes and plugins lazy-load every image by default, so check the first image specifically after each update.
How long does it take for LCP improvements to show in Search Console?
Field data comes from the Chrome UX Report, which uses a rolling 28-day window. After you deploy a fix, the reported value improves gradually and usually reflects the change fully after about four weeks. Lab tools such as Lighthouse show the effect immediately, so use them to confirm the fix works, then wait for field data to catch up.
Why is my Saudi website slow on mobile?
Saudi sites are often slow on mobile because they are hosted far from the Kingdom without a nearby CDN, load large seasonal banners, use several heavy Arabic font families, or run many marketing scripts. Hero sliders on Arabic pages are another common cause. Moving to regional hosting or a CDN and compressing the hero usually delivers the biggest improvement.
Does LCP affect Google rankings?
LCP is one of the Core Web Vitals, which form part of Google’s page experience signals used in ranking. Relevance and content quality matter more, so a fast page with weak content will not outrank a strong slow one. Between similar pages, however, better page experience can help, and faster pages almost always convert visitors better.
Can I fix LCP on Salla or Shopify?
Yes, within limits. On hosted platforms you cannot change the server, but you can compress and resize banners, replace sliders with a single static hero, remove apps that inject scripts above the fold and avoid video heroes on mobile. Theme choice matters a lot, so test a theme’s demo in PageSpeed Insights before buying or customising it.
Fixing Largest Contentful Paint for good
Largest Contentful Paint improves fastest when you diagnose before you optimise. Find the LCP element, split its time into server response, load delay, load duration and render delay, then fix the biggest slice first.
For most sites, that means a discoverable, high-priority hero image under 150 KB, a CDN close to your users, and fewer fonts and scripts. Confirm the result with 28 days of field data, then protect it with a performance budget so every new banner or app has to earn its place.
Want your LCP under 2.5 seconds?
Send us your URL and we will identify the LCP element, the slowest sub-part and a fix plan priced in SAR.
Get a free consultation See pricingWant this handled for you?
We build and optimise sites like this every week. Book a free 30-minute call and we will tell you exactly what we would change on yours.
Get a free site review
