Performance

Web Performance for Dummies: LCP edition

Marcin Szczepaniak
26 Jun 2025
2 min. read

Web Performance for Dummies: LCP edition

Let's talk about making users fall in love with your website. If you want to build something truly great, it needs to be more than just beautiful; it has to be fast.

In this context, "performance" refers to how quickly your page loads, becomes interactive, and responds to user input. A slow site feels broken, but a fast, responsive site feels professional and reliable.

That's where Core Web Vitals comes into play.

Why Should We Care About Core Web Vitals?

Performance Metrics Directly Influence Search Rankings

Only a specific subset — the Core Web Vitals (LCP, INP, and CLS) — directly influences Google's search rankings.

Google uses Field Data for this, collected from real users via the Chrome User Experience Report (CrUX). This is different from Lab Data, which you get from tools like Lighthouse.

The two are connected. For example, a slow Time to First Byte (TTFB) delays the browser from even starting to render the page, which delays FCP and ultimately results in a poor LCP for your real users.

Higher User Satisfaction

If a slow load time causes just one extra visitor out of every hundred to leave, for a site with 1,000,000 monthly visitors, that's 10,000 lost potential customers every single month — 120,000 lost opportunities a year.

Better Scalability and Cost Reduction

Efficient websites are simply cheaper to run. In a modern serverless architecture, performance optimization directly impacts your hosting bill.

Today's Core Web Vitals Highlight: LCP

This metric measures the time from when the page first starts loading until the largest single element, typically an image or a block of text, becomes visible on the user's screen.

Common LCP Destroyers

Unoptimized Hero Image/Videos

  • Massive File Sizes and Outdated Formats: Serving a 2 MB JPEG when a 300 KB AVIF or WebP image would suffice.
  • Serving the Wrong Size: Your desktop hero image might be 2000px wide, but that same image should not be sent to a mobile device with a 400px screen.
  • The `loading="lazy"` Trap: Applying loading="lazy" to your main hero image explicitly tells the browser to delay loading the most important visual element on your page.

Excessively Long Fade-in Animations

A slow fade-in on your main content is a direct hit to your LCP score. The browser's LCP timer doesn't stop until an element is fully visible. If you animate your hero image with a slow opacity transition, you're forcing the browser to wait for that entire animation to finish.

Key Takeaways

Mastering LCP isn't just about technical optimization; it's about delivering an exceptional user experience. By focusing on efficient image handling, thoughtful animations, and carefully timed overlays, you can significantly improve your LCP score. A fast and responsive website is the cornerstone of a successful online presence.

Subscribe to our newsletter

Get Next.js tips, case studies, and frontend insights delivered to your inbox.

By clicking Sign Up you request to receive newsletters from us in accordance with Website Terms. The Controller of your personal data is Blazity Sp. z o.o. with its registered office at Warsaw, Poland, who processes your personal data for marketing purposes. You have the right to data access, rectification, erasure, restriction and portability, object to processing and to lodge a complaint with a supervisory authority. For detailed information, please refer to the Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.