Website performance is no longer a technical concern — it is a business concern. Google uses Core Web Vitals as a ranking factor. Users abandon slow sites. Conversion rates drop with every additional second of load time. In 2026, performance optimization is a competitive advantage that directly impacts revenue.
Core Web Vitals in 2026
Google's Core Web Vitals measure real-user experience:
Largest Contentful Paint (LCP)
Measures how quickly the largest visible content element loads.
- Good: Under 2.5 seconds
- Needs Improvement: 2.5-4 seconds
- Poor: Over 4 seconds
Common LCP elements: hero images, heading text, video poster images.
Interaction to Next Paint (INP)
Replaced First Input Delay (FID) as the responsiveness metric. INP measures the latency of all interactions throughout the page lifecycle, not just the first one.
- Good: Under 200ms
- Needs Improvement: 200-500ms
- Poor: Over 500ms
INP captures clicks, taps, and keyboard inputs. A page that responds sluggishly to any interaction will score poorly.
Cumulative Layout Shift (CLS)
Measures visual stability — how much the page layout shifts unexpectedly during loading.
- Good: Under 0.1
- Needs Improvement: 0.1-0.25
- Poor: Over 0.25
Common causes: images without dimensions, dynamically injected content, web fonts causing text reflow.
Modern Performance Techniques
Image Optimization
Images are typically the largest page elements and the primary target for optimization:
Next-gen formats: WebP and AVIF provide 25-50 percent smaller file sizes than JPEG/PNG with equivalent or better quality. In 2026, browser support for both formats exceeds 95 percent.
Responsive images: Serve different image sizes based on the user's device. A mobile user should not download a 2000px-wide hero image:
<img
src="hero-800.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
width="1600"
height="900"
alt="Description of the image"
loading="lazy"
/>
Lazy loading: Images below the fold load only when users scroll near them. The native loading="lazy" attribute handles this without JavaScript.
Image CDNs: Services like Cloudinary and Imgix optimize, resize, and serve images from edge locations automatically.
Next.js Image component: Handles format conversion, responsive sizing, lazy loading, and placeholder blur automatically:
import Image from 'next/image';
<Image
src="/hero.jpg"
width={1600}
height={900}
alt="Description"
priority // Above-the-fold images should not be lazy loaded
/>
JavaScript Optimization
JavaScript is the most expensive web resource — it must be downloaded, parsed, compiled, and executed:
Code splitting: Load only the JavaScript needed for the current page. Modern bundlers (webpack, Turbopack, Vite) split code automatically at route boundaries.
Tree shaking: Eliminate unused code from bundles. Import only what you need:
// Bad — imports entire library (~80KB)
import _ from 'lodash';
const result = _.debounce(fn, 300);
// Good — imports only the function (~3KB)
import debounce from 'lodash/debounce';
const result = debounce(fn, 300);
Dynamic imports: Load heavy features only when needed:
// Chart library loads only when user views the analytics section
const Chart = dynamic(() => import('./Chart'), {
loading: () => <ChartSkeleton />,
});
Server Components: In Next.js, server components never send their JavaScript to the browser. A page can render complex data fetching and processing on the server while shipping zero JavaScript for those components.
Font Optimization
Web fonts can block text rendering and cause layout shifts:
Font display strategy: Use font-display: swap to show text immediately with a fallback font, swapping to the web font when loaded:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
Font subsetting: Include only the characters you need. If you only use Latin characters, subset the font to exclude Cyrillic, Greek, and other character sets — reducing file size by 50-80 percent.
Variable fonts: A single variable font file replaces multiple weight/style files, reducing total font download size.
next/font: Next.js automatically optimizes fonts, including self-hosting Google Fonts to eliminate third-party requests:
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
CSS Optimization
Minimal CSS: Tailwind CSS with purging removes unused styles, typically producing CSS files under 10KB for an entire application.
Critical CSS: Inline above-the-fold CSS in the HTML document so the initial render does not wait for a CSS file download. Modern frameworks handle this automatically.
Avoid CSS-in-JS runtime: CSS-in-JS libraries (styled-components, Emotion) generate styles at runtime, impacting performance. Prefer build-time solutions (Tailwind, CSS Modules, vanilla-extract).
Caching Strategy
Static assets: CSS, JavaScript, fonts, and images should be served with long cache lifetimes (1 year) and content-hashed filenames. When the file changes, the hash changes, busting the cache.
HTML pages: Short cache (revalidate frequently) or ISR (Incremental Static Regeneration) for content that changes periodically.
API responses: Cache responses at the CDN edge when appropriate. Stale-while-revalidate serves cached data immediately while fetching fresh data in the background.
Prefetching and Preloading
Link prefetching: When a user is likely to navigate to another page, prefetch that page's content:
// Next.js automatically prefetches links visible in the viewport
<Link href="/pricing">Pricing</Link>
Resource preloading: Critical resources can be preloaded to start downloading earlier:
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin />
DNS prefetching: Resolve DNS for third-party domains before they are needed:
<link rel="dns-prefetch" href="//api.stripe.com" />
Measuring Performance
Lab Testing
Controlled environment testing for consistent benchmarks:
- Lighthouse: Built into Chrome DevTools. Scores performance, accessibility, SEO, and best practices
- WebPageTest: Detailed waterfall analysis from multiple locations and device emulations
- PageSpeed Insights: Google's tool combining lab data with real-user data
Real User Monitoring (RUM)
Actual performance data from real users:
- Chrome User Experience Report (CrUX): Google's public dataset of real-user performance metrics
- Vercel Analytics: Real-user Web Vitals monitoring integrated with Vercel hosting
- SpeedCurve: Continuous RUM monitoring with alerting
Lab testing identifies opportunities. RUM confirms improvements work for real users.
Performance Budgets
Set maximum allowable values for key metrics:
- Total page weight: under 1MB
- JavaScript bundle: under 200KB (compressed)
- LCP: under 2 seconds
- INP: under 150ms
- CLS: under 0.05
- Time to First Byte: under 200ms
Enforce budgets in CI/CD: fail the build if any metric exceeds its budget.
Quick Wins
If you have not optimized your website yet, start here for the biggest impact with the least effort:
- Compress and convert images to WebP — often the single biggest improvement
- Add width and height to all images — eliminates CLS from image loading
- Enable Gzip/Brotli compression on your server
- Set proper cache headers for static assets
- Defer non-critical JavaScript with
asyncordeferattributes - Use a CDN for static asset delivery
- Lazy load below-the-fold images with
loading="lazy"
How We Optimize Performance
At RCB Software, websites we build consistently score 90+ on Lighthouse. We use Next.js with automatic image optimization, code splitting, and server components to deliver fast experiences out of the box. Contact us to improve your website's performance.