What factors can influence the speed of content loading for the user?

• Size and number of HTTP requests (CSS, JS, fonts, images).
• Server parameters (response speed, bandwidth).
• User network quality (internet connection speed, latency).
• User device parameters (CPU power, RAM size).
• Use of caching (browser and server-side).
• Image optimization (compression, suitable formats, responsive images).
• Minification and compression of resources (Gzip, Brotli).
• Asynchronous loading and deferred script execution.
• Critical CSS (inline CSS for initial rendering).
• SSR (Server-Side Rendering) or SSG (Static Site Generation) instead of CSR (Client-Side Rendering).
• Use of CDN (Content Delivery Network).
• Number and complexity of third-party scripts (analytics, widgets).
• Redirects.
• Server or code errors that slow down processing.
• Time to first byte (TTFB).

// Example of lazy loading images to improve speed
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);
});