Testing 99 Pages With Lighthouse

I chose to perform an audit on the Facebook package selection page. I created this entire page and based it around what already existed for Square.

I audited the page in lighthouse and found that I got a score of:

• 24 Performance
• 90 Accessibility
• 93 Best Practises
• 90 SEO

Here are some of the quick wins that would be fairly easy to implement:

1. [role] values are not valid, there is a div with a role of price that is incorrect
2. Background and foreground colours do not have a sufficient contrast ratio, the orange and white colours on some button and span elements do not pass the contrast ratio threshold, the grey links in the footer also don't pass this test

Here are some potentially trickier things to do:

1. Tap targets are not sized appropriately, interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements, this applies to the hamburger menu and the site header
2. Document does not have a meta description, can this be achieved with React helmet or or is it something to do with server side rendering?

Here are some difficult things to do:

1. Overall the performance metric was really low, performance is hard to improve once you have a large code base with lots of dependencies, I had a warning about IndexedDB not sure if anyone else had that
2. Using code splitting which I believe we already do
3. Inline JS and CSS, deferring loading of all non critical assets
4. Remove unused CSS

Overall Lighthouse is a good tool to measure certain aspects of your website but it can't be relied on as the only thing that matters.