umma.dev

Auditing a React App

🎨 Front End

2 min read

There are a number of ways to improve the performance of an app; debugging, accessibility or running an audit on your app.

The Audit Tab

If you right click on a page and go to inspect, you will see the default elements tab.

When you click on the double right arrows you should see a menu, head over to the audits tab.

Download the Lighthouse Chrome tool here.

Chrome Lighthouse Extension

Lighthouse enables you to generate a report with the following categories listed below, giving a score between 0 to 100. It also gives you the option of device type (mobile/desktop).

Performance

This section looks into the following metrics

  • First Contentful Paint The amount of time it taken for the first bit of text or image to render

  • First Meaningful Paint The amount of time taken for an image or text to render completely

  • Speed Index Time taken for last image or text to render in seconds

  • Time to Interactive Time taken for the page to become interactive

Production mode enables you to compress your bundle, the samller the size of your bundle the better the load time of your application. There are many compression plugins which can help with this, one of the most popular ones is brotli by Google, which is supported by most browsers. Another Technique that can also be used is code splitting; breaking down your app into smaller sizes, so only certain parts are rendered when necessary.

Progressive Web App (PWA)

Service workers are extremely useful when server users offline. Lighthouse checks for things such as if the app is installable, if there are HTTP redirects to HTTPS and whether the service workers work within the app.

Best Practices

Some of things Lighthouse looks for

  • Avoids Application Cache

  • Uses HTTPS

  • Links to cross-origin destinations are safe

  • Avoids front-end JavaScript libraries with known security vulnerabilities

  • Detected JavaScript libraries

  • No browser errors logged to the console

  • Displays images with correct aspect ratio

Accessibility

Lighthouse checks elemts meet the WCAG standards - the foreground and background should have a contrast ratrio of at least 4.5:1 for small text and 3:1 for large text.

More information here.

It also checks for internationalisation and localisation; enabling you to check the content is set to the user’s preferred location, which maybe used in conjunction with server side rendering within a React app.

SEO

Meta tags/data are important for browsers to display the app correctly.