Skip to content

The Ultimate Web Performance Checklist for 2026

Hermes Team · · 2 min read

Performance isn’t optional anymore. Users expect instant loads, and search engines reward fast sites. This checklist covers everything from critical rendering path to long-term maintenance.

Core Web Vitals

Before diving into tactics, understand the metrics:

MetricTargetWhat It Measures
LCP< 2.5sLargest contentful paint
FID< 100msFirst input delay
CLS< 0.1Cumulative layout shift

1. Optimize Your Images

Images are often the largest assets. Use modern formats and responsive sizing:

  • WebP and AVIF — Smaller file sizes, broad support
  • Responsive images — srcset and sizes for different viewports
  • Lazy loading — loading="lazy" for below-the-fold images
  • Aspect ratio — Reserve space to prevent CLS
<img
  src="/hero.webp"
  alt="Hero"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

2. Minimize JavaScript

Ship only what you need:

  • Zero JS by default — Astro, static HTML, no framework runtime
  • Islands — Hydrate only interactive components
  • Code splitting — Dynamic imports for heavy features
  • Tree shaking — Ensure your bundler eliminates dead code

3. Font Loading Strategy

Fonts can block rendering. Use font-display: swap and preload critical fonts:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

4. Critical CSS

Inline above-the-fold CSS and defer the rest. Tools like Critters can automate this.

5. Caching Headers

For static assets, use long cache times with content hashing in filenames. For HTML, use short or no-cache to ensure users get updates.

6. Preconnect and Prefetch

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="prefetch" href="/blog/next-post" />

7. Reduce Third-Party Impact

Every script you add can slow things down. Audit analytics, ads, and widgets. Load them asynchronously or after the main content.

8. Server and CDN

  • Edge deployment — Serve from locations close to users
  • HTTP/2 or HTTP/3 — Multiplexing and faster connections
  • Compression — Brotli or gzip for text assets

9. Monitor Over Time

Set up continuous monitoring. Lighthouse CI in your pipeline catches regressions before they hit production.

10. Test on Real Devices

Emulated throttling helps, but real 3G on a mid-range phone reveals the true experience.

Performance is a journey, not a one-time fix. Start with the biggest wins—images and JavaScript—and iterate from there.