Add Performance Section

10up / Engineering-Best-Practices

10up Engineering Best Practices

https://10up.github.io/Engineering-Best-Practices/

MIT License

760 stars 205 forks source link

Add Performance Section #365

Closed dainemawer closed 3 years ago

dainemawer commented 3 years ago

Description of the Change

This PR adds the Web Vitals section to main navigation and secondary navigation to the Engineering Best Practices site. It also handles some minor CSS tweaks to account for the change in styling. Furthermore, I've added a detail page of content explaining the hows, whats and why's of Core Web Vitals for engineers to follow.

Benefits

New internal guidance for managing and achieving healthy Core Web Vitals across the team.

Verification Process

Tested navigation updates on desktop and mobile.

Checklist:

[x] I have read the CONTRIBUTING document.
[x] My code follows the code style of this project.
[x] My change requires a change to the documentation.
[x] I have updated the documentation accordingly.
[x] I have added tests to cover my change.
[x] All new and existing tests passed.

Applicable Issues

https://github.com/10up/Engineering-Best-Practices/issues/353

Changelog Entry

Added Core Web Vitals content.

dainemawer commented 3 years ago

@brentvr I've updated this PR based on what we spoke about yesterday. @joesnellpdx let me know how this looks to you!

joesnellpdx commented 3 years ago

@brentvr @dainelmawer

The new additions from Daine are good at this point (with fonts section may requiring further investigation)

Next steps (from my perspective):

[ ] Add local nav (bulleted list) at the top of the page covering the different headings / topics (some may link to sections in other areas of the site (i.e. php)
[ ] Fill in each section with content from Brent's document on Baseline Performance standards
[ ] Review
[ ] Define areas of further discovery (i.e. critical css)
[ ] Approve + deploy
[ ] Update functional reqs template
[ ] Optional / possibility: external blog post focusing on Web Vitals and linking back to best practices
[ ] Begin discussions on next steps (i.e. performance budgets)

dainemawer commented 3 years ago

Thanks for the checklist @joesnellpdx - I think this is a good path forward, lets please push to get this out before the end of the month to align with Googles update. @brentvr let me know if you need a hand

brentvr commented 3 years ago

@dainelmawer @joesnellpdx I've added the baseline performance sections, please can you review? Feedback and edits are of course very welcome.

A few things to note:

I've added a Third party embeds and scripts section over a Risks section.
There might be very slight duplication between the more high level sections like Images & Media and Fonts with the diagnosis contained in the CWV section.
Unrelated but the 8th item in the navigation is showing indented. Can we apply the fix in this PR?

dainemawer commented 3 years ago

@joesnellpdx @brentvr I've made updates to the content here as well as:

Fixed submenu item alignment
Fixed main navigation positioning and alignment.

tylercherpak commented 3 years ago

I think this section looks really great! Thanks @dainelmawer and everyone for your hard work. This is an excellent addition to the best practices. 😄