Хоча мета кожного полягає в тому, щоб зменшити бюджет веб-продуктивності, все одно необхідно використовувати сторонні сервіси. Під час використання цих послуг "Пошук DNS" разів може споживати значну частину бюджету, залежно від кількості послуг. Ці завантаження впливають на різні аспекти швидкості сторінки, включно з First Contentful Paint (FCP).
Метою цих двох концепцій є оптимізація часу підключення сторонніх розробників. Перш ніж зрозуміти різницю між цими двома поняттями, необхідно зрозуміти, що саме відбувається, коли робиться запит третьої сторони:
- Домен вирішено отримати IP-адресу.
- Встановлюється з'єднання з сервером.
- З’єднання зашифровано для забезпечення безпеки.
Ця ієрархія повторюється для кожного підключення третьої сторони. Ось тут проявляється різниця між preconnect і dns-prefetch.
- Попереднє підключення: Переконується, що всі три кроки, згадані вище, попередньо налаштовані.
- DNS-попередня вибірка: Служить лише для перетворення доменного імені на IP-адресу на першому кроці.
Як бачите, попереднє підключення є більш комплексним і вигідним. Однак усе має свою ціну. Використання попереднього підключення для всіх підключень може негативно вплинути на оптимізацію вашої сторінки. Тому увам слід використовувати попереднє підключення лише для критичних з’єднань і використовувати dns-prefetch для всіх інших з’єднань сторонніх розробників.
Короткий опис використання
З огляду на наведену вище інформацію, ось короткий підсумок їх використання:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Сумісність браузера
Обговорюючи їх використання, важливо також згадати сумісність з браузером. Ці дві тісно пов’язані концепції широко підтримуються сучасними браузерами, але їх використання не повністю збігається. Preconnect підтримується приблизно 97% браузерів, В той час dns-prefetch підтримується 83% браузерів (станом на червень 2024 р.).
Внесок у бюджет веб-продуктивності
- Попереднє підключення може забезпечити загальне підвищення швидкості 100-500.
- DNS-Prefetch може прискорити кожне з’єднання на 20-120.
Ми плануємо провести власні тести, щоб надати більш задовільні місцеві приклади.
Нарешті, я хотів би порекомендувати та згадати блог Джейхуна Енкі Аксана, який значно допоміг мені зрозуміти під час підготовки цієї статті: Блог Джейхуна Енкі Аксана.
