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.
|First Contentful Paint||2.4s||1.6s|
|Largest Contentful Paint||12.5s||1.6s|
|Time to Interactive||10.3s||1.6s|
|Total Blocking Time||160ms||0ms|
|Cumulative Layout Shift||0.432||0.001|
Here are some good docs on what these metrics mean.
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: