Performance Optimization

Web performance refers to how quickly and efficiently a web page loads and responds to user interactions.

Measuring Performance

tools

unlighthouse

npx unlighthouse --site <your-site>

Web Vitals

  • First Contentful Paint
  • Largest Contentful Paint
  • Interaction to Next Paint

use the Web Vitals extension

Improving Perfromance

Key factors impacting web performance include:

  1. Server Response Time: How quickly the server processes requests and sends responses.

  2. Client-Side Rendering Time: How efficiently the browser renders the content on the client’s device.

  3. Resource Loading: How efficiently the browser loads resources such as images, scripts, and stylesheets.

  4. Network Latency: The time it takes for data to travel between the server and the client.

Server-Side Performance Optimization:

  • Write efficient code and leverage non-blocking I/O to perform multiple operations at the same time.
  • Create indexes on frequently queried columns to enhance database query performance and identify and fix slow queries.
  • Cache frequently accessed data in memory, reducing the need for database lookups.
  • Use the right database for the right job.
  • Use load balancer to distribute traffic across multiple servers to improve scalability.
  • Use circuit breakers and rate limiter.

Client-Side Performance Optimization:

  • Apply code splitting strategies to load only necessary JavaScript based on user interactions.
  • Use only essential third-party scripts and libraries to minimize overhead.
  • Defer loading non-critical JavaScript to improve page load times.
  • Use HTTP headers like Expires, Cache-Control, and ETag to manage resource caching in browsers.
  • Reduce image file sizes through compression and select appropriate image formats.
  • Minify CSS and JavaScript.
  • Defer loading images and resources that are not immediately visible to the user.
  • Use prefetch technologies including dans-prefetch, preconnect, prefetch, preload and prerender:
<link rel="dns-prefetch" href="https://example.com">
  • Use a CDN (Content Delivery Network) to distribute content across multiple servers globally, minimizing latency for users in various locations.