April 2025 · 8 min read

Page Speed Improvement: 10 Quick Wins That Actually Matter

Check your site performance freeAnalyze My Site Free

Most page speed guides list every possible optimization regardless of effort or impact. This guide is different — it ranks improvements by ROI, starting with the changes that take minutes and fix Core Web Vitals, then progressing to intermediate and advanced techniques. Work through them in order and you will address the vast majority of performance issues before reaching the lower-impact items at the bottom of the list.

1. Add explicit width and height to all images

Zero performance benefit but eliminates CLS (layout shift) on almost every site. Add width and height attributes to every img tag. Takes 30 minutes. Fixes a Core Web Vital immediately.

2. Add fetchpriority=high to your LCP image

The single most impactful LCP fix for image-heavy pages. Add fetchpriority='high' to the img tag for your hero or largest above-fold image. Tells the browser to prioritize this image download. Takes 5 minutes.

3. Add loading=lazy to below-fold images

Defers loading of images not visible in the initial viewport. Reduces initial page weight significantly on image-heavy pages. Add loading='lazy' to all img tags except your hero image. Takes 15 minutes.

4. Convert images to WebP

WebP is 25-35% smaller than JPEG at equivalent quality. Use Squoosh or ShortPixel to batch convert. Update img src references. For new images, configure your image pipeline to output WebP automatically.

5. Enable server-side caching

If your pages are dynamically generated on every request, caching the output reduces server response time dramatically. In WordPress: install WP Super Cache or W3 Total Cache. On Nginx: enable fastcgi_cache. On Vercel: use appropriate cache-control headers.

6. Add a CDN

Cloudflare free tier is the fastest ROI in web performance. Sign up, change nameservers, and your static assets are served from edge nodes near your users. Reduces TTFB for international visitors and most static assets.

7. Defer non-critical JavaScript

Add defer attribute to script tags that are not needed for initial render. Google Tag Manager, analytics, chat widgets, and A/B testing scripts are prime candidates. Each deferred script reduces render-blocking time.

8. Preload your LCP image

Add link rel=preload as=image href=/hero-image.webp in your HTML head. The browser fetches this resource immediately during HTML parsing, before it discovers it during render tree construction. Shaves 200-500ms from LCP.

9. Remove unused CSS and JavaScript

Use Chrome DevTools Coverage tab to see which CSS and JS is unused on each page. Remove or defer unused styles and scripts. Even removing 50KB of unused CSS can improve render time noticeably.

10. Reduce server response time (TTFB)

LCP cannot start until your server sends the first byte of HTML. Target under 200ms TTFB. Measure with PageSpeed Insights. If TTFB is slow, focus on caching, database query optimization, and server upgrade before any frontend optimization.

11. Use resource hints: dns-prefetch and preconnect

Third-party resources (fonts, analytics, CDN assets) require a DNS lookup and TCP connection before they can load. Add link rel=dns-prefetch for domains you use but do not load immediately, and link rel=preconnect for origins you need right away (Google Fonts, your CDN). Two preconnect tags in your head can shave 100-300ms from first contentful paint on pages that depend on third-party resources.

12. Self-host your web fonts

Google Fonts and other hosted font services add a cross-origin request that delays text rendering. Download the font files (woff2 format), host them on your own server or CDN, and reference them with a local @font-face rule. Combine this with font-display: swap so text renders immediately in a fallback font while the custom font loads. Pages that previously loaded Google Fonts see 100-200ms improvement in First Contentful Paint after switching to self-hosted fonts.

13. Implement critical CSS inlining

Above-fold content should render before any external stylesheet finishes downloading. Extract the CSS needed to style only the visible portion of the page and inline it inside a style tag in the head. Move the full stylesheet to load asynchronously. Tools like Critical (npm package) or PurgeCSS automate this extraction. Sites with large CSS files see the most benefit - this technique often reduces First Contentful Paint by 200-400ms because the browser can render the hero section without waiting for a full stylesheet.

14. Minimize main-thread blocking with web workers

JavaScript that runs on the main thread blocks user interaction - the root cause of poor INP scores. Move computationally expensive tasks (data processing, complex calculations, large array operations) into Web Workers, which run in a separate thread. The main thread stays free to handle user interactions, keeping INP well under the 200ms Good threshold. This is an advanced optimization for sites with complex JavaScript applications, but for SaaS products and interactive tools it is often the highest-impact INP fix available.

Check your site speed and SEO

Free analysis in 60 seconds

Analyze My Site Free