Atrybut rel=”prefetch” – kiedy, jak i dlaczego go stosować

Atrybuty stron HTML

Atrybuty są pewnego rodzaju instrukcjami, które strona internetowa przekazuje przeglądarce, gdy ją odwiedzasz. Za pomocą atrybutów możemy np. „powiedzieć” przeglądarce, czy wskazany link ma być linkiem dofollow, czy też nofollow oraz w jaki sposób ma wczytywać konkretne jej elementy.

Jest to więc bardzo ważne narzędzie w rękach każdego webmastera oraz pozycjonera. Atrybuty HTML przydadzą Ci się także np. przyśpieszeniu strony internetowej korzystając z rel=”preload”, rel=”dns-prefetch” lub rel=”preconnect”.

Atrybut jednak atrybutowi nierówny, ponieważ każdy może oznaczać coś innego. Składają się na niego dwa elementy jakimi jest nazwa atrybutu oraz wartość, którą posiada. W tym poradniku przybliżymy Ci temat atrybut rel=”prefetch”, którego skrót rel pochodzi od angielskiego wyrazu relations, czyli określa on relacje pomiędzy dwoma odsyłającymi do siebie dokumentami HTML. Listę wszystkich poradników na naszym blogu, w których opisaliśmy poszczególne atrybuty HTML znajdziesz poniżej.

A teraz dowiesz się czym różni się atrybut rel=”prefetch” oraz rel=”dns-prefetch” oraz kiedy i w jaki sposób stosować pierwszy z nich.

Atrybut rel=”prefetch”

Wyjaśnimy więc bliżej znaczenie atrybutu prefetch zanim przejdziemy do jego stosowania. Wartość prefetch w atrybucie rel zaleca przeglądarce, aby pobrała wybrane zasoby nawet jeżeli nie zostały one wykryte na danej stronie. Takie zasoby pobierane są z małym priorytetem, jednak znacznie wcześniej, aniżeli w sytuacji, gdyby nie zastosowano wcześniej takiego atrybutu.

Z tego względu zaleca się stosowanie atrybutu rel=”prefetch” tylko do tych zasobów, które mogą przydać się na później, jednak nie są najważniejszym elementem na stronie internetowej [takim jak np. czcionka].

W praktyce kod prefetch wygląda następująco:

rel="prefetch"

Oczywiście musi znaleźć się w nim jeszcze wybrany zasób, ale o tym przeczytasz niżej. Z pomocą atrybutu prefetch przeglądarka może na wczesnym etapie ładowania strony internetowej pobrać oraz zapisać zasoby takie jak skrypty, czy kod CSS w tle, nie blokując renderowania pozostałej części strony.

Tak pobrane zasoby nie są wykonywane, a jedynie zapisywane w przeglądarce na wypadek, gdyby były potrzebne w późniejszym etapie ładowania strony www.

Ok. A czym różni się prefetch od dns-prefetch? 🤔

Atrybut rel=”prefetch” a rel=”dns-prefetch”

Różnica pomiędzy atrybutem rel=”prefetch” a rel=”dns-prefetch” jest w kodzie niewielka i ogranicza się do dodania lub usunięcia przedrostka dns:

Kod HTML prefetch: rel="prefetch"

vs

Kod HTML dns-prefetch”: rel="dns-prefetch"

W praktyce jednak ich działanie jest zupełnie inne. Atrybut rel=”prefetch” w przeciwieństwie do dns-prefetch mówi jej by pobrać konkretny zasób, a nie jedynie połączyć się z serwerem poprzez DNS. Pierwszy atrybut możesz stosować do dowolnych zasobów podczas, gdy drugi odwoływać się może tylko i wyłącznie do zasobów znajdujących się na innych domenach.

Nie oznacza to jednak, że zawsze warto stosować atrybut rel=”prefetch”. Czasami może okazać się korzystniejsze jedyne wstępne połączenie z wybraną domeną, aniżeli pobieranie wszystkich zasobów.

