How to Make Your Website Load Faster
The complete playbook for faster page loads. Ordered from highest impact to lowest, so you can stop at any point and still have a meaningfully faster site.
Table of contents
- Step 1: Measure where you are
- Step 2: Fix your LCP image
- Step 3: Lazy-load below-the-fold images
- Step 4: Defer non-critical JavaScript
- Step 5: Audit third-party scripts
- Step 6: Set explicit dimensions on all media
- Step 7: Inline critical CSS
- Step 8: Self-host or preload fonts
- Step 9: Use a faster host or add a CDN
- Step 10: Reduce CSS
- Step 11: Use modern formats and compression
- Step 12: Eliminate render-blocking resources
- Step 13: Lazy-load below-the-fold iframes
- Step 14: Use the Next.js / Astro / SvelteKit `<Image>` component
- Step 15: Optimize INP
- Step 16: Re-test and iterate
- The 80/20 timeline
- What not to do
- The bottom line
If you want a faster website, you have dozens of possible optimizations and limited time. This is the ordered playbook — start at #1 and stop whenever you're satisfied. Each step gives meaningful gain on its own.
Step 1: Measure where you are
Run a baseline audit so you can verify improvements. Free audit here or use PageSpeed Insights. Write down:
- Performance score (mobile)
- LCP, CLS, INP
- Top "Opportunities" by estimated savings
Step 2: Fix your LCP image
The biggest visible element on first load — usually your hero image. The single highest-impact fix on most sites.
- Compress and convert to WebP (or AVIF). Use Squoosh for one-offs.
- Resize to exactly the displayed dimensions.
- Preload it:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> - Don't lazy-load it. Don't use a CSS background-image for it.
- Set explicit
widthandheightattributes.
Full guide: LCP: What It Means and How to Improve It.
Step 3: Lazy-load below-the-fold images
Every image below the initial viewport gets loading="lazy":
<img src="..." loading="lazy" width="..." height="..." alt="...">
Browser support is universal. No JavaScript needed. Easy 5–10 point gain on image-heavy pages.
Step 4: Defer non-critical JavaScript
Every <script> tag in your <head> that isn't required for rendering gets defer or async:
<script src="/analytics.js" defer></script>
<script src="/chat-widget.js" async></script>
For inline scripts, move them to the end of <body> if they don't affect first render.
Step 5: Audit third-party scripts
Open Chrome DevTools → Network tab → reload. Sort by Domain. Anything that's not your domain is a third party — analytics, ads, A/B test tools, chat widgets, embeds.
For each one, ask: "Do we actually need this?" Most sites can remove 30–50% of third-party scripts with no impact on functionality. See how JavaScript slows down websites.
Step 6: Set explicit dimensions on all media
Every <img>, <video>, and <iframe> gets width and height attributes. This eliminates Cumulative Layout Shift, which is 25% of your Performance score.
<img src="..." width="800" height="450" alt="...">
<iframe src="..." width="560" height="315"></iframe>
See CLS: What It Means and How to Fix It.
Step 7: Inline critical CSS
The CSS needed to render above-the-fold content goes inline in <style> in your <head>. The rest can load asynchronously.
Tools like Critical or Beasties automate this.
Result: the browser can render visible content before the main stylesheet downloads.
Step 8: Self-host or preload fonts
Custom fonts cause flash of invisible text (FOIT) and layout shifts. Two fixes:
<!-- Preload the critical font -->
<link rel="preload" as="font" type="font/woff2" crossorigin
href="/fonts/inter-var.woff2">
/* Prevent invisible text during load */
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
font-display: swap;
}
Better: use font-display: optional and accept the system fallback if the custom font doesn't load in time.
Step 9: Use a faster host or add a CDN
If your Time to First Byte is over 600ms, your host is the bottleneck. Cheap options to improve it:
- Cloudflare (free) — sits in front of your existing host, caches static assets, serves from edge
- Move to Vercel/Netlify — free for hobby sites, instant globally
- Upgrade your WordPress host to Kinsta or WP Engine
See how hosting affects website performance for a deep dive.
Step 10: Reduce CSS
CSS frameworks like Bootstrap and Tailwind ship a lot of unused rules by default. Purge unused CSS:
- Tailwind does this automatically with
contentin the config - For other frameworks: tools like PurgeCSS
Typical savings: 30–80% off your CSS bundle.
Step 11: Use modern formats and compression
Make sure your server is sending:
- Brotli compression on text assets (~20% smaller than gzip)
- Long cache headers on hashed assets (
Cache-Control: public, max-age=31536000, immutable) - WebP/AVIF for images
Most modern hosts do this automatically. Check with curl -I yoursite.com and look for Content-Encoding.
Step 12: Eliminate render-blocking resources
The PageSpeed Insights "Eliminate render-blocking resources" diagnostic lists every blocking script and stylesheet. Each one is a candidate for defer, async, or inlining.
Step 13: Lazy-load below-the-fold iframes
YouTube embeds, Google Maps, Twitter widgets — add loading="lazy":
<iframe src="..." loading="lazy" width="560" height="315"></iframe>
For YouTube, consider a facade pattern (show a thumbnail, only load the player on click) — saves ~500KB per embed.
Step 14: Use the Next.js / Astro / SvelteKit <Image> component
If you're on a modern framework, the built-in image components handle preloading, srcset, lazy loading, and modern formats automatically. Use them.
Step 15: Optimize INP
If your LCP and CLS are green but the site still feels laggy, work on INP. Cut JavaScript, break up long tasks, debounce expensive event handlers. See INP: What It Means and Why It Matters.
Step 16: Re-test and iterate
After every batch of changes, re-run your audit. Don't trust your gut. Look at:
- Performance score (should be climbing)
- LCP (should be dropping)
- TBT (should be dropping)
- CLS (should be near 0)
If a metric got worse, undo your last change and investigate.
The 80/20 timeline
If you have:
- 1 hour: Steps 2, 3, 4 (LCP image, lazy load, defer JS) — typically +15–30 points
- A day: Add steps 5, 6, 8 (audit 3rd-party, dimensions, fonts) — typically +30–50 points
- A week: Everything above + step 9 (hosting) and step 15 (INP) — likely 80–95+ score
What not to do
- Don't chase a 100 score at the expense of features. 90 with great UX > 100 stripped to nothing.
- Don't add complexity to "optimize" before measuring. Many "optimizations" make things slower.
- Don't blame the framework. Most performance problems are payload and main-thread work — both fixable in any framework.
The bottom line
Make your website faster by going down this list in order. Stop when the score is good enough for your needs. Each step gives real, measurable improvement.
For specific deep dives, see why is my website so slow and how to improve your PageSpeed Insights score. When you're ready, run a free audit to see your current score.
Frequently Asked Questions
How fast should my website load?+
Under 2.5 seconds for Largest Contentful Paint is the target. Real users perceive anything over 3 seconds as 'slow' and start bouncing. Aim for under 2 seconds on mobile.
What's the single highest-impact speed change?+
For most sites: optimizing the LCP image (preload, modern format, correct size). That single change often cuts LCP by 50% or more.
Do I need to redesign my site to make it faster?+
Almost never. 90% of speed problems are fixed by image optimization, JavaScript reduction, and better hosting — all of which can be done without changing the design.
See how your site really performs
Run a full website health check on mobile and desktop in 30 seconds — no signup needed.