I want to write about the website's performance that lighthouse provides us. After I developed the website of the Cashew company, the performance of the website was so terrible. The percentage was about 20%. I improved it with some tips and tricks about the image format and also upgraded the Next.js version 12 to 13.
Image format! (the important part)
Don't forget to use the best image resolution also the next-generation format like Webp format.
Firstly, we should convert all high-resolution images of our website to the WebP format. I found one of the best command line tools that name is CWebP.
Secondly, we can convert it in all bulk! For this action, we need to install the parallel package in our OS.
For example, I convert all jpeg files:
parallel -eta cwebp -q 20 -lossless {} -o {.}.webp ::: *.jpg
Upgrade Next.js version 12 to version 13
In this part, we should change some parts of the code that were deprecated in the old version. Next.js has provided very well documentation for upgrading the old version to the new one. Every single native component in Next.js should refactor after upgrading.
I mentioned some the important ones:
- Image
- Scripts (third-party scripts)
- Link
How to get the report in Lighthouse with the command line
Firstly you should install the lighthouse NPM package on your local machine.
npm install -g lighthouse
Secondly, you can separate desktop and mobile report
- Command for desktop
lighthouse [WEBSITE] --form-factor "desktop" --preset=desktop
- Command for mobile
lighthouse [WEBSITE] --form-factor "desktop" --preset=mobile
Buy me a coffee! :)
https://www.buymeacoffee.com/pooyagolchian
Top comments (0)