lighthouse VS axe-core

When we implemented the MVP of the fintech app, we had a quite complicated form. At that time, I was still young and inexperienced. And eventually, we realized that our project was slowing down. We had to spend additional hours figuring out the reason. We had many unnecessary re-renders because we ignored basic rules related to props in React. I wanted to do everything possible to avoid such situations in the future. So, I added to the project linters like this and an additional starting configuration to package.json to run why-did-you-render. In short, this plugin issues a warning if something is re-rendered unnecessarily and suggests how to avoid it. Also, we included running Lighthouse in headless mode. Some people say that premature optimizations are bad, but for me, it's a principle: do it right from the start.

There's a link to what they mean by mobile network there (https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md) and it says:

Here's the non-psuedo code equivalent that can leverage CompressionStream rather than using a browserified-gzip-library: https://github.com/GoogleChrome/lighthouse/blob/437eb4d757c5...

We use it in Lighthouse for the exact same purpose, a URL #hash full of state. We found that modern browsers support 10mb of data in the hash. https://github.com/GoogleChrome/lighthouse/pull/12509#discus...

You can find out if your SaaS app is slowing down with Google Chrome Lighthouse. Lighthouse should be a staple in your monitoring because it lets you see the performance, accessibility, and SEO metrics related to your app's performance.

[2] https://github.com/GoogleChrome/lighthouse/issues/10023#issu...

Lighthouse: A tool developed by Google to measure a website’s performance using an average of six metrics.

Performance Using Lighthouse as a measurement tool, the blog should score 100 on all criteria.

For implementation testing (e.g. WCAG 2.1 compliance, performance, best sec practices) there are checkers like webhint, lighthouse, and Pa11y.

The website should score 80+ in performance, SEO, and accessibility in Google Lighthouse tests. Plus, the load time should always be less than 2 seconds and ideally in the order of a few hundreds of milliseconds. The real challenge lies here, since the website consists of more than 2 million pages, and pre-rendering them all will take weeks. Also, the content shown in most of the pages is not static. Thus, we opted for an incremental static regeneration approach. When a visitor hits a page no one ever visited, Next.js generates it with the data retrieved from the APIs exposed by the backend. Then, Next.js caches the page for 30 or 60 seconds, depending on the importance of the page.

Not only does the Open Web Components project provide the generator that we are basing our web component on in this conversation, but they also vend Chai A11y aXe which binds axe-core with Chai assertions for easy consumption in the @web/test-runner environment. This means that you can use the industry standard accessibility testing engine to confirm the accessibility of your web component at unit test time. This looks like the following:

I would recommend getting a tool like axe and hooking it into your testing workflow. It'll catch a lot of stuff and tell you exactly how to fix it, the more you use it the more you'll remember to do during the first pass.

Automated libraries such as axe-core and pA11y have been a very seamless way to bring accessibility testing into development teams UI testing. It can get development teams to begin to learn and grow accessibility in their teams. However, one big problem has appeared since the rise in popularity of these libraries.

but no, this

Axe-core - Axe-core is one of the most popular libraries that has MANY different integrations into testing frameworks

aXe - The Standard in Accessibility Testing from deque (free)

https://www.deque.com/axe/ - Axe tool has convenient browser extension for accessibility testing (also, you can use Axe with Jest).

The color scheme works well, and more importantly, it looks to be accessible to those with any of the variations of color-blindness by still being readable. If you ever want to check this, as it's important in User Experience (UX) design - you can with this website. You can also check out libraries like axe-core to incorporate accessibility checks into your development pipeline.