Сиділи коли-небудь, дивлячись на білий екран, поки сайт повільно "промальовується"? Знайоме відчуття? Однією з причин такої повільності є те, що браузер часто дізнається про необхідні ресурси (стилі, шрифти, скрипти) занадто пізно. Але що, якби ми могли дати йому підказку заздалегідь? Саме для цього існують спеціальні інструкції, або "хінти": `preload`, `prefetch` та `dns-prefetch`. Це потужні інструменти для прискорення завантаження ресурсу, які допомагають браузеру завантажити важливі файли раніше, значно покращуючи як реальну, так і перцептивну (відчутну користувачем) швидкість вашого сайту.
Зазвичай браузер працює послідовно: він завантажує HTML, аналізує його, знаходить посилання на CSS, починає завантажувати CSS, знаходить у CSS посилання на шрифти, починає завантажувати шрифти... І так далі. Цей процес "відкриття" ресурсів займає час, особливо для файлів, які згадуються не на початку HTML, а десь глибоко в CSS або завантажуються за допомогою JavaScript. Resource Hints (hint ресурсу) дозволяють нам втрутитися в цей процес і сказати браузеру: "Гей, ось цей файл нам *точно* знадобиться дуже скоро" або "Можливо, користувач піде на цю сторінку наступною, почни завантажувати її потихеньку". Це проактивний підхід, який веде до покращена продуктивність.
rel="preload": Завантажуємо VIP-ресурси першимиУявіть `preload` як інструкцію зарезервувати місце у швидкісній черзі для найважливіших гостей. Ви кажете браузеру: "Цей ресурс критично важливий для показу поточної сторінки, будь ласка, завантаж його якомога швидше з високим пріоритетом". Це і є пріоритетне завантаження.
Найчастіше `preload` використовують для ресурсів, які потрібні для першого рендерингу сторінки, але виявляються браузером із запізненням:
<link rel="preload" href="/path/to/critical.css" as="style"><link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/path/to/important.js" as="script">Щоб `preload` працював коректно, важливо вказати атрибут `as`. Він повідомляє браузеру тип ресурсу (`style`, `script`, `font`, `image`, `Workspace` тощо). Це допомагає:
Також можуть знадобитися `type` (для шрифтів) та `crossorigin` (якщо ресурс завантажується з іншого домену, наприклад, CDN або Google Fonts).
У чому підступ? Неправильне використання `preload` може навіть нашкодити:
Важливо пам'ятати: `preload` лише завантажує ресурс у кеш браузера. Він не виконує скрипт і не застосовує стилі. Вам все одно потрібно буде підключити цей ресурс у відповідному місці коду (наприклад, через `` або `< script>`).
rel="prefetch": Вгадуємо наступний крок користувача`Prefetch` – це менш наполегливий натяк для браузера. Ви кажете: "Є ймовірність, що користувач незабаром перейде на іншу сторінку або йому знадобиться цей ресурс для наступної дії. Якщо зараз є вільний час і ресурси, завантаж його, будь ласка, з низьким пріоритетом".
`Prefetch` найкраще підходить для ресурсів, які знадобляться під час *майбутньої* навігації:
<link rel="prefetch" href="/next-page.html" as="document"><link rel="prefetch" href="/assets/checkout-bundle.js" as="script">Не варто робити prefetch для великих файлів, якщо ви не впевнені, що вони знадобляться – це може марно витратити трафік користувача. Аналізуйте типові шляхи користувачів на вашому сайті, щоб робити більш обґрунтовані припущення.
rel="dns-prefetch": Прискорюємо знайомство зі сторонніми доменамиКоли браузеру потрібно завантажити ресурс з іншого домену (наприклад, шрифт з Google Fonts або скрипт аналітики), йому спочатку потрібно дізнатися IP-адресу цього домену. Цей процес називається DNS-резолв (DNS lookup) – схоже на пошук номера телефону в довіднику перед дзвінком. `dns-prefetch` дозволяє зробити цей пошук заздалегідь.
Використовуйте його для всіх сторонніх доменів, з яких ви завантажуєте ресурси, особливо якщо ці ресурси не є критичними для початкового рендерингу:
Ось типовий dns prefetch приклад:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.example.com">(Подвійний слеш `//` означає, що браузер використає той самий протокол (HTTP або HTTPS), що й основна сторінка).
Виграш у часі може бути невеликим (десятки або сотні мілісекунд), але коли таких запитів багато, сумарний ефект стає помітним, особливо на мобільних пристроях з високою затримкою мережі. Це зменшує загальний час очікування перед початком завантаження самого ресурсу.
Немає сенсу робити `dns-prefetch` для вашого власного домену або для доменів, з яких ресурси (наприклад, основний CSS чи JS) завантажуються дуже рано в процесі завантаження сторінки – DNS-резолв для них і так відбудеться швидко. Також не варто додавати занадто багато `dns-prefetch` – більше 6-8 одночасних DNS-запитів можуть навіть сповільнити процес.
Звучить трохи заплутано? Ось проста таблиця для швидкого вибору:
| Hint | Призначення | Пріоритет | Цільова навігація | Приклад використання |
|---|---|---|---|---|
preload |
Завантажити критичний ресурс раніше | Високий | Поточна | Шрифт, критичний CSS/JS |
prefetch |
Завантажити ресурс для майбутнього використання | Низький | Майбутня | Наступна сторінка, її ресурси |
dns-prefetch |
Прискорити DNS-резолв для стороннього домену | Низький | Поточна/Майбутня | Google Fonts, Analytics, CDN |
Найчастіше теги `` з атрибутами `rel="preload"`, `rel="prefetch"` або `rel="dns-prefetch"` розміщують у секції `
` вашого HTML-документа. Їх також можна надсилати за допомогою HTTP-заголовка `Link`.Так! Наприклад, для шрифту з Google Fonts ви можете використати:
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2" as="font" type="font/woff2" crossorigin>Спочатку прискорюємо DNS-lookup, а потім даємо команду на пріоритетне завантаження самого файлу шрифту.
Не додавайте ці хінти наосліп. Використовуйте інструменти розробника у вашому браузері (вкладка Network/Мережа), щоб перевірити:
Ресурси, завантажені через `preload` або `prefetch`, потрапляють у HTTP-кеш браузера. Це означає, що коли вони реально знадобляться, браузер зможе миттєво дістати їх з кешу, що є частиною стратегії оптимальне кешування та прискорення.
Ні, в жодному разі! `Preload` призначений лише для критичних ресурсів, необхідних для *початкового* відображення. Зображення, особливо ті, що знаходяться нижче першого екрану, краще завантажувати за допомогою техніки "lazy loading" (відкладеного завантаження).
Ні, `prefetch` – це лише підказка з низьким пріоритетом. Браузер може вирішити не завантажувати ресурс, якщо вважатиме це недоцільним (наприклад, через повільну мережу, режим економії даних або якщо користувач швидко покинув сторінку).
Хоча жорсткого ліміту немає, додавання більше ніж 6-8 `dns-prefetch` може не дати додаткового ефекту або навіть трохи сповільнити процес через паралельні DNS-запити. Зосередьтеся на доменах, ресурси з яких найімовірніше знадобляться.
Не зовсім. Кешування зберігає ресурси *після* їх першого завантаження, щоб не завантажувати їх знову при повторних візитах. Resource Hints (`preload`, `prefetch`) – це про *проактивне* завантаження ресурсів *перед* тим, як вони явно знадобляться (або навіть до першого візиту на сторінку, у випадку `prefetch`), щоб прискорити початкове або наступне завантаження.
Отже, `preload`, `prefetch` та `dns-prefetch` – це ваші маленькі помічники у боротьбі за мілісекунди завантаження. Вони дозволяють "натякнути" браузеру на ваші наміри та оптимізувати процес завантаження ресурсів. Хоча вони здаються простими інструкціями, їх правильне використання може суттєво покращити відчуття швидкості вашого сайту та забезпечити кращий користувацький досвід. Не бійтеся експериментувати (але завжди тестуйте результати!), і подаруйте своїм відвідувачам задоволення від миттєвого завантаження. Це важливий крок до покращена продуктивність та ефективного прискорення завантаження ресурсу.
Наша команда завжди готова надати необхідну підтримку та відповісти на всі ваші запити.