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:
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 Free