Astro Site Quality Improvement Guide — Achieving PageSpeed Mobile Score of 99

Introduction

The Acecore official site, relaunched in March 2026, was built with Astro 6 + UnoCSS + Cloudflare Pages. However, the newly launched site was at the “it works” level at best — with room for improvement across performance, SEO, accessibility, and UX.

This article summarizes the journey through 150+ improvements to achieve PageSpeed Insights mobile 99 and perfect 100 on all desktop metrics.

The PageSpeed Mobile 99 Challenge

The first thing to communicate is that achieving a high score on PageSpeed Insights mobile is much harder than you’d expect.

Lighthouse’s Mobile Simulation

PageSpeed Insights runs Lighthouse under the hood, applying the following throttling for mobile tests:

This means that even a page that loads in 1 second on a fiber connection will take 5–6 seconds under Lighthouse’s simulation. Loading 200 KiB of CSS alone causes approximately 1 second of blocking on slow 4G.

Non-Linear Score Scaling

PageSpeed scores are not linear:

• 50 → 90: Achievable with basic optimizations (image compression, removing unnecessary scripts)
• 90 → 95: Requires strategic CSS, font, and image delivery
• 95 → 99: Millisecond-level tuning. Decisions between CSS inlining vs. external files become critical
• 99 → 100: Influenced by external CDN response times and Lighthouse’s own measurement variance. Extremely difficult to achieve consistently for sites with AdSense or GA4

Score Variance

Even for the same site, scores can fluctuate by 2–5 points between measurements. Causes include:

• Image CDN response times (e.g., wsrv.nl)
• Cloudflare Pages edge server cache status
• Lighthouse’s own measurement error

For this reason, the goal should be “consistently high scores across repeated measurements,” not “scoring 100 once.”

Final Scores

Despite these challenges, we were able to consistently achieve the following scores:

Four Pillars of Improvement

Improvements were organized into four major categories, with each topic detailed in separate articles.

1. Performance

Performance optimization contributed the most to achieving mobile 99. We systematically addressed bottlenecks: CSS delivery strategy (inline vs. external), font self-hosting, responsive image optimization, and deferred loading of AdSense/GA4.

The three most impactful changes:

• CSS externalization: Switching from inlining 190 KiB of CSS to an external file reduced HTML transfer size by up to 91%
• Font name mismatch fix: @fontsource-variable/noto-sans-jp registers the font name Noto Sans JP Variable, but CSS was referencing Noto Sans JP — this mismatch was discovered and fixed
• Responsive images: Set srcset + sizes on all images to serve appropriately sized images for mobile

2. SEO

To support Google’s rich results, we implemented 7 types of JSON-LD structured data. Combined with OGP meta tags, canonical URLs, sitemap optimization, and RSS feed enhancements, we built a foundation for accurately communicating site structure to search engines.

3. Accessibility

PageSpeed Accessibility 100 was achieved by passing axe DevTools and Lighthouse automated tests. This involved adding aria-hidden to decorative icons (30+ instances), screen reader notifications for external links, contrast fixes (text-slate-400 → text-slate-500), and applying focus-visible styles globally — steady, incremental work.

4. UX & Code Quality

We resolved script breakage issues caused by View Transitions (ClientRouter) across all components and implemented full-text search with Pagefind. On the code side, TypeScript type safety was improved and constants were centralized (social URLs, ad IDs, GA4 ID consolidated into SITE constants), significantly improving maintainability.

Tech Stack

Conclusion

Achieving PageSpeed Insights mobile 99 comes down to rigorously following the principle of “don’t send what’s not needed.” CSS delivery strategy, font self-hosting, image optimization, deferred external script loading — each is a simple measure on its own, but combined they deliver significant impact.

By pursuing SEO, accessibility, and UX improvements in parallel, high scores across all four categories become achievable. Rather than obsessing over 100, aiming for a stable 95+ is a more realistic goal.

See the link cards above for detailed coverage of each topic. For information on the improvement workflow and how changes were reflected in code, also check out the Development Workflow with GitHub Copilot.