~ 1 min read

Comparing Performance Between Old & New Sites

Blog Hero Image

In my prior post, I detailed my experience of rebuilding my site using Astro. Now, I want to do some actual comparisons between old and new performance. I ran lighthouse on both and here are the results.

Light House Configurations

For both tests, I used the same lighthouse configurations

  • Mode: Navigation
  • Device: Mobile
  • Categories: Performance, Accessibility, Best Practices, SEO, PWA

I also made sure to run the test in incognito mode to avoid extensions such as React DevTools affecting the results.

Light House Scores

I’d like to note these scores are a bit skewed as I removed the projects section which included a lot of unoptimized images/gifs, which are all loaded the moment the page loads.

Category Scores

CategoryOldNew
Performance4899
Accessibility8198
Best Practices8392
SEO92100

Metrics

MetricOldNew
First Contentful Paint2.4s1.6s
Speed Index4.3s1.6s
Largest Contentful Paint12.5s1.6s
Time to Interactive10.3s1.6s
Total Blocking Time160ms0ms
Cumulative Layout Shift0.4320.001

Here are some good docs on what these metrics mean.

The old site loads around 125kb worth of javascript, whereas the new site loads almost none: the only javascript file being google analytics. This is the reason why First Contentful Paint is the same as Time to Interactive since it’s purely HTML.

AstroJS is a huge part of the performance gain, but also reworking/optimizing the site using the latest recommendations helped as well.

In any case, the numbers are just:

wow!