How I Achieved a 100% Lighthouse Score on My Portfolio Website

As a front-end developer, I understand how crucial it is for a portfolio website to not only look great but also perform efficiently. My portfolio is my first impression to potential clients or employers, and I wanted to showcase my skills in building fast, accessible, and SEO-friendly websites. Achieving a 100 percent Lighthouse score became a personal goal because it’s a measurable way to demonstrate my capability in optimizing web performance, something every developer should prioritize.

A perfect Lighthouse score also serves as proof of my technical expertise in areas like performance optimization, accessibility, and best practices, which are key to building successful modern web applications. By achieving this, I wanted to set a standard for myself and offer a seamless user experience to anyone who visits my site.

NextJs

Since I built my portfolio website using Next.js, several of its built-in features played a crucial role in helping me achieve a 100% Lighthouse score:

Automatic Code Splitting: Next.js automatically splits the code so that only the necessary JavaScript for each page is loaded. This feature helped improve my page load speed significantly by preventing users from downloading the entire app upfront.
Image Optimization with next/image: Next.js provides a native next/image component, which made optimizing images easy. It handled tasks like automatic resizing, lazy loading, and converting images to modern formats like WebP. This drastically improved my performance score since optimized images load faster and use less data.
Static Site Generation (SSG): By leveraging Next.js’s Static Site Generation, I pre-rendered my pages at build time. This meant that users were served pre-built HTML, making the initial page load almost instant. This significantly improved my performance score by reducing the time to first byte (TTFB).

Key Optimizations I made for SEO and Accessibility

For SEO, I kept things simple by leveraging Next.js's default metadata function. This allowed me to define key elements like the page title, meta description, and Open Graph tags for social sharing. This default functionality helped ensure my site was well-optimized for search engines without much manual intervention.

Additionally, I implemented JSON-LD structured data to provide search engines with more detailed information about my site’s content. This improved my SEO score by making my site eligible for rich snippets, which can enhance how my content is displayed in search results.

On the accessibility side, I primarily relied on the axe-mode package, which helped identify issues like missing ARIA labels, improper use of semantic HTML, and contrast issues. After addressing those suggestions, my accessibility score improved significantly.

These combined efforts in SEO and accessibility played a major role in helping me achieve a 100% Lighthouse score.

Image Optimization

To optimize the images on my portfolio site, I hosted them on ImageBB, which gave me better control over my image assets. Additionally, I converted all my images to the WebP format, which significantly reduced their file sizes without sacrificing quality. WebP is a modern image format that provides superior compression compared to JPEG or PNG, leading to faster load times.

On top of that, I leveraged Next.js's next/image component, which automatically handles lazy loading. This means images are only loaded when they enter the viewport, ensuring that unnecessary image data isn’t downloaded when the user first visits the page. This combination of hosting images on ImageBB, using WebP format, and lazy loading helped me achieve much faster page load speeds, directly contributing to my improved Lighthouse performance score.

Conclusion

Achieving a 100% Lighthouse score for my portfolio was a valuable experience. Utilizing Next.js features and tools like axe-mode allowed me to enhance performance and accessibility effectively.

For fellow developers, focus on the right tools and consistent testing. I hope my journey inspires you to pursue excellence in your web projects!