The 3 Second Rule of Web Performance

The 3-Second Rule of Web Performance

You have three seconds.

After that, your users leave.

Google research shows 53% of mobile users abandon a site if it takes longer than 3 seconds to load.

Slow sites cost you money. Improving mobile load times by 0.1 seconds increases retail conversions by 8.4%.

Performance is not just a technical metric. It is a business metric.

To win, you must understand Core Web Vitals:

• LCP (Largest Contentful Paint): How fast users see the main content. Aim for under 2.5s. • INP (Interaction to Next Paint): How fast the page reacts to clicks. Aim for under 200ms. • CLS (Cumulative Layout Shift): How stable the page is. Aim for under 0.1.

Stop guessing and start optimizing. Here is how to beat the clock:

JavaScript Optimization • Ship less code. Use dynamic imports to load code only when needed. • Use tree-shaking. Switch from CommonJS to ES modules to remove dead weight. • Move heavy work to Web Workers. Keep the main thread free for user input. • Use defer or async. Stop letting scripts block your HTML parsing.

CSS and Rendering • Inline critical CSS. Load only what is visible above the fold first. • Avoid layout thrashing. Batch your reads and writes to prevent constant recalculations. • Animate with transform and opacity. These use the GPU and avoid layout shifts. • Use content-visibility: auto. Skip rendering for content that is off-screen.

Image Strategy • Use modern formats. WebP and AVIF are much smaller than JPEG. • Set width and height attributes. This prevents layout shifts (CLS). • Lazy-load images below the fold. Do not lazy-load your LCP hero image. • Use srcset. Serve smaller images to mobile users.

Network and Caching • Use a CDN. Move your content closer to your users to reduce latency. • Enable compression. Use Brotli or Zstandard to shrink file sizes. • Cache aggressively. Use immutable cache headers for hashed assets. • Keep bfcache working. Avoid using the unload event to ensure instant back/forward navigation.

The goal is simple: avoid work.

The fastest code is the code your users never download. The fastest request is the one the browser never has to make.

Source: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1