{"post":{"slug":"how-to-speed-up-your-website-2026","title":"How to speed up your website in 2026: Core Web Vitals and beyond","excerpt":"A slow website loses visitors, conversions, and search ranking. Here are the highest-impact techniques to cut load time and pass Core Web Vitals in 2026.","category":"code","date":"April 3, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">A</span> one-second delay in page load time reduces conversions by ~7% and increases bounce rate measurably. In 2026, website speed is a product decision, an SEO signal, and a user experience requirement — not a nice-to-have. The good news is that 80% of the performance gains come from a small set of well-understood optimizations. Fix those first, then iterate.\n\n## What changed in 2026\n\n- **INP (Interaction to Next Paint) replaced FID** as a Core Web Vitals metric. INP measures the latency of all interactions, not just the first — JavaScript-heavy apps need to care about this.\n- **AVIF is now widely supported.** Chrome, Firefox, and Safari all support AVIF, which achieves ~50% smaller file sizes than WebP. Use it.\n- **HTTP/3 (QUIC) is default on most CDNs** — if you're on a modern CDN, you get it automatically.\n- **LLM-generated content sites are competing on speed** — if your pages feel slow compared to AI-generated alternatives, users leave.\n\n## The Core Web Vitals in 2026\n\n| Metric | What it measures | Good threshold |\n| --- | --- | --- |\n| LCP (Largest Contentful Paint) | When the biggest visible element loads | ≤ 2.5 s |\n| INP (Interaction to Next Paint) | Worst interaction response time | ≤ 200 ms |\n| CLS (Cumulative Layout Shift) | Visual stability during load | ≤ 0.1 |\n\nMeasure with PageSpeed Insights (real-world data) and Lighthouse (lab data). Real-world data from the CrUX dataset is what Google uses for ranking.\n\n## 1. Fix images first\n\nImages account for ~50% of average page weight. Every image should be:\n\n```html\n<!-- Use modern format, correct dimensions, lazy-load below fold -->\n<img\n  src=\"hero.avif\"\n  width=\"1200\"\n  height=\"630\"\n  alt=\"Hero image\"\n  loading=\"eager\"\n  fetchpriority=\"high\"\n/>\n\n<!-- Below-the-fold images -->\n<img src=\"feature.avif\" width=\"600\" height=\"400\" alt=\"Feature\" loading=\"lazy\" />\n```\n\n- Convert to AVIF (or WebP as fallback) — use Squoosh, Sharp, or a build-step plugin.\n- Set explicit `width` and `height` to prevent CLS.\n- `loading=\"lazy\"` for everything below the fold; `fetchpriority=\"high\"` for your LCP image.\n- Use responsive images with `srcset` for different viewport sizes.\n\n## 2. Optimize your JavaScript\n\nJavaScript is the second biggest culprit. Audit your bundle with `webpack-bundle-analyzer` or Vite's rollup-plugin-visualizer.\n\n```bash\n# Vite build with bundle analysis\nnpx vite build --mode analyze\n\n# Check your bundle size impact before adding a package\nnpx bundlephobia <package-name>\n```\n\nKey moves:\n- **Code-split by route** — don't load the checkout page's JS on the homepage.\n- **Tree-shake** — ensure your bundler eliminates unused code.\n- **Defer non-critical scripts** — analytics, chat widgets, A/B testing libraries.\n- **Replace heavy libraries** — replace Moment.js with `date-fns`, Lodash full with specific imports, Chart.js with lightweight alternatives.\n\n## 3. Use a CDN\n\nFor any site with global traffic, a CDN is not optional.\n\n| Setup | TTFB (typical) |\n| --- | --- |\n| Origin server only (US East) | 600–1200 ms (user in Asia) |\n| CDN with edge caching | 30–80 ms (from nearest PoP) |\n| CDN + HTTP/3 + early hints | ~20–50 ms |\n\nCloudflare (free tier is real), Fastly, and AWS CloudFront are the main options. At minimum, put your static assets and HTML pages behind a CDN.\n\n## 4. Set correct cache headers\n\n```nginx\n# Nginx example — fingerprinted assets can be cached forever\nlocation ~* \\.(js|css|avif|webp|woff2)$ {\n    add_header Cache-Control \"public, max-age=31536000, immutable\";\n}\n\n# HTML: revalidate every time\nlocation ~* \\.html$ {\n    add_header Cache-Control \"no-cache\";\n}\n```\n\nContent-addressed filenames (e.g., `main.3f9a2b.js`) let you set `immutable` cache headers safely — the filename changes when the content changes.\n\n## 5. Reduce Time to First Byte (TTFB)\n\n- **Server-side rendering or static generation** — don't make the browser wait for client-side JS to render the initial page.\n- **Edge functions for personalization** — run lightweight logic at the CDN edge rather than round-tripping to an origin.\n- **Database query optimization** — use indexes, avoid N+1 queries, add query result caching (Redis) for hot reads.\n\n## Common mistakes\n\n**Not setting a `fetchpriority=\"high\"` on the LCP image.** The browser can't know which image is the LCP candidate without the hint — add it.\n\n**Third-party scripts loading synchronously.** A single `<script src=\"...\">` without `async` or `defer` blocks the parser. Audit your third parties.\n\n**Layout shifts from fonts.** Use `font-display: swap` and preload critical fonts. Use `size-adjust` to prevent FOUT-induced CLS.\n\n**Over-optimizing before measuring.** Run Lighthouse and PageSpeed Insights first. Fix the highest-impact findings, re-measure, then iterate.\n\n**Ignoring mobile.** Google indexes mobile-first. Run your Lighthouse test in mobile mode.\n\n## What to skip\n\n- **Concatenating all CSS into one file** — with HTTP/2+, parallel requests are cheap; over-concatenation hurts cache granularity.\n- **Inlining large scripts** — inlined JS can't be cached; only inline critical CSS that's genuinely tiny (<2 KB).\n- **Preloading everything** — only preload the LCP image and critical fonts; preloading everything negates the benefit.\n\n## FAQ\n\n**What Lighthouse score should I aim for?**\n90+ on Performance is the practical target. The difference between 90 and 100 often involves micro-optimizations with little real-user impact. Prioritize real-user metrics (CrUX) over lab scores.\n\n**Does website speed actually affect Google ranking?**\nYes, directly via Core Web Vitals as a ranking signal. It also affects rankings indirectly through bounce rate and dwell time.\n\n**How do I measure real-user performance?**\nPageSpeed Insights shows field data from the Chrome User Experience Report (CrUX). For your own analytics, add the `web-vitals` JS library.\n\n**What is the fastest website stack in 2026?**\nStatic HTML + CDN wins on pure speed. Astro, Next.js with static export, or plain HTML all deliver <1s LCP with correct optimization.\n\n## Where to go next\n\n- [How to deploy a web app in 2026](/blog/how-to-deploy-a-web-app-2026)\n- [How to build a website in 2026](/blog/how-to-build-a-website-2026)\n- [REST API best practices in 2026](/blog/rest-api-best-practices-2026)","hue":317,"metaTitle":"How to Speed Up Your Website 2026: Core Web Vitals Guide","metaDescription":"Top 2026 techniques to speed up your website — optimize images, cut JS bundles, pass Core Web Vitals, and use a CDN. Practical and prioritized.","keywords":["how to speed up website 2026","core web vitals 2026","website performance optimization","lcp inp cls optimization","reduce page load time","image optimization web","cdn for website speed","javascript bundle size","lighthouse performance score","web performance best practices"],"tldr":["**Images are still the single biggest performance win** — use WebP/AVIF, lazy-load below the fold, and size them correctly.","**Core Web Vitals are a Google ranking signal** — LCP, INP, and CLS are the three metrics that matter in 2026.","**A CDN is not optional for global sites** — edge caching cuts TTFB from 800 ms to under 50 ms for cached assets.","**JavaScript bundles are still too large on most sites** — audit with Lighthouse, code-split aggressively, defer non-critical scripts.","**Skip:** micro-optimizing CSS before you have images and JS under control — fix the biggest wins first."],"readTime":"4 min read","wordCount":961},"related":[{"slug":"how-to-lazy-load-images-2026","title":"How to lazy load images in 2026","excerpt":"Native browser lazy loading covers most cases today, but getting LCP right still requires knowing when NOT to lazy-load and how to size images properly.","category":"code","date":"March 31, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":317},{"slug":"how-to-reduce-bundle-size-2026","title":"How to reduce bundle size in 2026: tree-shaking, code splitting, and audits","excerpt":"A large JavaScript bundle is a direct tax on every user load. Here is the 2026 guide to finding what bloats your bundle and cutting it without breaking things.","category":"code","date":"February 26, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":321},{"slug":"how-to-reduce-docker-image-size-2026","title":"How to reduce Docker image size in 2026","excerpt":"Bloated Docker images slow pull times, increase attack surface, and cost more in registry storage. This guide covers the concrete techniques that actually shrink them in 2026.","category":"code","date":"February 26, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":312}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"how-to-speed-up-windows-11-2026","title":"How to speed up Windows 11 in 2026: the fixes that actually work","excerpt":"Windows 11 slowdowns come from a short list of fixable causes. Here is the practical 2026 checklist to get your PC running fast without reinstalling.","category":"tech","date":"April 3, 2026","author":"ByteLedger Team","readTime":"5 min read","hue":250},"older":{"slug":"how-to-start-a-529-plan-2026","title":"How to start a 529 plan in 2026: open, fund, and invest it right","excerpt":"A 529 plan is the most tax-efficient way to save for college in 2026. Here is how to open one, pick the right state plan, and invest it without overcomplicating it.","category":"finance","date":"April 3, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":274}}