← Back to blog

Understanding Web Performance

A deep dive into Core Web Vitals, performance optimization techniques, and why speed matters more than you think.

PerformanceWeb DevCore Web Vitals

Why Performance Matters

Web performance isn’t just a technical metric — it’s a user experience issue. Studies consistently show that:

  • 53% of mobile visitors leave a page that takes longer than 3 seconds to load
  • A 1-second delay in page load time can result in a 7% reduction in conversions
  • Google uses page speed as a ranking factor in search results

Core Web Vitals

Google’s Core Web Vitals are the three metrics that matter most:

Largest Contentful Paint (LCP)

LCP measures how quickly the main content of a page loads. Aim for under 2.5 seconds.

How to improve LCP:

  • Optimize and compress images
  • Use modern image formats (WebP, AVIF)
  • Preload critical resources
  • Use a CDN for static assets

Interaction to Next Paint (INP)

INP measures responsiveness — how quickly the page responds to user interactions. Aim for under 200ms.

How to improve INP:

  • Minimize JavaScript execution time
  • Break up long tasks
  • Use requestIdleCallback for non-critical work
  • Debounce event handlers

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts during loading. Aim for under 0.1.

How to improve CLS:

  • Set dimensions on images and videos
  • Reserve space for dynamic content
  • Avoid inserting content above existing content
  • Use CSS contain property

Practical Optimization Techniques

Here are some techniques I’ve been applying to this very site:

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/Inter.woff2" 
      as="font" type="font/woff2" crossorigin>

<!-- Lazy load images below the fold -->
<img src="hero.jpg" loading="lazy" 
     width="800" height="400" alt="Description">

Measuring Performance

Tools I recommend for measuring web performance:

  1. Lighthouse — Built into Chrome DevTools
  2. PageSpeed Insights — Google’s online tool
  3. WebPageTest — Detailed waterfall analysis
  4. Core Web Vitals report — In Google Search Console

The Static Site Advantage

This is one of the reasons I chose Astro for this site. By generating static HTML at build time, we eliminate:

  • Server-side rendering costs
  • Client-side JavaScript bundle parsing
  • Framework hydration delays

The fastest code is the code that never runs. Static sites ship only what’s needed — HTML, CSS, and the minimum viable JavaScript.

Key Takeaways

Performance optimization is an ongoing process, not a one-time task. Start by measuring, identify the biggest bottlenecks, and address them systematically. Your users (and Google) will thank you.