Why Is My Astro Site Slow? 7 Fixes That Work
Astro sites are fast by default, so a slow one has a specific cause. The seven usual suspects, how to spot each, and the fix, from big images to too many islands.
By the AstroBeginner team. Reviewed by Blaise Kavai, VP of ProductPublished 8 minute readComplete beginner
In this guide
Astro’s whole point is speed. It sends plain HTML and no JavaScript unless you ask for some. So when an Astro site is slow, something specific was added. Here are the seven usual suspects, in the order we’d check them.
First, measure
Open PageSpeed Insights, paste your address, and look at the mobile score. Below it is a list of what’s slow, biggest first. Fix the top item, test again. Don’t guess.
1. Big images
The most common cause by a mile. A photo straight from a phone is 3 to 5 MB. Ten of them is a 40 MB page.
Spot it: PageSpeed says “Properly size images” or “Serve images in next-gen formats”.
Fix it: Put images in src/images/ and use Astro’s <Image> component instead of a plain <img>. Astro resizes them, converts them to WebP, and adds the width and height so the page doesn’t jump. How to add images walks through it. This one fix often takes a score from 60 to 95.
2. Web fonts loaded the slow way
Fonts from Google Fonts or Adobe mean a trip to another server before any text shows.
Spot it: Text appears late, or flashes from one font to another.
Fix it: Serve the fonts from your own site with a Fontsource package, and use font-display: swap so text shows at once in a fallback font. How to add custom fonts. Two weights of one family is plenty.
3. Too many islands loading at once
Every island with client:load ships JavaScript that runs before the page is useful. Five React components on client:load is a React app, not an Astro site.
Spot it: PageSpeed says “Reduce unused JavaScript” or “Minimize main-thread work”.
Fix it: Ask each island whether it needs to be interactive at all. Many don’t. For the ones that do, use client:visible so they load when scrolled into view, or client:idle. Which client directive to use.
4. Third-party scripts
Analytics, chat widgets, ad networks, social embeds. Each one is someone else’s code running on your page, and some of them are enormous.
Spot it: PageSpeed lists them under “Reduce the impact of third-party code”.
Fix it: Remove any you don’t look at. Keep one analytics tool, not two. For the rest, add defer or async to the script tag so it doesn’t block the page. For heavy ones, Astro’s Partytown integration runs them off the main thread: npx astro add partytown.
5. Video on the page
A video tag with autoplay downloads a huge file the moment the page opens.
Spot it: The page’s total size in PageSpeed is tens of megabytes.
Fix it: Show a poster image and load the video only when someone clicks. Or embed from YouTube with the loading="lazy" attribute on the iframe.
6. A CSS framework you’re using five percent of
A full CSS library can be hundreds of kilobytes.
Spot it: PageSpeed says “Reduce unused CSS”.
Fix it: If you use Tailwind, you’re fine, it only ships what you use. If you linked a big library from a CDN, either use its “only what I need” build or write the handful of rules yourself.
7. The wrong host
A static site on a single server in Virginia is slow in Australia. Cloudflare, Netlify and Vercel copy your files to many places around the world.
Spot it: The site is fast for you and slow for a friend far away.
Fix it: Move to one of those hosts. Best hosting for Astro compares them, and it’s free.
What good looks like
A simple Astro page with optimised images scores 95 to 100 on mobile without trying. This site’s guide pages, with search, fonts, analytics and a cover image, score in the high 90s. If you’re below 90, one of the seven above is the reason.
Where to go next
- How to add images, fix number one.
- What are Astro islands? to understand fix number three.
Frequently asked questions
How do I measure my site's speed?
Open PageSpeed Insights at pagespeed.web.dev, paste your address, and read the mobile score. Look at the list under it. It names the slow parts in order.
Is Astro slower than plain HTML?
No. Astro outputs plain HTML with no JavaScript unless you add some. A slow Astro site is slow because of what was added to it, not because of Astro.
Does my host matter?
A little. Cloudflare, Netlify and Vercel all serve from many locations worldwide, so your files are near your visitors. A single cheap server in one country is slower for everyone far from it.
Stuck on a step?
Check the common errors guide, look up a word in the glossary, or ask the friendly people in the official Astro and EmDash Discords. How to ask so people can help.