A few weeks ago, I built the 1st version of my portfolio with Chakra UI. To my surprise, I got many likes - more than I expected - after sharing it in this post:
So really really thankful for that! It gave me a lot of confidence in many senses: as a beginner to frontend, a newcomer to DEV.TO, and a non-native English speaker.
After 2-3 days of work, I managed to pass all 4 tests with full score in the lighthouse, and learned a lot along the way. For those who would like to take a look: mrcai.space
Here's some of what I've learned:
Lazy loading is an effective way to reduce bundle size, but too much lazy loading will only do more harm than good, e.g. longer LCP(Largest Content Painting), which is a significant indicator in Lighthouse performance calculator.
Avoid using it on the first page - I mean the first section of your website that visitors will see, like a cover. You will see a great improvement in your LCP.
Next.js provides many lazy loading features out of the box: The
<Image /> component can lazy-load images by default, and
dynamic() can lazy-load components. At first, I just apply them to every images and components, but this made LCP reaching 1.4s. I dealt with it in 3 ways:
- Remove animation of image on the cover. (I doubt if this is reasonable but it does help)
<Image />on the cover image, so that Next.js knows this image should be preloaded.
- Remove the lazy loading of component
<Cover />, which is the cover section.
And LCP is thus reduced to 0.4s! 🎉
A11y is a much broader topic than I thought it was. I started to read MDN again, particularly the ARIA part, and tried to apply the best practices on my website, e.g. logical tab order, focus trap on modals,
aria-label on icon buttons, ...
And I realized I had always been ignoring this important part of webdev. Next I will try to learn from famous websites like Facebook, and see how they deal with a11y.
This portfolio still has many drawbacks, e.g. a11y and SEO. But I guess I may as well put this project away for now, and devote more time and energy to building new meaningful projects.
And when I become more experienced, and have more impressive projects, I will come back and polish it again.
Keep learning! 💪