Add Web Vitals Best Practices
dainemawer opened this issue · 9 comments
Describe the solution you'd like
I would like to propose that we add a "Web Vitals" section to the 10up Best Engineering Practices site. The possible sub-navigation could work similarly to what I've suggested below:
Web Vitals
- Philosophy (what are Web Vitals, why should we care)
- Diagnosis (how we determine the current health of web vitals)
- Cumulative Layout Shift (best practices for fixing CLS)
- First Input Delay (best practices for fixing CLS)
- Largest Contentful Paint (best practices for fixing CLS)
Additional context
Mike Bal's blog post on Web Vitals
Daine Mawer's blog post on Web Vitals
I'm thinking more of a "Web Performance" tab and have Web Vitals be a primary section within and other bits can link out to their appropriate areas (like the existing sections for CSS / JS). So, like in web vitals, we may mention code splitting, and link to the performance best practice in JS - and explain the what/how there.
Not sure that is the "right way" ... but what I'm thinking.
Yeah I think have a broader "Web Performance" tab might make more sense in the long run as we add content here. We will also want to define what we mean by "Web Performance" which I assume it to be more front-end focused.
This sounds good to me, chaps. @joesnellpdx definitely agree that linking to existing sections is important. Theres still a few holes we need to fill there (in terms of writing documentation for code splitting) but I can try map this out so we know where to start.
@tylercherpak agreed on the semantics behind "Web Performance" - I can write an introductory paragraph that mitigates this for sure. I'll set this site up locally and see what I can do!
The only other concern (after seeing the updates I did yesterday) ... is where will this fit in the nav? We can cross that bridge when we get there, but may have to be part of this update. Content first priority.
Also noticed that when I cloned this repo down. I feel like some of those nav items should probably exist in a dropdown or something.
Also noticed that when I cloned this repo down. I feel like some of those nav items should probably exist in a dropdown or something.
@dainelmawer I fix some of that here (not yet merged): #349 (comment)
What I'm considering as a solution for the addition of performance is to increase the nav break (hamburger split) to a size where it al fits. Not 100%, but thinking might be the least LOE and get us where we need to be.
@dainelmawer how this fits into the main nav aside (that's a separate problem we can solve), were you still planning to stub out a new section for this in a PR for others to comment on / add to?
@jeffpaul that's still the plan - I'm going to start working on this next week, hopefully, we can have something for comment / PR before 4/5!
@joesnellpdx @tylercherpak PR for this issue here: #365