Co to jest DNS prefetch?

Jest to powiedzenie przeglądarce by w wolnej chwili zainicjowała połączenie z innym hostem do którego będzie się łączyć w niedalekiej przyszłości. Idealnym przykładem tutaj będą np. reklamy AdSense, fonty zaciągane z CDN Google czy inne CSS (bootstrap), JS (jQuery). Wszystko to odbywa się w tle.

Dzięki wcześniej nawiązanemu połączeniu przeglądarka będzie mogła szybciej pobrać plik(i).
Jak aktywować DNS prefetch?

Aby aktywować to na stronie wystarczy dodać kilka linijek z adresami URL do których będziemy chcieli się „podpiąć”. Najpopularniejsze adresy to Facebook, YT, Twitter czy serwery AdSense:

<link rel="dns-prefetch" href="URL">

Za URL podstawiamy domeny. U mnie na blogu wygląda to następująco:

 

<link rel="dns-prefetch" href="\fonts.googleapis.com">
<link rel="dns-prefetch" href="\cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="\gravatar.com">
<link rel="dns-prefetch" href="\www.googletagservices.com">

Sprawdziłem to. Umieściłem odpowiedni kod HTML w sekcji body, odpaliłem konsolę w Chrome, zajrzałem do zakładki sieć i…. Jest to ledwo zauważalne. A przynajmniej na stałym łączu. Sprawdziłem sobie jak to działa w przypadku obrazków z widgeta FB do lajkowania strony gdzie pojazują się avatary.

Przed dodaniem kodu HTML obrazki ładowały się po około 3 sekundach – długo.

Z kolei gdy dodałem ten tag i odświeżyłem (z przeładowaniem cache – tzw. twardy refresh), to nie zauważyłem żadnej różnicy. Dalej obrazki ładowały się po 3 sekundach. Dopiero za którymś razem zdjęcia wgrały się minimalnie wcześniej i już zaczęły się ładować minimalnie wcześniej przed 3. sekundą. Z kolei na blogu Mechanics od Flite zauważono, że przeglądarka inicjowała połączenie do niektórych zasobów minimalnie szybciej.

Osobiście uważam, że to rozwiązanie na pewno może się przydać w przypadku gdy strony będziemy odwiedzać na wolniejszych łączach np. sieć komórkowa. Na stałym łączu prawie nie widać różnicy.

DNS prefetch jest wspierany we wszystkich, najnowszych przeglądarkach.

Share This

Share This

Share this post with your friends!