Помилка підключення. Спробуйте ще раз.

Перейти до вмісту
SEO Tools
Довідка та документація
Швидкість Низький вплив Середнє 15–30 хв

Попереднє завантаження ключових ресурсів (preload)

Важливі ресурси можна завантажити раніше через rel="preload".

Що це

rel="preload" повідомляє браузеру з високим пріоритетом заздалегідь завантажити ресурс, який скоро знадобиться (головне зображення над згином, ключовий шрифт, критичний CSS).

Чому це важливо

Без preload браузер виявляє деякі важливі ресурси пізно (напр., шрифт, на який посилаються лише з CSS), що відкладає їхню появу. Preload це прискорює та покращує LCP.

Як це зробити

  1. 1Попередньо завантажте LCP-зображення (головний візуал над згином).
  2. 2Попередньо завантажте ключові шрифти та додайте font-display: swap.
  3. 3Не перестарайтеся — preload усього розпорошує пріоритет і шкодить.

Приклад

Правильно
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">

Висновок

Preload — цільовий інструмент для кількох справді ключових ресурсів (LCP-зображення, головний шрифт). Застосований розважливо, він покращить LCP; застосований масово, навпаки зашкодить. Менше — це більше.

Повʼязані теми