Link Search Menu Expand Document
Notes

Performance Optimization

Lighthouse Score

score

A Lighthouse score, is a metric generated by Google’s Lighthouse tool to assess the performance of a website. It’s a numerical value ranging from 0 to 100, with higher scores indicating better performance. Lighthouse analyzes various aspects of a webpage, including loading speed, responsiveness, and accessibility, and combines these into a single performance score.

We can improve the lighthouse score of the homepage by leveraging these techniques:

  1. Image format optimization (.webp, SVGs, no srcset)
  • .webp is a modern image format that provides superior compression than JPEG or PNG.
  • SVGs are resolution-independent, perfect for logos/icons—no quality loss at any size.
  • srcset helps in responsive images, but if your layout doesn’t need varying sizes for different screens, it’s unnecessary.

Reduces download size significantly → faster load → better Lighthouse Performance score.

Less layout shift → better Lighthouse CLS (Cumulative Layout Shift) score.

  1. Lazy load heavy elements (e.g., editors, demo sections)
  • Don’t load large components (like a code editor or demo section) immediately on page load.
  • Instead, detect when they’re near the viewport (using Intersection Observer or libraries) and load them just in time.

Keeps initial JS payload small → faster Time to Interactive.

Lighthouse prioritizes what’s above-the-fold → delays loading what’s not immediately needed.

  1. Static Site Generation (SSG) beats Server Side Rendering (SSR)
  • SSG (Static Site Generation) = HTML is pre-rendered at build time and served instantly via CDN.
  • SSR (Server Side Rendering) = HTML is rendered on-the-fly on every request.

SSG pages are lightning fast, no server processing → excellent First Contentful Paint & Time to First Byte.

SSR can be slower, especially under load or if backend APIs are slow.

  1. Lazy load below-the-fold content
  • Split long pages and lazy load content that’s not visible initially, like testimonials, FAQs, or footer carousels.

Reduces initial DOM size, initial render time, and improves Largest Contentful Paint.

Improves Lighthouse Accessibility score if long DOM trees are reduced.

  1. Code splitting
  • In React.js or Next.js, each page gets its own JS bundle. So visiting /about won’t load /contact.js.

Keeps homepage JS bundle small → fast load → better JS execution time.

Great for large websites with multiple routes.