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." />
7 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.




Akceptuję politykę prywatności

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

Zapytaj nas o pozycjonowanie!
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 (:. Prowadzę teraz bloga technologicznego oraz bloga o Apple

Zobacz podobne wpisy

  • 16 Udało się pokonać Wikipedię

    W końcu. Udało się. Jest to kontynuacja wpisu z końca ubiegłego roku pt. „Co zrobić gdy na stronie długo nic się nie pojawia?” gdzie opisałem mój patent. Dzisiaj, po kilku miesiącach publikuję kolejny wpis. Już teraz wiem, że będzie jeszcze jeden wpis, bo analiza statystyk z GWT pokazała, że muszę jeszcze bardziej się postarać.

  • 35 3,5 regułki .htaccess dzięki którym strona będzie szybsza

    Od dłuższego czasu Google robi wszystko co w swojej mocy by dać do zrozumienia webmasterom, że im szybciej strona się wczytuje tym lepiej. I nie chodzi tutaj o czynnik wpływający na pozycję, ale o samą wygodę użytkowników.

  • 14 Google używać będzie markup schema.org do wyświetlania logotypów w SERPach

    Dobra wiadomość dla wszystkich, którzy mają bzika na punkcie optymalizacji strony. Kilka dni temu Google poinformowało, że będzie wspierać markup HTML schema.org dla ogranizacji. Chodzi głównie o wsparcia dla loga firmowego.

  • 13 Jak poprawnie przenieść stronę na nową domenę lub silnik?

    Wiele osób ma z tym problemy, pojawiły się pytania w komentarzach, dostaję wiadomości na G+ i FB z pytaniami o porady jak to zrobić poprawnie. Dzisiaj wpis dedykowany specjalnie tej migracji, która tylko pozornie wygląda na banalną.

  • 8 Snippety Google nie zawsze są dobre

    Snippety Google w SERPach fajnie wyglądają, przykuwają oczy, ale... Czasami utrudniają pozycjonowanie w niektórych przypadkach. Od dłuższego czasu zmagam się z takim przypadkiem.

  • 25 Filtr za pozycjonujący link wewnętrzny do strony głównej?

    Jak donosi SER (Search Engine Roundtable), na jednym z for internetowych pojawił się ciekawy wątek, w którym webmaster informuje, że dostał filtr za link do strony głównej wewnątrz strony.

  • 11 Po lipcowych zawirowaniach

    Pamiętacie jak wylewałem żale pod koniec lipca, że jeden z moich serwisów poleciał na jakieś 90% linkowanych fraz? Udało się powrócić na wszystkie frazy do top5 i top10! Łatwo nie było.

  • 12 Kilka słów o przebudowie większego serwisu

    Dzisiaj podzielę się z Wami kilkoma uwagami na temat tzw. re-brandingu strony w którym brałem udział. Zebrało się kilka dobrych rzeczy i kilka wtop. Mam nadzieję, że kilka z nich będą dla Was pomocne i pozwolą lepiej przygotować się tematu.

  • 24 Filtry za przegięcie w optymalizacji?

    Kilka dni temu, świat SEO obiegła informacja o tym, że ten rok znowu będzie pod znakiem zmian w algorytmie Google. Ostatnio była Panda, teraz będą kary z przedobrzenie z optymalizacją serwisu. O wszystkim poinformował sam Matt Cutts na ostatniej konferencji SXSW na panelu o nazwie "Dear Bing and Google: Help Me Rank Better!" :D.

  • 29 FireFox z Bingiem juz jest :)

    Wiele osób nie wierzyło w to, że jedna z najpopularniejszych przeglądarek może połączyć się z Microsoftem serwując jako domyślną "szukajkę" Binga. I wiecie co? Stało się!

  • 26 Dlaczego Google potrzebuje Firefoxa?

    Zastanawialiście się może dlaczego Google w Polsce jest tak popularne? Dzisiaj pokażę Wam jak może zmienić się sytuacja na rynku wyszukiwarek, gdy Microsoft sypnie większą kasą w jedno miejsce.

  • 17 Optymalizacja opisu strony (konkurs)

    Opis strony co prawda nie jest brany pod uwagę przy ustawianiu wyników organicznych, ale za to pojawia się w wynikach. To dzięki niemu możemy przekonać potencjalnego klienta do nas. Przez chwilę. Niestety.

  • 16 Optymalizacja sklepu internetowego

    Dla każdego sklepu internetowego, wyszukiwarki to jedyne źródło generowania ruchu oraz dochodu. Większe sklepy mogą pozwolić sobie na większe kampanie reklamowe. Najgorzej mają nowe sklepy, które muszą przebić się przez coraz większą konkurencję, chyba że sprzedaje niszowe produkty – wtedy konkurencji nie ma lub jest bardzo mała.

  • 16 Być SEO friendly (cz. IV) – przyjazne linki

    W wielu miejscach w sieci pojawiają sie informacje o tym, że przyjazne linki (friendly urls) sprzyjają pozycjoconowaniu.

  • 18 Być SEO friendly (cz. III) - mapy strony (Sitemaps)

    Dzisiaj mapy stron mają coraz większe znaczenie przy pozycjonowaniu, dokładniej w indeksacji strony.

Komentarze 7

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 :)

author gh 12.12.2018 11:50:18

W przykłdzie masz linki z href="fonts.googleapis.com" a powinno być chyba href="fonts.googleapis.com" - z

author Adam www 15.10.2019 14:44:55

Warto to robić jak się ma głównie popularne dmoney FB, Adsense itp, jak tu kolega powyżej sugeruje?

Te się dodaje do sekcji body, czy do head?

author Martin 24.05.2020 00:05:27

prefetch wstrzymuje ladowanie strony, do czasu az przegladarka zrobi prefetch.

Bez prefetch browser rysuje od razu kontent z htmla i polaczenia do reszty kontentu (z subdomen np) nawiazywane sa na bierzaco i to symultanicznie gdy strona juz sie rysuje.

Overal nie przyspiesza to niczego, wrecz zwalnia bo browser czeka az zrobi prefetch


Wiec po co to stosowac? Po to by na przyklad strona, po dluzszym namysle poczatkowym wskoczyla instant, szczegolnie jak dodatkowo zrobimy w head prefetch fotek w js.

Bo wedlug googla jak juz user cos juz zobaczy to chce miec wszystko i chodzi o to by dac mu jak najwiecej w jak najkrotszym czasie
kosztem dluzszego czekania na cokolwiek, po to jest prefetch.

Ale kompletna strona laduje sie przez to wolniej.
bo na poczatku zostanie wstrzymana na ten prefetch.

Niektore wkazniki moze to poprawic ale inne uwali. Zalezy od konstrukcji strony, kontentu na niej, skryptow itd itp. Zalezy co chcemy osiagnac.



Dodaj komentarz