Aiming for LightHouse high score with services built with React+NextJS.

I've recently been working on a web service that I've been developing for a long time, and I've been working hard on tuning it and have been getting good scores on LightHouse, so I would like to share what I was care of during my development.

Performance

• Delay component loading as needed using loadable/@component, react/lazy, or something else.
  • To retrieve external resources, use in combination with react/Suspense, etc.
• Correctly apply useMemo and useCallback to values and functions.
  • Values and functions are all memoized by setting deps, which prevents unnecessary regenerations when re-rendering.
  • Other details are in the Properly understand Hooks to improve your application performance.
• Compress resources and source code to reduce communication volume.
• Implementing computationally expensive processes with WASM.
  • It is also a good idea to use WebAssembly for heavy functions.

Follow HTML5 semantics

This should always be done with care from the implementation stage. Below are some examples that could be put into practice.

• Observe the order of Heading tags (<h1>, <h2>), etc.
  • e.g. Don't use <h2> before <h1>.

• Don't forget to assign the necessary attributes to the tag

  • e.g. Always add width, height, and alt attributes to <img>.
  • Learn more about Accessible Names.

• Don't assign inappropriate attributes to any tag

  • e.g. Don't add aria-label attribute to <span>.

• Don't bind inappropriate events to any tag

  • Don't bind onClick to <div> (use <button> if you want it to click)

• etc...

Accessibility

• Don't use .png or .jpeg as image resources

  • Use .webp for images.
    • By far the best conversion tool is Squoosh!
  • Use .mp4 or .webm if you want animation (don't use gif)
    • You can use ffmpeg to convert to webm and so on.

• Pay attention to the contrast ratio between the background and the elements (consideration for users with color vision characteristics).

  • If you are using Chrome, you can use DevTools to focus on an element to see if it has the proper contrast.

package.json

I used bundlephobia to scan package.json. It also gives me an estimate of how long it takes to load in a 2G or 3G environment.

next.config.json

For now, I will definitely enable swcMinify. But I don't have any other settings in particular.