Score high on Lighthouse

Lighthouse is Google’s free tool for checking how fast, accessible and well built a web page is. A Viralistic Astro site starts with high scores, and they usually only drop when something heavy is added later. This article is for site owners and developers who want to test properly, understand the report and fix the most common problems.

What Lighthouse measures

A Lighthouse report has four categories, each scored from 0 to 100:

Category	What it checks
Performance	How quickly the page shows content and becomes usable
Accessibility	Contrast, labels, alt text, headings and other basics for all visitors
Best practices	HTTPS, console errors, outdated or unsafe code
SEO	Titles, descriptions, crawlability and readable links

The performance score comes from lab measurements such as Largest Contentful Paint (when the main content appears), Total Blocking Time (how long scripts block the page) and Cumulative Layout Shift (how much the page jumps while loading).

Test the right way

1. Test the built site, never the dev server. Use a Netlify deploy preview, the live site, or run pnpm build followed by pnpm preview.
2. For a live URL, use PageSpeed Insights. It also shows real-user data from Chrome when your site has enough visitors.
3. For local testing, open Chrome DevTools in an incognito window and use the Lighthouse panel. Extensions in a normal window skew the results.
4. Look at the mobile result first. It is stricter and closer to how most people visit.
5. Run each test two or three times. Scores move a few points between runs.

What your site already does

A Viralistic Astro site is built for speed from the start:

• Every page is static HTML served from Netlify’s global network.
• No JavaScript framework is shipped by default; components only add small scripts where they need them.
• Images in src/assets are resized, converted and given fixed dimensions.
• Fonts are self-hosted through Astro’s font settings, limited to the characters the site needs and preloaded.

So when a score drops, look first at what was added recently.

Fix the common problems

Heavy images

The largest image on screen often decides the Largest Contentful Paint.

1. Make sure page images live in src/assets, not in public, so Astro optimises them.
2. Export no wider than needed (2560 pixels for a full-width hero is plenty).
3. Let the hero image load straight away, and everything below it lazily:

<Image src={hero} alt="Team at work" loading="eager" fetchpriority="high" />

Layout shift

• Images from src/assets get width and height automatically. For embeds (video, maps, booking widgets), reserve space with a fixed aspect ratio.
• Avoid banners or bars that push the content down after the page has loaded.

Too much JavaScript

Third-party scripts cause most performance drops: chat widgets, tag managers, heatmaps, video players and review widgets.

1. List every external script on the site and remove the ones nobody uses.
2. Only load a script on the pages that need it.
3. Show a thumbnail for embedded videos and load the player when the visitor clicks.
4. Load chat and similar widgets after the first interaction or after a short delay.

Tip: Before adding any new tool to the site, run Lighthouse on a deploy preview with and without it. You will see its exact cost.

Fonts

• Use Astro’s font settings in astro.config.ts, never a link to Google Fonts.
• Stick to one or two families, ideally variable fonts, and only the character sets you need.

Fix accessibility and SEO points

These categories list each failing check with the element that causes it. The usual suspects:

• Text with too little contrast against its background.
• Images without alt text, or form fields without labels.
• Links with vague text such as “click here”.
• Headings that skip levels.

Most of these are content fixes you can make in the page’s markdown file. Contrast issues are fixed once, in the colour tokens in src/styles/global.css.

Note: A score of 100 is nice, not the goal. Aim for green in all four categories on mobile and keep it there. Real visitors notice speed, not the number.

Keep it high

• Run Lighthouse on the deploy preview before merging large changes.
• Check the Core Web Vitals report in Google Search Console once a month. It is based on real visitors.

Next steps

• Images and media
• Make your Astro site rank well
• Deploy to Netlify