Web performance - Introduction and fundamentals

~3 min read
Web performance - Introduction and fundamentals

Optimize your website’s performance with quick, actionable guides on Web Vitals.


What is LCP and why is it important?


What is LCP?


Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on a webpage (usually an image or text block) to fully load. It’s a Core Web Vital that affects user experience and SEO rankings.


Why does LCP matter?


Having slow LCP makes a website feel slow. Additionally, fast-loading pages improve conversions and engagement.


How to measure LCP


You caan use tools like:


What’s a good LCP score? (based in Google recommendations)


LCP scores

How CLS affects User Experience and SEO


What is CLS?


Cumulative Layout Shift (CLS) measures how much a webpage’s elements move unexpectedly while loading. It affects user experience and SEO rankings.


Why is CLS important?


  • A high CLS makes pages feel unstable.
  • Unexpected shifts frustrate users and cause misclicks.
  • Google recommends a CLS score below 0.1.
  • Bad CLS could affect SEO rankings.

How to measure CLS


Use:

  • ✅ PageSpeed Insights (Under “Diagnostics”)
  • ✅ Chrome DevTools (Performance tab → Experience section)

Common causes of high CLS


  1. Images without dimensions
  2. Ads loading dynamically
  3. Slow font loading
  4. Lazy-loaded elements shifting the layout

How to Fix CLS


  • ✅ Set image & video dimensions (width & height)
  • ✅ Reserve space for ads & embeds
  • ✅ Use font-display: swap; for faster font rendering

A quick guide to measuring Web Vitals in Chrome DevTools


Why use Chrome DevTools?


Chrome DevTools is a built-in tool that lets you measure and debug Web Vitals in real time (no need for extra software).


How to check Web Vitals in Chrome DevTools


  • 1️⃣ Open DevTools → Right-click on a page → Click “Inspect”.
  • 2️⃣ Go to the Performance Tab.
  • 3️⃣ Click “Start Profiling and Reload Page”.
  • 4️⃣ Look for Web Vitals Metrics (LCP, CLS, INP, FID).

Interpreting results


  • ✅ LCP: Large elements should load in under 2.5s.
  • ✅ CLS: Layout shifts should be minimal (< 0.1).
  • ✅ FID/INP: Interactions should be responsive.

Other useful DevTools tabs


  • Lighthouse → Runs an automated Web Vitals report.
  • Elements → Helps find layout shift issues.
  • Network → Shows slow-loading resources.

How to check Web Vitals in Google Search Console


Why use Google Search Console (GSC)?


Google Search Console (GSC) tracks real user Web Vitals data from Chrome users, helping you diagnose site-wide performance issues.


How to find Web Vitals in GSC


  • 1️⃣ Go to Google Search Console.
  • 2️⃣ Navigate to “Core Web Vitals” under “Experience”.
  • 3️⃣ Check Your Mobile & Desktop Performance.

Understanding the data


  • 🟢 Green: Web Vitals are good. ✅
  • 🟡 Yellow: Needs improvement. ⚠️
  • 🔴 Red: Poor performance, fix required. ❌

Common issues in GSC


  • “LCP issue: longer than 2.5s” → Optimize images, fonts, and server response time.
  • “CLS issue: more than 0.1” → Fix layout shifts (set dimensions for images, reserve space for ads).
  • “Poor INP/FID” → Reduce JavaScript blocking time.

Final thoughts


If your LCP is slow, optimize images, use caching, and reduce render-blocking resources.

A low CLS score makes your site feel more professional and SEO-friendly. Check your CLS score and start optimizing today!

Chrome DevTools is an essential tool for debugging performance. Try running a test and see how your site scores!

GSC is great for monitoring real user performance over time. Check your report and start improving your scores!


Note: If you have any knowledge of web performance, at this point you may be thinking “he's talking about web vitals, but what about INP?”. Well, for that I have a complete dedicated blog that you can check here :) What is INP?


Stay tuned for more!


Thanks for reading :)

Also in

Medium blog