What do you know about web application performance optimization?

Web application performance optimization encompasses a set of measures aimed at speeding up loading, rendering, and interaction with the user interface.

Main areas:

• Critical Rendering Path Optimization: Reducing the number of blocking resources (CSS, JavaScript), prioritizing the loading of critical styles and scripts, using asynchronous and deferred loading.
• Resource Optimization: Compressing images (lossy/lossless), using modern formats (WebP, AVIF), minifying and compressing CSS/JS, using CDN.
• Data Loading Optimization: Caching (HTTP cache, Service Workers), prefetching, preloading, using <link rel="preconnect"> and <link rel="dns-prefetch">.
• JavaScript Optimization: Reducing bundle size, optimizing algorithms, minimizing repaint and reflow, using Web Workers for resource-intensive tasks.
• Rendering Optimization: Hardware acceleration, using requestAnimationFrame for animations, avoiding forced synchronous layouts.

Key metrics for tracking and analysis:

• FCP (First Contentful Paint): Time until the first rendering of any content.
• LCP (Largest Contentful Paint): Time until the rendering of the largest visible content block.
• FID (First Input Delay): Time from the first user interaction to the browser's event processing.
• CLS (Cumulative Layout Shift): Total shift of elements on the page during loading.
• TTI (Time to Interactive): Time when the page becomes fully interactive.

Tools for analysis and debugging:

• Chrome DevTools (Performance, Lighthouse, Network tabs)
• WebPageTest
• GTmetrix
• Performance APIs (performance.mark, performance.measure, PerformanceObserver)

Examples of optimizations:

• Removing unused CSS and JS.
• Using Svelte or Preact to reduce bundle size.
• Applying lazy loading for images and videos.
• Optimizing API requests (reducing quantity and size).
• Code splitting.

// Example of lazy loading images
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

/* Example of critical CSS optimization */
/* Styles necessary for the first screen rendering */
@media screen and (min-width: 1024px) {
  .hero {
    background-image: url('hero-large.jpg');
  }
}