BricksBlog
Advanced Web Development / Performance Optimization

Web Performance Fundamentals

Core Web Vitals, critical rendering path, lazy loading, and the techniques that make sites feel instant.

2 min read Updated Feb 12, 2026 Reviewed Jan 15, 2026

Why Performance Matters

Speed is not a feature — it is the foundation. A 100ms delay reduces conversion by 7%. Users perceive sites as slow after 1 second. Google uses Core Web Vitals as a ranking signal. Performance is user experience, SEO, and revenue, all in one metric.

Core Web Vitals

Google defines three metrics that measure real user experience:

  • LCP (Largest Contentful Paint) — How quickly the main content loads. Target: under 2.5 seconds.
  • INP (Interaction to Next Paint) — How responsive the page is to user input. Target: under 200ms.
  • CLS (Cumulative Layout Shift) — How stable the visual layout is. Target: under 0.1.

The Critical Rendering Path

The browser must complete these steps before pixels appear on screen:

  1. HTML parsing — Build the DOM tree
  2. CSS parsing — Build the CSSOM tree
  3. JavaScript execution — May modify DOM/CSSOM (this blocks rendering)
  4. Render tree — Combine DOM + CSSOM
  5. Layout — Calculate element positions
  6. Paint — Fill in pixels

Every CSS file and synchronous script in the <head> blocks this pipeline. Minimize what is render-blocking.

Loading Strategies

Script Loading

<!-- Blocks rendering (avoid) -->
<script src="app.js"></script>

<!-- Downloads in parallel, executes after HTML parsed -->
<script defer src="app.js"></script>

<!-- Downloads in parallel, executes immediately -->
<script async src="analytics.js"></script>

Resource Hints

<!-- Resolve DNS early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Establish connection early -->
<link rel="preconnect" href="//cdn.example.com">

<!-- Download critical resource early -->
<link rel="preload" href="hero.webp" as="image">

Image Optimization

Images are typically the largest payload on any page. Optimize aggressively:

  • Use WebP/AVIF formats (30-50% smaller than JPEG)
  • Set explicit width and height attributes to prevent CLS
  • Use loading=”lazy” for below-the-fold images
  • Use srcset for responsive images
  • Serve appropriately sized images — never serve a 4000px image in a 400px container

CSS Performance

Inline critical CSS in the <head> for above-the-fold content. Load the rest asynchronously. Avoid expensive selectors (deep nesting, universal selectors). Minimize layout thrashing by batching DOM reads and writes.

Measuring Performance

Lighthouse in Chrome DevTools gives you a score and specific recommendations. WebPageTest.org provides detailed waterfall charts. The Chrome User Experience Report (CrUX) shows real-world data from actual users.

The Page Builder Problem

Page builders like Elementor and Bricks generate excessive DOM nodes, unused CSS, and render-blocking JavaScript. A custom-built theme with only the code it needs will always outperform a page builder. This is not theory — it is physics. Less code means less to parse, less to render, less to download.

Summary

Performance optimization is not premature — it is professional. Every kilobyte matters, every render-blocking resource costs time, and every millisecond affects user experience. Build lean from the start.