As a website visitor, I expect the website to be available and load fast both on initial load and when loading dynamic data. I want all interactive elements, like forms and links, to function as expected. The overall website is to be usable on all my devices so that I don’t have to wait for my information to be available or cannot perform a desired action.
Requirements:
[ ] achieve a 100% (good) ranking on Web Vitals for LCP, CLS, INP, FCP, TTFB, and TBT (CLS needs improvement!)
[ ] optimize media and add loading placeholders for heavy images, use caching and optimization Nextjs features effectively
[ ] use server components whenever possible, keep page and layout components server components, minimize client-side data fetching
[ ] Create a loading UI with loading.tsx
[ ] use React.Suspense to provide loading placeholders for heavy components
[ ] Stream content and cache content effectively to optimize loading times
As a website visitor, I expect the website to be available and load fast both on initial load and when loading dynamic data. I want all interactive elements, like forms and links, to function as expected. The overall website is to be usable on all my devices so that I don’t have to wait for my information to be available or cannot perform a desired action.
Requirements:
Estimated Time: 39 hours
Ressources:
https://web.dev/articles/vitals