INTRO
A business site that takes five seconds to show the hero on mobile is leaving trust and SEO on the table. After tuning my own portfolio and client sites, these are the LCP issues that show up repeatedly.
Hero media must be discoverable
If the LCP element is a CSS `background-image`, crawlers and Lighthouse often start the download late. Prefer a real image element with `priority` / fetch priority.
Serve sized assets per breakpoint. Do not force a 2x desktop portrait onto phones.
JavaScript weight after first paint
Defer non-critical analytics. Load chat widgets on interaction. Keep the first viewport free of heavy client islands when HTML would do.
App Router server components help — until you wrap the entire page in client providers “just in case.”
Fonts and layout
Use `next/font`, subset weights you actually use, and avoid invisible text delays where possible.
CLS should stay near zero: set dimensions on media, reserve space for async UI.
KEY TAKEAWAYS
“Real hero images beat CSS backgrounds for LCP.”
- 02
Third-party scripts are usual suspects.
- 03
Measure on mobile throttling, not only desktop Wi‑Fi.
CONCLUSION
Closing thought
If your Next.js marketing site fails mobile LCP, send PageSpeed + URL via Contact — I can target the top offenders first.
CONTINUE
Related pages
UP NEXT
Pragmatic REST API Design for Node.js Services
Rules I follow when designing Express (or similar) APIs so clients stay predictable, errors debuggable, and future changes do not break mobile or web silently.
Read next article