Website Speed Optimization: A Practical Guide
Improve website speed with image compression, caching, code minification, and Core Web Vitals optimization. Actionable steps for developers and marketers.
Speed is a business metric
Amazon found every 100ms of latency cost 1% in sales. Google uses Core Web Vitals as a ranking signal. Users abandon pages that take more than 3 seconds on mobile. Speed optimization is not a developer side project — it directly affects revenue and search visibility.
This guide covers the highest-impact optimizations ordered by effort versus reward.
Measure before you optimize
Run Google PageSpeed Insights, WebPageTest, and a website audit to establish baselines. Focus on Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Fix the metric that fails thresholds first.
Image optimization (highest impact)
Images are the largest contributor to page weight on most sites. Compress every image with the image compressor. Convert to WebP with the image converter. Serve responsive sizes with srcset. Lazy-load below-the-fold images.
See our best free image compressor guide for settings by use case.
Caching and CDN
Set long cache headers for static assets (CSS, JS, images, fonts). Use a CDN to serve assets from edge locations near visitors. Configure cache busting via filename hashing so updates deploy cleanly.
Code minification and delivery
Minify CSS with the CSS minifier
Minify SVG assets with the SVG minifier
Defer non-critical JavaScript
Remove unused CSS and JS (tree-shaking in build tools)
Preload critical fonts and hero images
Server and hosting
Choose hosting with HTTP/2 or HTTP/3 support. Enable gzip or Brotli compression at the server level. Reduce Time to First Byte (TTFB) by optimizing database queries and using server-side caching for dynamic pages.
Third-party script audit
Analytics, chat widgets, ad trackers, and social embeds add latency. Audit each third-party script: does it justify its performance cost? Load non-critical scripts asynchronously. Self-host fonts instead of loading from Google Fonts when possible.
Speed optimization checklist
Hero image under 200 KB (WebP, compressed)
LCP under 2.5 seconds on mobile
INP under 200 milliseconds
CLS under 0.1
Total page weight under 1.5 MB
No render-blocking resources above the fold
Conclusion
Start with images — they deliver the biggest gains for the least effort. Then caching, then code. Measure after each change. Speed optimization is iterative, not one-time.
Core Web Vitals explained
LCP (Largest Contentful Paint) measures when the main content loads — target under 2.5 seconds. INP (Interaction to Next Paint) measures responsiveness to user input — target under 200 milliseconds. CLS (Cumulative Layout Shift) measures visual stability — target under 0.1. Failing any metric can hurt search rankings.
Google Search Console reports Core Web Vitals for your site based on real user data (field data), not just lab tests. Field data reflects actual visitor experience including slow devices and networks.
Font loading optimization
Web fonts block text rendering if loaded synchronously. Use font-display: swap to show fallback text immediately. Preload critical font files. Limit to two font families and four weight variants maximum. Self-host fonts to eliminate third-party DNS lookups.
Continuous performance monitoring
Set up performance budgets: max page weight, max LCP, max number of requests. Fail CI builds that exceed budgets. Review monthly trends in Search Console and analytics. Performance regressions often come from adding analytics scripts, chat widgets, or unoptimized images — not from code changes.
Lazy loading and resource hints
Lazy load images and iframes below the fold using loading="lazy" attribute. Preload critical resources with link rel="preload". Prefetch likely next-page resources with link rel="prefetch". DNS prefetch for third-party domains you connect to.
Speed on serverless and edge platforms
Serverless functions add cold start latency. Edge rendering reduces TTFB by serving from locations near users. Static generation eliminates server processing entirely for marketing pages. Choose architecture based on content update frequency and interactivity requirements.
Mobile-first optimization priorities
Test on real mobile devices with throttled networks, not just desktop Chrome DevTools. Mobile CPU is slower, networks are variable, and screen sizes vary widely.
Prioritize mobile LCP element — usually the hero image. Compress aggressively, preload, and serve from CDN edge.
Critical CSS extraction
Extract CSS needed for above-the-fold rendering and inline it in the HTML head. Load remaining CSS asynchronously. Tools like Critical and Penthouse automate extraction. This eliminates render-blocking CSS for initial paint.
Resource hints for faster loading
Preconnect to third-party origins you depend on: analytics, fonts, CDN. DNS-prefetch for less critical origins. Prefetch next-page resources on hover or scroll proximity for multi-page flows.
Performance audit schedule
Weekly: automated Lighthouse CI on deploy. Monthly: manual review of top 10 pages by traffic. Quarterly: full site audit including third-party script review. After every major feature launch: targeted audit of changed pages.
Use the website audit for quick monthly checks between comprehensive audits.
Summary: speed optimization priorities
Compress images first. Enable caching. Minify CSS/JS. Audit third-party scripts. Monitor Core Web Vitals monthly. Use website audit for quick checks.
Frequently asked questions
What is a good page load time?
Under 3 seconds on mobile for marketing pages. Under 1 second for interactive web apps after initial load.
Does website speed affect SEO?
Yes. Core Web Vitals (LCP, INP, CLS) are Google ranking signals.
Should I optimize for mobile or desktop first?
Mobile. Google uses mobile-first indexing, and mobile networks are slower.
How often should I audit site speed?
After every major deploy and monthly for active sites. Run the [website audit](/tools/website-audit) tool for quick checks.
What is the biggest speed win for most sites?
Image optimization. Compress and convert images before upload. This single change often improves LCP by 1–3 seconds.
Related articles
Best Free Image Compressor Tools in 2026
Compare the best free image compressors for JPEG, PNG, and WebP. Learn compression settings, quality tradeoffs, and how to speed up your website.
9 min readSEO Checklist: 30 Steps to Rank in 2026
Complete SEO checklist for on-page, technical, and content optimization. Actionable steps for startups, SaaS, and content sites.
5 min readBest AI Website Builders in 2026: Compared and Ranked
Compare the best AI website builders for speed, SEO, design control, and publishing. See how Zovaty Web stacks up and pick the right tool for your launch.
10 min read