Как сделать Prefetching

Prefetching — это техника загрузки ресурсов заранее, чтобы ускорить их использование в будущем.

Основные способы:

1. Link Prefetching (HTML):

<link rel="prefetch" href="/next-page.html" as="document">
<link rel="prefetch" href="/assets/image.webp" as="image">

Подходит для загрузки страниц, изображений, скриптов.

2. DNS Prefetching (ускорение DNS-запросов):

<link rel="dns-prefetch" href="https://api.example.com">

3. Preload (приоритетная загрузка критичных ресурсов):

<link rel="preload" href="/main.js" as="script">

4. Программный Prefetching (например, через IntersectionObserver или React Suspense):

// Пример с IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      fetch('/api/data'); // Загружаем данные при появлении элемента в viewport
    }
  });
});
observer.observe(document.querySelector('.lazy-load'));

Когда использовать:

• Для страниц, на которые пользователь может перейти (например, "Следующая статья").
• Для lazy-loaded ресурсов (изображения, данные API).
• Для критичных скриптов/стилей.

⚠️ Важно: Не злоупотреблять, чтобы не тратить трафик пользователя.