As google recently announced their new guidelines for Web Vitals as an update of their existing Lighthouse KPIs, a lot of discussion on how to to optimize against these values has come up. I wanted to document some of the best practices that I ended up using.
As a disclaimer, if your goal is to reach a performance score ≥ 85 with a tool like web.dev or pagespeed insights, any kind of client side hydration or JS in general is not your friend and using Nuxt with isomorphic rendering can only be optimized so far, especially if you have a somewhat complex application / site.
During the Google IO/19 Zoe & Martin also mentioned that Google Search ranks any page on the base of a first time visit, so features like client side navigation, pre-fetching, client caches & web workers, while great for the user, will have no direct beneficial impact on your ranking.
The main argument here is that they improve the UX to such a degree that it will impact the rankings trough a lower number of people returning to the SERPs after visiting the page - this is only true for a small number of pages tough.
Web Vitals
I wont go to much in to the new set of KPIs as google does pretty good Job of that themselves.
It basically breaks down in multiple measurements that indicate when and how fast a user can Interact with a page.
On top it also added some new recommendations for page improvements, like the notorious “Remove unused JavaScript”
I wonder if the metrics and the analytics client team get along…
As of right now these KPIs & recommendations are not yet rolled out in Chrome Stable (build 83.0.4103.106) — but can be seen via googles web testing tools and newer builds — like canary.
Performance measurement
Baseline
Different frameworks will have a different performance baseline, you can get a good overview about the state of different frameworks at https://perf-track.web.app/
report for https://perf-track.web.app/vue/
It uses the Chrome User Experience Report, so it is based on real live data. Vue by itself is doing pretty well, that changes if you start to compare Vue Nuxt vs. React Next.
But as the site says “Correlation does not imply causation.”.
Development
Of course your development performance indicators will be highly unstable and vary from what the production values will be — but they can still be helpful to spot larger mistakes or indicate changes.
Basic Browser Tools
lighthouse result set
To get a detailed report inside you can use the built in chrome lighthouse tools.
For an instant overview of the web core vitals you can use the new web vitals chrome extension.
#core-web-vitals #performance #nuxtjs #vuejs #vue #programming
