🧐 What Am I Thinking This Week

Great UX starts with great performance.

A website with good performance loads quickly, responds instantly, and feels snappy. It shows you the information you're looking for rapidly and provides immediate feedback on interactions. But what exactly defines good performance, and why is it important?

When your website feels responsive and provides instant feedback, it significantly enhances user experience. Fast websites engage visitors better, making them more likely to stay on your site longer. Studies show that even a 1-second delay in load time can reduce conversion rates by 7%. Google emphasizes performance by detailing how various performance metrics impact SEO and content rankings.

If your personal computer runs slow, you might upgrade your CPU or add more RAM, or even buy a new machine. Servers, however, run in predefined, controlled environments. You can vertically scale a server by upgrading its hardware (like adding RAM or using faster CPUs) or horizontally scale by adding more servers with similar setups and configuring a load balancer. However, web apps must cater to diverse user devices, including low-end hardware. Thus, performance means doing the right thing at the right time. If your site includes JavaScript or assets only needed after specific user actions, these are perfect candidates for lazy loading.

Beyond data and asset caching by server-side and browser mechanisms, prioritizing the most crucial tasks can dramatically enhance performance. Lazy loading exemplifies this by loading only what's immediately visible on-screen, freeing up CPU and network resources for more urgent tasks. When more resources are available, like on desktops with stable internet connections, preloading assets or routes can deliver an instant loading experience.

To make your web app feel responsive, it must consistently respond immediately to user interactions. If a user expects search results as they type, it should always happen instantly. Browsers run JavaScript tasks, layout repaints/reflows, and garbage collection on the main thread. Long-running JavaScript tasks can block this thread, preventing responsiveness. Tasks like extensive loops or complex calculations should be offloaded using Web Workers, handled server-side, or broken into smaller tasks that can execute across multiple event loop cycles.

Another critical performance principle is don't do the same thing twice. In JavaScript frameworks, unnecessary component re-rendering often occurs when frameworks aren't informed that dependencies remain unchanged. Proper dependency management and caching can mitigate redundant re-renders. Interestingly, some frameworks prefer recalculating entirely rather than comparing cached versions, as recalculation can sometimes be faster.

The third crucial aspect of performance is to free up resources when you're done. Users run your web apps on their devices, consuming resources. Your apps should use resources responsibly. Garbage collection typically does an excellent job reclaiming memory from unused variables.

Here's a React example demonstrating responsible resource management:

useEffect(() => {
  // Function to update window size
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  // Add event listener
  window.addEventListener('resize', handleResize);

  // Clean up function - removes event listener when component unmounts
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

In React, useEffect can manage DOM event listeners, like this window resize listener. Forgetting to remove listeners when a component unmounts causes memory leaks because the garbage collector assumes the listener and associated objects are still needed.

Finally, there's the concept of Perceived Performance, focusing not just on technical speed but on the user's perception of speed. Humans are sensitive to feedback. If nothing appears to happen after an action, users perceive the site as slow or broken. For inherently slow processes, use loading indicators or engaging placeholders. Skeleton screens, as YouTube employs, or interactive loading screens with fun facts or mini-games significantly improve perceived performance and user satisfaction.

💡The ONE thing I've found interesting

LLM models aren’t exactly programmed line by line by humans. Instead, they are formed by learning from vast amounts of data. Anthropic has attempted to study what goes on inside a model’s “mind.” It is fascinating to see that the model sometimes fabricates lies, yet at other times shows human-like behavior when formulating a response.