Web Performance Fundamentals

Why Performance Matters

Every 100 milliseconds of load time costs you conversions. Studies consistently show that users abandon sites that take more than a few seconds to load. Google uses page speed as a ranking factor, and Core Web Vitals now directly impact SEO.

Performance is not just a technical concern — it is a user experience imperative.

Core Web Vitals

Google defines three core metrics that every site should optimize:

Largest Contentful Paint (LCP)

LCP measures when the largest content element becomes visible. The target is under 2.5 seconds. Common culprits for poor LCP include slow server response times, render-blocking resources, and large unoptimized images.

Interaction to Next Paint (INP)

INP measures the latency of all interactions throughout the page lifecycle. The target is under 200 milliseconds. Long tasks on the main thread are the primary enemy of good INP.

Cumulative Layout Shift (CLS)

CLS measures visual stability — how much the page layout shifts during loading. The target is under 0.1. Unexpected layout shifts are one of the most frustrating experiences for users.

Practical Optimizations

Minimize JavaScript

JavaScript is the most expensive resource because it blocks rendering and parsing. Use code splitting to load only what is needed, tree-shake unused code, and defer non-critical scripts.

<script src="app.js" defer></script>

The defer attribute ensures the script does not block HTML parsing.

Optimize Images

Images typically account for the largest portion of page weight. Use modern formats like WebP or AVIF, implement responsive images with srcset, and always specify width and height to prevent layout shifts.

<img 
  src="photo.webp" 
  width="800" 
  height="600" 
  loading="lazy"
  alt="Description"
/>

Leverage Caching

Set appropriate cache headers for static assets. Use content hashes in filenames to enable long cache lifetimes while still busting cache when content changes.

Cache-Control: public, max-age=31536000, immutable

Reduce Server Response Time

Aim for Time to First Byte (TTFB) under 200ms. Use a CDN, optimize database queries, and consider static generation where possible — which is exactly what Hugo does.

Measuring Performance

The best tool for measuring real-world performance is the Chrome User Experience Report (CrUX), which provides field data from actual users. For lab testing, use Lighthouse in Chrome DevTools or the Web Vitals extension.

Remember: lab data is useful for debugging, but field data tells you what your users actually experience.

The Performance Budget

A performance budget sets limits on metrics that affect user experience. For example:

• Total page weight: under 500KB
• JavaScript: under 150KB compressed
• LCP: under 2.5 seconds
• CLS: under 0.1

Enforce these budgets in your CI pipeline to prevent regressions.

Conclusion

Web performance is a continuous practice, not a one-time fix. Measure regularly, optimize methodically, and always keep the user experience in mind. The fastest sites are the ones that respect their users’ time.