Guide
7 Website Performance Fixes That Actually Move the Needle
Most performance advice is noise. "Minify your CSS" saves you 2KB. "Use a CDN" is obvious. Here are the 7 changes that will actually make your site faster and improve your Core Web Vitals scores. For a deeper technical dive covering 12 techniques, see our site speed optimization guide .
How fast is your site right now?
Foglift measures your Core Web Vitals and gives you a prioritized list of performance fixes.
Test Your Site Speed Free1. Optimize Your Largest Contentful Paint (LCP) Element
LCP measures when the biggest visible element loads. This is usually a hero image, heading, or video thumbnail. Google wants this under 2.5 seconds.
The fix: Identify your LCP element (run a Lighthouse audit or use Foglift). If it's an image, serve it in WebP/AVIF format, set explicit width/height attributes, and add fetchpriority="high" to load it before other resources. If it's text, ensure your font loads fast (see tip #3).
2. Eliminate Render-Blocking Resources
CSS and JavaScript in your <head> block the browser from rendering anything until they download and parse. This is often the single biggest performance killer.
The fix: Inline critical CSS (the styles needed for above-the-fold content) directly in the HTML. Load the rest asynchronously with media="print" onload="this.media='all'". For JavaScript, use defer or async attributes. This alone can cut seconds off your load time.
3. Fix Font Loading (The Hidden LCP Killer)
Custom fonts are the most common cause of invisible text and slow LCP. The browser hides text until the font downloads — on slow connections, this means users see a blank page for seconds.
The fix: Add font-display: swap to your @font-face declarations. Preload your primary font with <link rel="preload" as="font">. Better yet, use system fonts — they're free, instant, and look great: system-ui, -apple-system, sans-serif.
4. Lazy Load Below-the-Fold Images
If your page has 20 images but only 2 are visible when it first loads, you're wasting bandwidth loading 18 images the user hasn't scrolled to yet.
The fix: Add loading="lazy" to every image that's not visible in the initial viewport. Do NOT lazy load your LCP image — that makes it slower. Native lazy loading is supported in all modern browsers and requires zero JavaScript.
5. Reduce JavaScript Bundle Size
JavaScript is the most expensive resource on the web. It has to be downloaded, parsed, compiled, and executed. Every KB of JS costs more than a KB of an image.
The fix: Audit your dependencies. Check your bundle with npx source-map-explorer or Webpack Bundle Analyzer. Common culprits: moment.js (replace with date-fns or dayjs), lodash (import individual functions), and unused UI framework components. Code-split routes so users only load what they need.
6. Implement Proper Caching Headers
Without caching headers, browsers re-download everything on every visit. This is one of the highest-impact, lowest-effort fixes you can make.
The fix: Set Cache-Control: public, max-age=31536000, immutable for static assets with hashed filenames (CSS, JS, images). For HTML pages, use Cache-Control: public, max-age=0, must-revalidate so browsers always check for fresh content but still benefit from caching.
7. Use a Modern Image Format (WebP or AVIF)
JPEG and PNG images are often 2-5x larger than their WebP or AVIF equivalents. Switching formats is one of the easiest wins. Our image optimization for SEO guide covers formats, compression, responsive images, and alt text in detail.
The fix: Convert images to WebP (95%+ browser support) or AVIF (85%+ support, even better compression). Use the <picture> element with fallbacks. Most CDNs and frameworks (Next.js, Cloudflare) can auto-convert images on the fly.
How to Measure Your Progress
After implementing these fixes, measure the impact. Use Foglift to run before and after scans and compare your scores. Focus on these metrics:
- LCP under 2.5 seconds
- INP under 200ms
- CLS under 0.1
- Total page weight under 1.5MB
- Time to First Byte (TTFB) under 800ms
Related guides:
Frequently Asked Questions
What is the biggest factor in website speed?
+
Images are the single biggest factor for most websites — they typically account for 50-70% of total page weight. Converting to WebP format (26% smaller than PNG, 30% smaller than JPEG per Google research), adding proper width/height attributes, and implementing lazy loading can cut page weight by 40-60%. After images, the next biggest factors are render-blocking JavaScript and unoptimized CSS.
Does website speed affect SEO rankings?
+
Yes. Google confirmed Core Web Vitals (LCP, INP, CLS) as a ranking signal. Pages with good CWV scores rank higher than equivalent pages with poor scores. A 2021 Deloitte study found that a 0.1-second improvement in mobile load time increased conversion rates by 8.4% for retail and 10.1% for travel sites. Site speed also affects AI search: faster pages are more efficiently indexed by AI crawlers like GPTBot and ClaudeBot.
What is a good page load time?
+
Aim for LCP (Largest Contentful Paint) under 2.5 seconds — that's Google's threshold for 'good'. Under 1.5 seconds is excellent. For total page load, under 3 seconds is the target — 53% of mobile visitors abandon sites that take longer (Google, 2018). Use server-side rendering (SSR) or static site generation (SSG) to achieve sub-second time-to-first-byte.
How do I find my website's performance bottlenecks?
+
Run a free website audit at foglift.io to see your overall performance score and specific issues. For deeper diagnostics, use Google Lighthouse in Chrome DevTools (F12 → Lighthouse tab) which shows JavaScript execution time, render-blocking resources, and network waterfall. Focus on the 'opportunities' section — these are the fixes with the biggest estimated time savings.
Find your site's performance bottlenecks
Foglift identifies the exact performance issues holding your site back — with AI-powered fix recommendations.
Test Your Site Speed FreeFundamentals: Learn about GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization) — the two frameworks for optimizing your content for AI search engines.