My portfolio got 4x100 in Lighthouse

💕 Appreciation

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:

Share your Portfolio

Ahmad Swalih ・ Jul 7 '22

#portfolio #webdev #javascript #beginners

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.

🔧 Decided to refactor

After that, I've seen some awesome portfolios on this platform, and they are really inspiring! So I decided to refactor it this week, this time with Next.js, Tailwind and Framer Motion.

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

🔬 What I've learned

Here's some of what I've learned:

Use lazy loading wisely

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)
Set priority to true on <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 matters

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.

👀 More to say

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! 💪