How to Improve Website Speed: Core Web Vitals Guide 2026

Published on July 26, 2026 by 92nodes

Website speed is no longer just a technical concern — it is a business-critical factor. Studies consistently show that faster websites generate more revenue, rank higher on Google, and create better user experiences. In 2026, with Google's Core Web Vitals firmly established as ranking signals, the stakes are higher than ever.

At 92nodes, speed optimization is built into every project from day one. In this comprehensive guide, we share the exact techniques we use to make websites load in under 2 seconds.

Understanding Core Web Vitals in 2026

Core Web Vitals consist of three key metrics that measure different aspects of user experience:

LCP — Largest Contentful Paint

LCP measures how long the largest visible element (usually a hero image or heading) takes to render on screen. It directly answers the user's question: "Is this page loading?"

• Good: Under 2.5 seconds
• Needs Improvement: 2.5 to 4.0 seconds
• Poor: Over 4.0 seconds

INP — Interaction to Next Paint

INP replaced FID (First Input Delay) in 2024 and measures how responsive your page is to user interactions like clicks, taps, and keyboard input.

• Good: Under 200 milliseconds
• Needs Improvement: 200 to 500 milliseconds
• Poor: Over 500 milliseconds

CLS — Cumulative Layout Shift

CLS measures visual stability. Have you ever tried to click a button and it suddenly moved because an image loaded above it? That is layout shift, and it frustrates users.

• Good: Under 0.1
• Needs Improvement: 0.1 to 0.25
• Poor: Over 0.25

How to Optimize LCP (Loading Speed)

1. Optimize Your Images

Images are usually the largest elements on a page and the biggest cause of slow LCP. Here is how to fix them:

• Use modern formats: WebP and AVIF offer 25-50% smaller file sizes than JPEG without quality loss
• Compress aggressively: Tools like TinyPNG, Squoosh, or Sharp can reduce file sizes by 60-80%
• Right-size images: Do not serve a 4000px image for a 800px container
• Lazy load below-fold images: Only load images when users scroll to them
• Use responsive images: Serve different sizes for different devices using srcset

2. Improve Server Response Time (TTFB)

Time to First Byte (TTFB) should be under 800ms. To improve it:

• Upgrade hosting: Shared hosting is slow. Use VPS, dedicated, or edge hosting
• Use a CDN: Cloudflare, Vercel Edge, or AWS CloudFront serve content from locations near your users
• Enable caching: Browser caching, server-side caching, and CDN caching reduce server load
• Optimize database queries: Slow queries are a common TTFB bottleneck

3. Eliminate Render-Blocking Resources

CSS and JavaScript files in the document head block rendering. Solutions include:

• Inline critical CSS for above-fold content
• Defer non-critical JavaScript with the defer attribute
• Load non-critical CSS asynchronously
• Minimize and bundle CSS/JS files

4. Use Server-Side Rendering (SSR) or Static Generation

Frameworks like Next.js and Nuxt.js render HTML on the server, delivering content immediately instead of waiting for JavaScript to execute in the browser. This dramatically improves LCP for content-heavy pages.

How to Optimize INP (Interactivity)

1. Break Up Long Tasks

JavaScript runs on the main thread, and long tasks block user interactions. If a script takes 500ms to run, the page cannot respond to clicks during that time.

• Split large JavaScript bundles into smaller chunks
• Use requestIdleCallback for non-urgent work
• Offload heavy computation to Web Workers
• Yield to the main thread using setTimeout or scheduler.yield()

2. Reduce JavaScript Execution Time

Less JavaScript means faster interactivity:

• Remove unused code with tree shaking
• Code-split your application by route
• Defer third-party scripts (analytics, chat widgets, ads)
• Use modern, efficient frameworks

3. Optimize Event Handlers

Poorly written event handlers can cause jank. Debounce scroll and resize events, avoid forced synchronous layouts, and use passive event listeners where possible.

How to Optimize CLS (Visual Stability)

1. Always Set Image Dimensions

The most common cause of layout shift is images without width and height attributes. When the browser does not know an image's size, it reserves 0px of space, then jumps when the image loads.

Always include width and height attributes on images, or use CSS aspect-ratio to reserve space before the image loads.

2. Reserve Space for Ads and Embeds

Dynamic content like ads, iframes, and social media embeds often cause layout shifts. Reserve space for them using min-height or aspect-ratio containers.

3. Avoid Injecting Content Above Existing Content

Do not insert banners, cookie notices, or promotional bars above the main content after the page has started loading. If you must, reserve the space in your initial layout.

4. Use font-display: optional or swap

Web fonts can cause layout shifts when they load and replace fallback fonts. Use font-display: swap to show fallback text immediately, or font-display: optional to only use the web font if it is already cached.

Advanced Speed Optimization Techniques

1. Implement a Content Delivery Network (CDN)

A CDN stores copies of your website on servers worldwide. When a user in Tokyo visits your site, they get content from a server in Asia, not from your origin server in the US. This can reduce load times by 50-70% for global audiences.

2. Enable HTTP/3 and Brotli Compression

HTTP/3 (QUIC) reduces connection establishment time, especially on mobile networks. Brotli compression reduces file sizes by 20-30% more than Gzip. Most modern CDNs support both automatically.

3. Use Resource Hints

Resource hints tell the browser to prepare for upcoming navigation:

• dns-prefetch— Resolve domain names early
• preconnect— Establish connections to critical domains
• prefetch— Load resources the user might need next
• prerender— Render entire pages in the background

4. Implement Edge Functions

Edge functions run code at CDN locations close to users, reducing round-trip time. They are perfect for personalization, A/B testing, and authentication checks without hitting your origin server.

Measuring and Monitoring Performance

Optimization without measurement is guesswork. Use these tools:

• Google PageSpeed Insights: Field and lab data for any URL
• Google Search Console: Core Web Vitals report for your entire site
• WebPageTest: Detailed waterfall charts and filmstrip views
• Lighthouse: Built into Chrome DevTools for local testing
• GTmetrix: Historical tracking and alerts

Why 92nodes Builds Fast Websites by Default

At 92nodes, performance is not an afterthought — it is a design constraint. Every project includes:

• ✓Next.js with static generation where possible
• ✓Automatic image optimization with modern formats
• ✓Edge deployment on Vercel or Cloudflare
• ✓Code splitting and tree shaking for minimal JavaScript
• ✓Performance budgets enforced in CI/CD pipelines

Frequently Asked Questions

Conclusion

Website speed optimization is a continuous process, not a one-time task. Start with the biggest wins — image optimization, server response time, and eliminating render-blocking resources — then progressively tackle more advanced techniques.

At 92nodes, we build websites that load fast by design, not by accident. Every line of code, every image, and every architectural decision is made with performance in mind.