Въпреки че целта на всеки е да намали бюджета за уеб производителност, все още е необходимо да се използват услуги на трети страни. Когато използвате тези услуги, "DNS търсене" пъти може да погълне значителна част от бюджета, в зависимост от броя на услугите. Тези натоварвания засягат различни аспекти на скоростта на страницата, включително First Contentful Paint (FCP).
Целта на тези две концепции е да оптимизират времето за свързване на трети страни. Преди да разберете разликите между тези две понятия, е необходимо да разберете какво точно се случва, когато се направи заявка от трета страна:
- Домейнът е разрешен за получаване на IP адрес.
- Установява се връзка със сървъра.
- Връзката е криптирана, за да се гарантира сигурността.
Тази йерархия се повтаря за всяка връзка на трета страна. Тук се проявява разликата между preconnect и dns-prefetch.
- Предварително свързване: Гарантира, че и трите стъпки, споменати по-горе, са предварително конфигурирани.
- Предварително извличане на DNS: Служи само за преобразуване на името на домейна в IP адрес в първата стъпка.
Както можете да видите, предварителното свързване е по-изчерпателно и полезно. Всичко обаче си има цена. Използването на предварително свързване за всички ваши връзки може да повлияе отрицателно на оптимизацията на вашата страница. Следователно, yтрябва да използвате предварително свързване само за критични връзки и да използвате 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 г.).
Принос към бюджета за уеб ефективност
- Preconnect може да осигури общо подобрение на скоростта 100-500ms.
- DNS-Prefetch може да ускори всяка връзка с 20-120ms.
Планираме да проведем наши собствени тестове, за да предоставим по-задоволителни местни примери.
И накрая, бих искал да препоръчам блога на Ceyhun Enki Aksan, който значително допринесе за моето разбиране, докато подготвях тази статия: Блогът на Джейхун Енки Аксан.
