How I optimized the web performance of my NextJS 14 website (a series)
What I learned while speeding up my own website (series)
This time, Being a Web Performance Engineer, I focused on the performance upgrades, so currently i am documenting my journey here. So, I would recommend you to bookmark this article, in case you are interested in making your site faster or reach out to me:
Here is a series of hacks on how I improved my personal website's performance and core web vitals scores:
Current Core Web Vitals score as measured in (lighthouse for Desktop):
| Metric | Current (in prod) | Latest (in dev) |
| ----------------- | -------------------| ---------------- |
| FCP | 0.3 s | 0.3 s |
| LCP | 0.7 s | 0.4 s |
| TBT | 0 ms | 0 ms |
| CLS | 0 ms | 0 ms |
| Speed index | 0.8 s | 0.8 s |
| INP | 0 | 0 |
| Metric | Before (Google Fonts) | After (Self Hosting) | Improved by % |
| ---------------- | --------------------- | -------------------- | ------------- |
| Font File Size | 128KB | 44K | 65.6% |
| Loading Speed | 20 ms | 6ms | 70 % |
| Metric | Before | After Optimizations| Improved by % |
| ----------------- | -------------------| ------------------ | ---------------- |
| Unused CSS | 20.4 KB | 0 KB | 100 % |
| Stylesheet Size | 268 KB | 121 KB | 54.9 % |
| Metric | Before | After Optimizations | Improved by % |
| ----------------- | -------------------| ------------------ | ---------------- |
| TBT (Desktop) | 40 ms | 0 ms | 100 % |
| TBT (Mobile) | 10 ms | 0 ms | 100 % |
As you can see this were the scores before the optimization :
| Metric | (prod) | (dev) |
| ----------------- | -------------------| ------------------|
| TTFB | 26 ms | 32 ms |
| RLD | 667 ms | 680 ms |
| RLT | 30ms | 56 ms |
| ERD | 38ms | 92ms |
and after the optimization:
| Metric | (prod) | (dev - new) | Improved by % |
| ----------------- | -------------------| --------------------- | ---------------- |
| TTFB | 26 ms | 30 ms | 6.2% |
| RLD | 667 ms | 0 ms | 100 % |
| RLT | 30ms | 0 ms | 100 % |
| ERD | 38ms | 629 ms | -583.7 % |
After I optimized the images, fonts and css files, I focused on optimizing the JS load time.
and before the optimization, here were the scores:
and after the optimization:
| Metric | (before) | (after) | Improved by % |
| ----------------- | ------------------- | ------------------ | ---------------- |
| TTFB | 30 ms | 26 ms | 13.3% |
| RLD | 0 ms | 0 ms | 0% |
| RLT | 0 ms | 0 ms | 0% |
| ERD | 629 ms | 100 ms | 84.1% |
And her is the lighthouse scores after all the optimizations:
Also here, I have added a performance checklist for Web Developers:
With great power's comes great responsibility, having a website is not enough you have to also take care of the various aspects of it.
This is a ongoing series, so keep watching this space. Do follow and subscribe to my newsletter for updates: