9249 wyświetlenia
1433 wyrazów
Atrybut rel=”preload” – kiedy, jak i dlaczego go stosować

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

Przeczytasz w 7 minut i 9 sekund 2020.07.19 | Aktualizacja: 8 miesięcy temu
Atrybut rel=”preload” – kiedy, jak i dlaczego go stosować

W tym artykule poznasz atrbytu rel=”preload” odpowiadający na stronie za tzw. preloading. Dowiesz się z niego jak, kiedy i dlaczego warto stosować atrybut rel=”preload” na swojej stronie internetowej, nie tylko WordPress.

Atrybuty HTML

Ach te atrybuty ☺️ lubimy o nich pisać, dlatego na samym początku, jeżeli jeszcze nie wiesz, czym są atrybuty HTML, to koniecznie kliknij w te linki [i dokończ później ten poradnik].

Ok. Co prawda opisaliśmy już dokładnie w nich czym są atrybuty, lecz jeżeli nie znasz tej definicji to skrócimy ją teraz najprościej jak się da:

Atrybuty można najprościej opisać jako cechy wybranego elementu w HTML. W tym przypadku opisując rel=”preload” atrybutem jest rel=”” oznaczający relację [relationship] pomiędzy obecnym i docelowym dokumentem [link], a samo „preload” jest jego wartością.

A więc wiesz już, że:

  1. Atrybut rel=”” oznacza relację pomiędzy stroną zawierającą link, a stroną, do której on odsyła.
  2. Wyraz rel pochodzi od wyrazu relationship, co w języku angielskim oznacza relacje.
  3. Wyraz preload jest wartością atrybutu rel=””.

Czym więc jest dokładnie atrybut rel z wartością „preload” oraz jak i kiedy go stosować?

Atrybut rel=”preload”

Atrybut rel=”preload” jest bardzo spokrewniony z atrybutem rel=”dns-prefetch”. Dlaczego?

Zarówno rel=”preload” jak i rel=”dns-prefetch” odwołują się do tego w jaki sposób przeglądarka ma pobierać zasoby [wewnętrze i zewnętrzne] potrzebne do wyświetlenia Twojej strony. W przypadku rel=”dns-prefetch” przeglądarka nawiązuje wstępne połączenie z zewnętrznym serwerem celem szybszego do nich dostępu na wypadek, gdyby potrzebowała ich w przyszłości.

Natomiast w przypadku atrybutu rel=”preload” wskazujemy przeglądarce, ze zasoby wskazane pod adresem URL są niezbędne do poprawnego wyświetlenia żądanej strony, dlatego przeglądarka musi je pobrać je na wczesnym etapie ładowania strony internetowej.

Atrybut rel=”preload” nie blokuje renderowania strony, ponieważ odwołania z tym atrybutem są pobierane w tle. Wręcz przeciwnie, poprawnie stosowany rel=”preload” znacznie przyśpiesza ładowanie strony internetowej.

Oznacza to, że stosując ten atrybut musisz mieć pewność, że Twoja strona prędzej lub później pobierze i załaduje wskazaną zawartość. W innym wypadku stosując atrybut rel=”preload” dla zasobów zbędnych dla tej strony osiągniesz efekt odwrotny do zamierzonego tj. wolniejsze ładowanie strony internetowej i większe obciążenie łącza oraz serwera.

Ok 🤓 dużo teorii, dlatego teraz przejdziemy do praktyki w stosowaniu rel=”preload”. Jeżeli jednak jakaś część tego artykułu nie jest dla Ciebie jasna to zostaw komentarz, a my na pewno Ci na niego odpowiemy.

Atrybut rel=”preload” w praktyce

Wiesz już jak działa preloading, jednak jak w praktyce zastosować to dla swojej strony internetowej? Zacznijmy od tego czym są zasoby oraz które z nich można i należy wczytywać z atrybutem rel=”preload”.

Zasobami nazywam wszystkie elementy, które potrzebne są do pełnego wczytania strony internetowej. W przypadku stosowania atrybutu rel=”preload” [preloading] możemy odwoływać się do zasobów takich jak:

  • audio: pliki audio osadzane jako <audio>;
  • document: dokument HTML osadzany w ramce <frame> lub <iframe>;
  • embed: osadzone treści wewnątrz tagu <embed>;
  • fetch: zasoby pobierane za pomocą metody fetch lub żadania XHR takie jak ArrayBuffer lub JSON file;
  • font: pliki czcionek takie jak .woff, .woff2, .eot, czy .ttf;
  • image: zdjęcia, obrazki, grafiki  w formatach takich jak .png, .jpg, .jpeg, .webp, .jp2, jpx, .jpm, .jxr, .hdp, .wdp;
  • object: zasodzby osadzane w elemencie<object>;
  • script: pliki JavaScript;
  • style: pliki styli CSS;
  • track: pliki WebVTT;
  • worker: skrypty JavaScript Web worker lub Shared Worker.
  • video: pliki wideo osadzane jako <video>.

W łatwy sposób i to bez specjalistycznej wiedzy możesz sprawdzić jakie zasoby pobiera Twoja strona internetowa na poszczególnym etapie jej wczytywania. W tym celu skorzystaj z pomocy strony webpagetest.org. Gdy ją otworzysz, wpisz adres swojej strony internetowej, kliknij START TEST. Przejdź do sekcji Details, gdzie zobaczysz wszystkie poszczególne zasoby [wewnętrzne i zewnętrzne], do których odwołuje się wskazany adres URL na etapie renderowania strony.

Atrybut rel="preload" [preloading] - zasoby

Zasoby potrzebne do wyświetlenia strony internetowej.

