Website Speed Optimization Checklist 2026

A slow website loses visitors and Google rankings. 47% of users expect a page to load in under 2 seconds, and Google uses Core Web Vitals as a ranking factor.

This is the complete website speed optimization checklist for 2026 - the same techniques that got this site a 99/100 PageSpeed score.

Why Speed Matters

• 53% of mobile users abandon sites that take over 3 seconds to load
• Google ranking factor - Core Web Vitals directly affect search rankings
• Every 1 second delay reduces conversions by 7%
• Amazon found that every 100ms of latency cost them 1% in sales
• User experience - fast sites feel professional, slow sites feel broken

Core Web Vitals Explained

Google measures three specific metrics:

LCP (Largest Contentful Paint)

What: How long until the biggest visible element (usually hero image or heading) loads Target: Under 2.5 seconds Common causes of poor LCP:

• Large unoptimized images
• Slow server response time
• Render-blocking CSS/JS
• Client-side rendering delays

INP (Interaction to Next Paint)

What: How long the page takes to respond when a user clicks, taps, or types Target: Under 200 milliseconds Common causes of poor INP:

• Heavy JavaScript execution
• Long main thread tasks
• Third-party scripts blocking interaction
• Too many event listeners

CLS (Cumulative Layout Shift)

What: How much the page layout moves around while loading Target: Under 0.1 Common causes of poor CLS:

• Images without width/height dimensions
• Ads loading and pushing content
• Web fonts causing text reflow
• Dynamic content inserted above existing content

The Complete Optimization Checklist

1. Image Optimization (Biggest Impact)

Images are responsible for 50-80% of total page weight on most websites.

Action items:

• Use WebP or AVIF format - 25-50% smaller than JPEG/PNG
• Lazy load images below the fold - only load when user scrolls near
• Set width and height on all images - prevents CLS
• Use responsive images - serve smaller images on mobile (srcset attribute)
• Compress images - use TinyPNG, Squoosh, or Sharp
• Use a CDN for image delivery - Cloudflare, Vercel, or imgix
• Avoid hero images over 200KB - compress or reduce dimensions
• Use blur placeholder for hero images - better perceived performance

Next.js tip: Use the built-in next/image component. It automatically handles WebP conversion, lazy loading, responsive sizing, and blur placeholders.

WordPress tip: Install ShortPixel or Imagify plugin for automatic optimization.

2. JavaScript Optimization

JavaScript is the #1 cause of slow interactions (INP) and render blocking.

Action items:

• Remove unused JavaScript - audit with Chrome DevTools Coverage tab
• Code split - load only the JS needed for the current page
• Defer non-critical scripts - add defer or async attribute
• Minimize third-party scripts - each analytics/chat/ad script adds 50-200ms
• Tree shake - bundlers like Webpack remove unused code
• Minify JavaScript - removes whitespace and comments (automatic with most bundlers)
• Avoid long tasks - break JavaScript into chunks under 50ms

Third-party script audit:

1. Open Chrome DevTools → Performance tab
2. Record a page load
3. Look at "Third Party" in the summary
4. If any script takes >200ms, consider removing or lazy loading it

3. CSS Optimization

CSS can block the entire page from rendering if not handled properly.

Action items:

• Inline critical CSS - put above-the-fold styles in the HTML head
• Remove unused CSS - audit with Chrome DevTools Coverage tab
• Minify CSS - automatic with most build tools
• Avoid CSS @import - use link tags or bundler imports instead
• Use system fonts or font-display: swap - prevents invisible text while fonts load
• Limit web fonts - each font file is 20-100KB; use 1-2 fonts maximum

Font optimization:

• Use font-display: swap to show text immediately with system font
• Preload your primary font: <link rel="preload" href="font.woff2" as="font">
• Use variable fonts - one file instead of multiple weights
• Self-host fonts instead of loading from Google Fonts (saves a DNS lookup)

4. Server and Hosting Optimization

Your server response time affects everything.

Action items:

• Use a CDN - Cloudflare (free), Vercel Edge, AWS CloudFront
• Enable caching - set proper Cache-Control headers
• Use HTTP/2 or HTTP/3 - parallel loading of resources
• Enable Gzip or Brotli compression - reduces transfer size 60-80%
• Use edge hosting - serve from servers closest to users (Vercel, Netlify)
• Upgrade hosting if server response time > 500ms
• Use a static site generator when possible - pre-built pages are fastest

Caching strategy:

• HTML pages: Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400
• Static assets (JS, CSS, images): Cache-Control: public, max-age=31536000, immutable
• API responses: Cache-Control: public, s-maxage=60

5. HTML and DOM Optimization

A bloated DOM slows down rendering and interactions.

Action items:

• Keep DOM under 1500 nodes - excessive elements slow rendering
• Remove unnecessary wrapper divs - flatten your HTML structure
• Use semantic HTML - better for rendering and accessibility
• Preload critical resources - fonts, hero images, above-the-fold CSS
• Preconnect to third-party domains - <link rel="preconnect" href="...">
• DNS prefetch external domains - <link rel="dns-prefetch" href="...">

6. Mobile-Specific Optimization

Google uses mobile-first indexing, so mobile performance matters most.

Action items:

• Test on real devices - not just browser DevTools
• Reduce payload for mobile - serve smaller images and less JS
• Touch targets at least 48x48px - prevents accidental clicks
• Avoid horizontal scroll - content must fit mobile viewport
• Test on slow 3G - Chrome DevTools network throttling
• Remove hover-only interactions - mobile has no hover state

Free Speed Testing Tools

Optimization Priority Order

If you are overwhelmed, follow this order (biggest impact first):

1. Compress and lazy load images - usually saves 50-80% of page weight
2. Remove unused JavaScript - audit with Coverage tab
3. Enable caching and CDN - instant improvement for returning visitors
4. Optimize fonts - font-display: swap + preload
5. Defer third-party scripts - analytics, chat widgets, social embeds
6. Enable compression - Gzip or Brotli
7. Code splitting - load only what each page needs
8. Optimize CSS - inline critical, remove unused

Real Example: This Site's Optimization

ByteVerse.fyi scores 99/100 on PageSpeed mobile. Here is what we did:

• Next.js 16 with React Server Components (minimal client JS)
• Vercel Edge Network - global CDN with edge caching
• next/image - automatic WebP, lazy loading, responsive sizing
• Tailwind CSS - tree-shaken, only used classes ship
• Font: system stack + Inter - preloaded with font-display: swap
• No heavy third-party scripts - minimal analytics, no chat widgets
• Static generation for all blog pages - pre-built HTML at deploy time
• Dynamic imports - heavy components loaded only when needed

Common Speed Mistakes

1. Adding too many WordPress plugins - each plugin adds JS and CSS
2. Not optimizing images - uploading 5MB photos directly from camera
3. Loading all JS upfront - code splitting is essential
4. Too many fonts - each font weight is a separate file download
5. Not testing on mobile - desktop speed ≠ mobile speed
6. Ignoring third-party scripts - one chat widget can add 500ms
7. No caching headers - browsers re-download everything on every visit
8. Choosing slow hosting - $3/month hosting is usually slow

Related ByteVerse guides

Next, read Next.js 16 Deployment Guide 2026, How to Start a Tech Blog 2026, React 19 Best Practices 2026, and Build a RAG Chatbot with Next.js 2026 to build a stronger workflow around this topic.

Tools for Speed

Tailwind CSS 4 brings build speeds up to 100x faster with its new Oxide engine - a huge win for your development workflow and page performance.