Więcej przeczytasz o tym tutaj: Atrybut rel=”dns-prefetch” – kiedy, jak i dlaczego go stosować.

Kiedy warto stosować atrybut rel=”prefetch”?

Atrybuty rel=’prefetch” wykorzystuje znakomicie możliwości jakie oferuje protokół HTTP/2. Umożliwia on priorytetyzację treści oraz pobieranie jednocześnie wielu elementów w obrębie tej samej domeny. Jak już wspomnieliśmy. stosowanie rel=”prefetch” ma sens tylko w przypadku mniej istotnych zasobów, które będą potrzebne np. na innej podstronie.

Wyobraź sobie taką sytuację:

Niezalogowany użytkownik odwiedza Twoja witrynę. W momencie, gdy przechodzi on do panelu logowania, przeglądarka ma już przygotowane zasoby służące jego uwierzytelnieniu. W ten sposób cały proces będzie szybszy. Choć początkowo strona internetowa nie potrzebowała korzystać z tych zasobów to miała je natychmiast dostępne dzięki instrukcji rel=”prefetch”.

Co istotne, przeglądarki tak dobrze radzą sobie z rel=”prefetch”, że jest mała szansa na jego przedawkowanie 🤓 przesada jednak nigdy nie jest dobra, więc uważaj ze stosowaniem tego atrybutu.

Nie zaleca się stosowanie atrybutu rel=”prefetch” dla zasobów, które są natychmiast potrzebne przeglądarce internetowej. Jakie to zasoby? Style, skrypty i czcionki widoczne od razu po załadowaniu strony www.

Takie działanie da efekt odwrotny do zamierzonego.

Jak stosować atrybut prefetch?

Bardzo prosto 💁‍♂️ do podstawowego kodu atrybutu:

<link rel="prefetch" />

dodaj informację o zasobie oraz jego lokalizację np.:

<link rel="prefetch" href="/style.css" as"style=" />

Podstaw w miejsce powyższego kodu:

• Za href=”/style.css” adres URL wskazanego zasobu.
• Za as”style=” rodzaj wskazanego zasobu.

Prefetchować możesz m.in.:

1. Style [as=”style”],
2. Skrypty [as=”script”],
3. Czcionki [as=”font”],
4. Dźwięki [as=”audio”],
5. Dokumenty [as=”frame” lub as=”iframe”],
6. Obrazy [as=”image”],
7. Filmy [as=”video”],

W ten sposób pomożesz przeglądarce określić priorytet wskazanego zasobu, jednak pamiętaj, że:

Atrybut rel=”prefetch” jest jedynie wytyczną dla przeglądarki, która może, lecz nie musisz go stosować.

A jak stosować atrybut rel=”prefetch” w WordPress?

Atrybut rel=”prefetch” w WordPress

Stosowanie atrybutu rel=”prefetch” w WordPress jest bardzo proste.

Wystarczy wskazany kod np.:

<link rel="prefetch" href="/style.css" as"style=" />

Wstawić w sekcji HEAD strony pomiędzy znacznikami <head> oraz </head>.

Możesz zrobić to edytując plik PHP np. header.php. Znajdziesz go w katalogu motywu na serwerze FTP lub w zakładce Wygląd i Edytor motywu. Możesz także skorzystać z wtyczek takich jak Head, Footer and Post Injections, które umożliwiają dodanie kodu w dowolnej części strony:

Pamiętaj, że wszystkie zmiany robisz na własną odpowiedzialność.

Dlatego zawsze przed ich wykonaniem wykonaj kopię zapasową strony WordPress.

Skorzystaj z naszej pomocy przy atrybutach

Ok. Dotarliśmy do końca poradnika o atrybucie prefetch. Jak się czujesz po takiej dawce wiedzy? ☺️ mamy nadzieję, że wszystko jest już dla Ciebie jasne. Jeżeli jest inaczej, napisz do nas, a nasi eksperci od WordPress pomogą Ci w każdym problemie 💁‍♂️ do usłyszenia niebawem ✋