4 Porady SEO 5 minut czytania

DNS prefetch - kolejny sposób na przyspieszenie czasu ładowania strony

Jest dużo możliwości aby przyspieszyć czas ładowania strony. Kompresja obrazków, „lazy load” obrazków, kompresja i minifikacja plików JS i CSS a nawet odpowiednie regułki w pliku .htaccess. Jeżeli nam się uda to można całkiem niezłe czasy wykręcić. Wszystkie wymienione te rzeczy odbywają się po stronie serwera. Dzięki DNS prefetch możemy oddziaływać bezpośrednio na przeglądarkę za pomocą jednej linijki w kodzie HTML naszej strony.

Czym jest DNS prefetch, jak ją aktywować i co nam daje - dowiesz się w dalszej części tego wpisu.

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">
<link rel="dns-prefetch" href="\partner.googleadservices.com">
<link rel="dns-prefetch" href="\tpc.googlesyndication.com">
<link rel="dns-prefetch" href="\securepubads.g.doubleclick.net">
<link rel="dns-prefetch" href="\www.youtube.com">
<link rel="dns-prefetch" href="\pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="\www.google.com">
<link rel="dns-prefetch" href="\static.doubleclick.net">
<link rel="dns-prefetch" href="\googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="\scontent-frt3-1.xx.fbcdn.net">

Realne korzyści

Sprawdziłem to na swoim blogu. 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.



Raz w miesiącu e-mail z najlepszymi artykułami

Zdjęcie autora wpisu - Piotr Cichosz

Piotr Cichosz — autor wpisu

Frontend developer. Tworzę zaawansowane systemy webowe w JS. Swoją wiedzę nt. SEO wykorzystuję do rozwijania własnych projektów (z lepszym lub gorszym efektem). Dużo eksperymentuję i staram się określić jak bardzo można nagiąć cierpliwość algorytmów Google (:.

Zobacz podobne wpisy

Komentarze 4

author Marek www 02.04.2016 04:25:27

Od strony technicznej trochę źle do tematu podszedłeś. CTRL+F5 nie resetuje cache DNSów w przeglądarkach. Do tego masz cache DNS w systemie, i często Routerze. (o ile wszystkich nie wyczyścisz to różnica będzie w granicach ~1ms)
W chrome chwilowy cache sprawdzisz i zresetujesz tu: chrome://net-internals/#dns

Do zasobów popularnych CDN/Google/FB - zupełnie nie warto dodawać tego tagu. W cache przeglądarek większość ludzi już ma te adresy. (mimo limitu 1000 wpisów i historii kilku minut), a już prawie na pewno mają cache w systemie. Ew. zysk w granicach 0.3 ms.

Efekty widać będzie jak masz np. zasoby z niszowego serwisu typu subdomena/inna mało popularna domena, lub Twoja strona odwiedzana jest jako pierwsza w danym dniu...

Na dziś http2 daje największego kopa.
Mimo to nadal spotyka się dążenie do 100/100 w Page Speed Googla, które nie uwzględnia na dziś w wielu elementach http2 i zysku z czasów ładowania stron, a zalecane optymalizacje szkodzą zamiast pomagać w wypadku stosowania tego protokołu.

author DentiMedical www 07.06.2016 19:58:31

@Marek
Bardzo istotne kwestie poruszyłeś. Rzeczywiście nie ma sensu dodawać tagów dla popularnych witryn. Natomiast osiągnięcie 100/100pkt w Google Page Speed Insights równa się często z tak poważnymi zmianami na stronie, że zmienia się jej wygląd i funkcjonalność. Nabijać ten wynik to chyba tylko dla sportu :)

author Adrian 22.08.2016 10:39:45

W WP 4.6 dodali to automatycznie dla fonts.googleapis.com i s.w.org - właśnie się zastanawiałem czy faktycznie przyśpiesza to ładowanie strony.

author Bartek www 25.02.2017 00:23:57

Prefetch działa tylko dla jednego adresu, dlatego nie widać korzyści. Najlepiej jest z Analytics wyciągnąć najpopularniejszą stronę odwiedzana w serwisie i do niej automatycznie podpisać prefetch, wtedy masz pewność że skrocisz czas ładowania strony dla większości użytkowników.
Fajna sprawa :)

Dodaj komentarz