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.
- To retrieve external resources, use in combination with
- Correctly apply
useMemo
anduseCallback
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.
- It is also a good idea to use
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>
.
- e.g. Don't use
-
Don't forget to assign the necessary attributes to the tag
- e.g. Always add
width
,height
, andalt
attributes to<img>
. - Learn more about Accessible Names.
- e.g. Always add
-
Don't assign inappropriate attributes to any tag
- e.g. Don't add
aria-label
attribute to<span>
.
- e.g. Don't add
-
Don't bind inappropriate events to any tag
- Don't bind
onClick
to<div>
(use<button>
if you want it to click)
- Don't bind
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 usegif
)- You can use
ffmpeg
to convert towebm
and so on.
- You can use
- Use
-
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.
Top comments (0)