Boosting My Portfolio Site’s Performance: A Journey with Lighthouse, Lazy Loading, and More ...

Although my portfolio site isn’t live yet, I’ve been experimenting with performance improvements using Chrome DevTools’ Lighthouse. Even though the template I’m using already scores well, I wanted to dive deeper into performance techniques to learn more and potentially push those scores even higher. Here’s what I’ve discovered so far:

Understanding Lighthouse
Lighthouse is a built-in tool in Chrome DevTools that evaluates your site on performance, accessibility, SEO, and more. While testing, I discovered features like Cognition Mode which simulates how accessible your site is for users with cognitive disabilities. A quick tip: Browser extensions (like ad blockers) can sometimes interfere with these tests, so I recommend running Lighthouse in incognito mode to get the most accurate results.

Experimenting with Lazy Loading
What is Lazy Loading?
Lazy loading is a technique that delays the loading of images or components until they are actually needed such as when they appear on screen. This approach reduces initial load times and improves overall user experience.

How I Implemented Lazy Loading
For Images: I added the native HTML attribute to images:

For Components: In React, you can use React.lazy and Suspense to load components only when needed:

<img src="example.jpg" alt="Example" loading="lazy" />

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

These small tweaks ensure that only the essential resources load initially, making for a smoother and faster experience.

Diving into Code Splitting
What is Code Splitting?
Code splitting breaks your JavaScript bundle into smaller chunks that load on demand. This means users download only what they need at first, speeding up the initial load.

A Practical Example in Next.js
With Next.js, dynamic imports make code splitting straightforward:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/OtherComponent'));

export default function Page() {
  return <DynamicComponent />;
}

Even though my template already performs well, this technique is crucial for scaling up and ensuring that larger projects remain fast.

Using Debounce to Optimize Event Handling
What is Debounce?
Debouncing is a method to limit how often a function gets called. It’s especially useful for events that fire rapidly, like key presses or scroll events. Instead of triggering a function on every event, debounce waits for a specified delay after the last event before executing.

Example Implementation

let timeout;

function debounce(func, delay) {
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

// Usage example for an input change event:
const handleInputChange = debounce((value) => {
  console.log("Debounced value:", value);
}, 300);

While the performance boost might not drastically change my Lighthouse scores, debouncing is a practical tool that improves user experience by reducing unnecessary processing.

Final Thoughts
Even though I haven’t launched my portfolio site yet, experimenting with these techniques has been an invaluable learning experience. Sharing this journey shows both potential employers and technical teams that I’m proactive, detail-oriented, and committed to building efficient, high-performance web applications.

I’m excited to continue refining these improvements and eventually share my live portfolio results. Stay tuned for more updates!