Какие способы мы можем использовать для ускорения загрузки ресурсов на фронтенде?

• Минификация и сжатие CSS/JS/HTML файлов.
• Отложенная загрузка изображений (ленивая загрузка).
• Оптимизация изображений (сжатие, использование modern форматов типа WebP).
• Использование CDN (Content Delivery Network).
• Кэширование браузера для статических ресурсов.
• Разделение кода (Code Splitting) для уменьшения начального размера бандла JavaScript.
• Приоритезация загрузки критических ресурсов (например, шрифтов или CSS для первого экрана).
• Использование HTTP/2 и HTTP/3.
• Предварительная загрузка (Preload) и предварительная выборка (Prefetch) ресурсов.
• Удаление неиспользуемого кода (Tree Shaking).

// Пример ленивой загрузки изображений с Intersection Observer
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback для браузеров без Intersection Observer
    console.log("Intersection Observer not supported");
  }
});

<!-- Использование атрибутов preload и prefetch -->
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="prefetch" href="/js/next-page.js" as="script">