How We Achieved a Perfect 100 Google PageSpeed Score with Astro.js and Partial Hydration

At Cox Code, we're excited to share our journey on achieving a perfect 100 Google PageSpeed Score, which is no small feat. In a world where user experience can make or break a website's success, we took on the challenge head-on. We turned to Astro.js and the concept of partial hydration to give our users a lightning-fast, seamless experience. Let’s dive into the steps we took and the technologies we used to enhance our Core Web Vitals and achieve contentful load perfection.

How We Achieved a Perfect 100 Google PageSpeed Score with Astro.js and Partial Hydration

Fri Feb 09 2024

Ben Ajaero

How We Achieved a Perfect 100 Google PageSpeed Score with Astro.js and Partial Hydration

At Cox Code, we’re excited to share our journey on achieving a perfect 100 Google PageSpeed Score, which is no small feat. In a world where user experience can make or break a website’s success, we took on the challenge head-on. We turned to Astro.js and the concept of partial hydration to give our users a lightning-fast, seamless experience. Let’s dive into the steps we took and the technologies we used to enhance our Core Web Vitals and achieve contentful load perfection.

Understanding Core Web Vitals

Before we could start optimizing, we needed to understand what we were optimizing for. Core Web Vitals are a set of metrics that Google considers crucial to a website’s overall user experience. They include:

  • Largest Contentful Paint (LCP): Measures the load time of the main content on a page.
  • First Input Delay (FID): Assesses the time from when a user first interacts with your site to the time the browser can respond to that interaction.
  • Cumulative Layout Shift (CLS): Quantifies the amount of unexpected layout shift during the visual rendering of the webpage.

Improving these metrics was essential for a better user experience and for our SEO rankings.

Choosing Astro.js

Astro.js emerged as a leading solution due to its innovative approach to web development. It’s a static site generator that allows for building websites with a modern UI framework, yet it outputs the minimum amount of JavaScript needed. This approach aligns perfectly with the goal of optimizing Core Web Vitals, as it reduces JavaScript bloat, leading to faster load times, lower FID, and minimal CLS.

The Role of Partial Hydration

Astro.js uses a technique called partial hydration, which hydrates only the interactive components of a webpage rather than the entire page. This means that users only download the JavaScript they need, which drastically reduces the time to become interactive. This selective hydration plays a pivotal role in achieving high Core Web Vitals scores.

Our Approach to Optimization

Here’s how we leveraged Astro.js and other strategies to optimize our website:

Step 1: Minimal Initial Load

We used Astro.js to build our site with static rendering, which ensures that the initial load sent to the browser is minimal. We carefully analyzed our design components and only applied hydration to components that required interactivity.

Step 2: Optimize Images and Media

We optimized all our images and media files using modern formats like WebP and AVIF, which offer better compression and quality than traditional formats. Additionally, we implemented lazy loading so that images only load when they enter the viewport.

Step 3: Efficient CSS and Fonts

We paid special attention to our CSS, removing any unused styles with tools like PurgeCSS. We also optimized font delivery by selecting only the necessary font weights and styles and used font-display: swap to ensure text remains visible during font loading.

Step 4: Reducing Third-Party Scripts

Third-party scripts can be a significant drag on performance. We audited all scripts and removed any that were non-essential. For the ones we kept, we made sure to load them asynchronously or defer them to avoid blocking the main thread.

Step 5: Caching and CDNs

To ensure that repeat visits were just as fast as the first, we implemented aggressive caching strategies and distributed our content across a global CDN. This reduced latency and made sure our static assets were delivered quickly.

Step 6: Continuous Monitoring and Testing

We used tools like Lighthouse, WebPageTest, and Google’s own PageSpeed Insights to continuously monitor our performance. This allowed us to catch regressions and make iterative improvements.

The Result

After implementing these strategies, we re-ran our PageSpeed Insights test and were thrilled to see that big, beautiful “100” score for both mobile and desktop. Our LCP dropped below the 2.5-second threshold, FID was well under 100 milliseconds, and our CLS was virtually zero.

Conclusion

Achieving a perfect Google PageSpeed Score is not just about bragging rights; it’s about providing the best possible experience for our users. By leveraging Astro.js and partial hydration, along with a slew of other performance best practices, we were able to deliver a blazing-fast, efficient, and enjoyable web experience. Our journey to 100 is a testament to the power of modern web development techniques and the endless possibilities when you prioritize performance.

Read our comprehensive guide on accessibility in Australia.

Read our guide on creating accessible web content in Australia.


Ready to optimize your web performance and elevate your online presence? At Cox Code, we’re experts at crafting websites that not only look great but perform exceptionally under any conditions. We believe that a well-designed website is the cornerstone of a successful digital strategy, and our team is dedicated to transforming your digital ideas into reality.

Enhance your user experience, improve your SEO, and stay ahead of the Australian web standards with Cox Code’s bespoke web design and development services. Contact us today to see how we can tailor a web performance solution that drives success for your business.

About the author

Ben Ajaero

Ben Ajaero

Founder & Visionary

A motivated entrepreneur and dedicated student at UNSW pursuing a dual degree in Computer Science (Artificial Intelligence) and Aerospace Engineering (Honours), Ben is the driving force behind Cox Code. His vision for a digital agency that blends cutting-edge innovation with luxurious design has set Cox Code apart in the Australian tech landscape.

Schedule a Consultation

Contact Us

f1
f2
Our Blog
Why Is My Website Slow to Load and How Can I Speed It Up?

Your website's speed is not just a convenience for users; it's a cornerstone of your online presence's success. Slow loading times can lead to increased bounce rates, diminished user satisfaction, and lower search engine rankings. At Cox Code, we understand the crucial role that speed plays in the digital journey of your business.

What Impact Does Website Speed Have on SEO Rankings?

In the competitive realm of search engine optimization (SEO), website speed is not just a convenience for users; it's an essential factor in how a website ranks on search engine results pages (SERPs). Google and other search engines have unequivocally stated that site speed influences rankings, and this has been a game-changer for SEO strategies. Let's delve into the impact that website speed has on SEO rankings and why it's crucial for webmasters to prioritize it.

Quick Wins for Reducing Server Response Time

Speed and responsiveness of web applications play a pivotal role in user satisfaction and business success. Server response time, often referred to as Time to First Byte (TTFB), is a critical metric that web developers aim to minimize. This article explores practical strategies to reduce server response time across various modern server frameworks and technologies, such as Express, Koa, Nginx, Next.js, Laravel, Spring Boot, and Flask.