Przyspieszenie strony przez DNS prefetch

Oficjalne wytyczne Google dla webmasterów wskazują, że w przypadku mobile-first index kluczową rolę będzie odgrywał czynnik związany z szybkością ładowania się strony, a więc niewątpliwie warto jest zacząć optymalizację jak najszybciej.

Co zatem można zrobić, aby przyspieszyć wczytywanie strony?

Pozwólmy sobie gwoli ścisłości na małą powtórkę, dzięki której nic nam nie umknie. Zatem aby móc przyspieszyć wczytywanie się strony internetowej możemy poczynić następujące kroki:

1. Skompresować pliki graficzne – ważne, aby pamiętać o najnowszym standardzie xGuetzli, o którym też pisaliśmy w naszym artykule wcześniej;
2. Skompresować pliki CSS, JS i przejrzeć ogólnie kod pod tym względem;
3. Ograniczyć liczbę zapytań do bazy SQL poprzez pousuwanie zbędnych elementów strony;
4. Stosować Fontello zamiast grafiki – jest to możliwe, naprawdę to rozwiązanie proponuje mnóstwo tego typu grafik, które w sposób idealny zastąpią nam grafiki standardowe, poszukajcie sami → fontello.com;
5. Zastosować DNS prefetch – wpis w linijce kodu HTML, który... no właśnie, ale o tym poniżej.

Czym właściwie jest DNS prefetch?

            Najkrócej rzecz ujmując jest to powiedzenie przeglądarce, aby w wolnej chwili zainicjowała w tle połączenia z innymi stronami www, z którymi w niedalekiej przyszłości będzie się musiała połączyć, mamy tutaj na myśli różnego rodzaju dane typu zdalne grafiki, CSS, jQuery, filmy z YT i reklamy np. Adsense. Jeśli dane te wczytają się w tle wcześniej, to nie będą obciążały i zwalniały ładowania się kontentu głównego strony, ponieważ... będą już pobrane w tle. I właśnie o to chodzi, aby wcześniej przeglądarka w wolnej chwili nieaktywności kogoś na stronie wczytała sobie do cache'u te właśnie dane.

Jak to w praktyce wygląda?

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

            Najważniejszą czynnością jest oczywiście podpięcie i zdefiniowanie serwisów, z których dane powinny być wcześniej pobrane – czyli np. serwery Google, YT, Facebook, Twitter, G+ i tym podobne - , odbywa się to poprzez wpisanie w kodzie html następującej linijki:

<link rel="dns-prefetch" href="fonts.googleapis.com">

<link rel="dns-prefetch" href="pagead2.googlesyndication.com">

<link rel="dns-prefetch" href="www.google.com">

<link rel="dns-prefetch" href="cdnjs.cloudflare.com">

<link rel="dns-prefetch" href="gravatar.com">

<link rel="dns-prefetch" href="partner.googleadservices.com">

<link rel="dns-prefetch" href="www.youtube.com">

<link rel="dns-prefetch" href="googleads.g.doubleclick.net">

            Co prawda rozwiązanie to nie jest może super istotne w przypadku szybkich połączeń, ponieważ szybkość wczytywania się takich stron na silnych światłowodowych przesyłach danych w dzisiejszych czasach jest ogromna, ale ma to niewątpliwie ogromne znaczenie mimo wszystko dla połączeń radiowych, gdyż jak wiadomo te czasami nie są zbyt szybkie i przeciętnemu Kowalskiemu w ten sposób dodatkowo zoptymalizowana strona internetowa może zaoszczędzić trochę czasu na ładowaniu się i zmniejszyć stres związany z oczekiwaniem na dane. Wiadomo również, że czynnik szybkości ładowania się strony istotny jest dla rankingu Google. Dobrze zoptymalizowana i szybko działająca strona może zyskać dodatkowe punkty, które wpłyną na poprawę pozycji. Pamiętajmy o tym, aby korzystać i z tego rozwiązania, które może przynieść wymierne korzyści dla użytkowników urządzeń przenośnych, na których strony będą się szybciej wczytywać.