O tym jakie zasoby należy wczytywać z wykorzystaniem rel=”preload”, a jakie z wykorzystaniem atrybutów rel=”dns-prefetch”, rel=”prefetch” i rel=”preconnect” musisz zdecydować już samodzielnie na podstawie analizy swojej strony pod kątem wydajności.

Atrybut rel=”preload” warto wykorzystać w przypadku np. czcionek ładowanych lokalnie lub styli CSS. Kod będzie wtedy wyglądał następująco:

 <link rel="preload" href="style.css" as="style">

Przeczytaj także o font-display w CSS.

Pamiętaj, aby w kodzie umieścić rodzaj osadzonych treści np. as=”script”, as=”font” lub „as=”style”. W przypadku, gdy stosujesz atrybut rel=”preload” dla czcionek internetowych, bardzo ważne jest zastosowanie także oprócz rodzaju zasobu także rodzaj czcionki. Wyobraźmy sobie sytuację, że chcesz preloadować na swojej stronie czcionkę fontawesome-webfont.woff2?v=4.7.0. W tym przypadku należy do kodu dodać także element type=”font/woff2″ określający rodzaj czcionki. Dzięki temu przeglądarka wie, czy obsługuje wskazany element i jest sens go preloadować.

To co jeszcze istotniejsze to fakt, aby nie pominąć w nazwie wersji czcionki – inaczej Google PageSpeed Insight nie „załapie” tego elementu jako preloadowany. Do linijki kodu należy dodać także atrybut crossorigin, który uchroni przed podwójnym ładowaniem tego samego zasobu (czcionki).

Jak więc powinien wyglądać kod rel=”preload” dla fontu np. Font Awesome?

<link rel="preload" href="/wp-content/plugins/js_composer/assets/lib/bower/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

Jak stosować atrybut rel=”preload”?

Atrybut rel=”preload” jest bardzo prosty w zastosowaniu nawet dla laika. Wystarczy, że w nagłówku swojej strony internetowej <head> dodasz poprawny kod zawierający atrybut rel=”preload”, a przeglądarka sama zrozumie co chcesz jej przekazać [nowe przeglądarki wspierają preloading].

Taki kod wskazany jak powyżej należy dodać do nagłówka [np. w pliku header.php] po znaczniku <head>:

<head>

<link rel="preload" href="style.css" as="style">

</head>

Kod rel=”preload” możesz wstawić w dowolnym miejscu, pomiędzy pozostałymi elementami znajdującymi się w sekcji <head>.

Dlaczego warto stosować atrybut preloading?

Opisaliśmy Ci już kiedy warto stosować atrybut rel=”preload”, jakie są różnice pomiędzy tym atrybutem a np. rel=”dns-prefetch” i rel=”prefetch” oraz w jaki sposób dodać poprawny kod do nagłówka w sekcji <head>

Teraz na sam koniec przedstawimy Ci główne zalety z korzystania z rel=”preload” na swojej stronie internetowej:

  1. Atrybut rel=”preload” pozwala przeglądarce priorytetyzować treści wskazując na te, które są najważniejsze w procese renderowania strony internetowej.
  2. Pozwala określić rodzaj stosowanych treści oraz czy będą one ponownie używane w przyszłości.
  3. Przeglądarka może określić, czy żądanie jest zgodne z Content Security Policy w odniesieniu do zdefiniowanych treści.
  4. Pozwala na wysyłanie przez przeglądarkę nagłówka HTTP Accept.

Ok, wiemy, że to dużo technicznych zwrotów, których możesz nie zrozumieć, dlatego ujmijmy to krócej i jaśniej:

Poprawne stosowanie atrybutów rel=”preload” dla zasobów, które są kluczowe w renderowaniu strony internetowej [treści, skrypty, style, bądź czcionki] pozwala znacznie skrócić czas odpowiedzi serwera, pobierania zasobów oraz w rezultacie wczytywania strony internetowej.

Wymaga to oczywiście zaawansowanej analizy budowy strony oraz testowania, które rozwiązanie daje lepsze efekty. O tym jak zrobić to samodzielnie przeczytasz m.in. w tym wpisie.

Możesz to także zlecić nam jak zawsze kontaktując się z nami za pomocą formularza kontaktowego.

Skorzystaj z naszej pomocy

Mamy nadzieje, że artykuł, choć bardzo techniczny, okazał się dla Ciebie zrozumiały. Temat nie jest łatwy, lecz wart uwagi jeżeli zależy Ci na szybkim działaniu strony internetowej oraz najlepszych wrażeniach dla swojego czytelnika. Wiesz dlaczego nasza strona WordPress ładuje się tak błyskawicznie na Twoim urządzeniu? Ponieważ jesteśmy najlepsi w tym co robimy 🤓💪

Skorzystaj już dziś z naszej pomocy na stronie WordPress, a my za Ciebie odpowiednio zoptymalizujemy i skonfigurujemy platformę WordPress także pod kątem atrybutów rel=preload”.

Czekamy na Twoją wiadomość! Do usłyszenia 👏

Jesteśmy by pomagać

Skorzystaj z natychmiastowej pomocy ekspertów WordPress. Wyślij nam wiadomość za pomocą formularza kontaktowego i opisz nam swój problem lub to czego potrzebujesz.

Nazwa firmy
Sirius Pro

Dane firmy
ul. Grzybowska 87
00-844 Warszawa

Identyfikator
PL 9111958679
Zgody i prywatność
Sprawdź i wybierz, które dane może przechowywać ta strona internetowa w plikach cookies, pamięci lokalnej i sesji przeglądarki internetowej
Podstawowe funkcjonowanie strony Do poprawnego korzystania z tej strony wymagane jest anonimowe przechowywanie niektórych danych dotyczących jej wyglądu oraz sposobu działania