Atrybuty linków m.in. pomagają zrozumieć robotom wyszukiwarek, jak mają traktować poszczególne odnośniki. Atrybut rel=”” określa relację pomiędzy stroną, która zamieszcza link, a stroną do której odsyła. Natomiast tytułowy “preload” jest wartością tego atrybutu. Przyjrzyjmy się zatem temu, czym jest oraz kiedy najlepiej go wykorzystywać.
Spis treści:
Czym jest atrybut rel=”preload”?
Atrybut rel=”preload” najogólniej mówiąc odwołuje się do pobierania zasobów przez przeglądarkę w celu wyświetlenia strony internetowej. Poprawnie stosując ten atrybut, pokazujemy przeglądarce, które zasoby są kluczowe, aby strona wyświetliła się prawidłowo. Jest to sposób wykorzystywany oczywiście na potrzeby adresów URL, ponieważ rel=”preload” to atrybut linku. Warto zaznaczyć, że jeśli odpowiednio go wykorzystamy to może on wpłynąć pozytywnie na prędkość ładowania naszej strony internetowej.
Czy atrybut rel=”preload” może działać negatywnie?
Jak najbardziej. Stosowanie atrybutu rel=”preload” w przypadku zasobów, które nie są niezbędne, może negatywnie wpływać nie tylko na prędkość ładowania strony internetowej, ale także ogólną szybkość serwisu. Będzie to powodowało większe obciążenia dla serwera, a w konsekwencji jeszcze poważniejsze nieprawidłowości. Dlatego stosowanie tego atrybutu powinno być ściśle uargumentowane i nie powinno się nim zapychać kodu źródłowego strony.
Jak wykorzystywać rel=”preload”?
Poprawne zastosowanie tego atrybutu odnośnika, nie powinno sprawić większych trudności. Przede wszystkim należy do nagłówka własnej strony w sekcji <head> dodać poprawny kod. W celu umieszczenia go w poprawnym miejscu, możemy wybrać plik np. w WordPressie będzie to plik header.php i po znaczniku <head> umieścić:
<head>
<link rel=”preload” href=”style.css” as=”style”>
</head>
Warto zaznaczyć, że nie jest ważne miejsce umieszczenia atrybutu rel=”preload”. Wystarczy, że będzie się znajdował w sekcji <head>, bez względu na kolejność pozostałych kodów.
Do jakich plików można wykorzystywać atrybut rel=”preload”?
Teraz zastanówmy się nad tym, do jakiego rodzaju zasobów może odnosić się ten atrybut linku. Oczywiście mają być one kluczowe, aby prawidłowo wyświetlać Twoją stronę internetową. Można jednak powiedzieć, że zasób zasobowi nierówny. Dlatego warto przyjrzeć się kilku przykładom, dla których warto zastosować atrybut rel=”preload”:
- document: chodzi o dokument HTML, który osadzony jest w ramce np. <frame>;
- audio: osadzone pliki audialne w formie <audio>;
- video: pliki audiowizualne osadzone w formie <video>;
- embed: wewnętrzna treść osadzona w tagu <embed>;
- object: zasoby znajdujące się w <object>;
- font: w tym przypadku chodzi o pliki czcionek wykorzystywanych na stronie np. .ttf;
- image: chodzi o pliki graficzne w przeróżnych formatach od .png i .jpg (wraz z odmianami) po .webp, .wdp itp.;
- script: w tym przypadku po prostu pliki JavaScript;
- style: style CSS;
- worker: skrypty Web Worker, Shared Worker lub JavaScript.
Lista zasobów jest długa, a wciąż niepełna. Są to przykłady, które najczęściej są niezbędne do tego, aby strona wczytywała się prawidłowo.
Do jakich zasobów wykorzystać atrybut rel=”preload”?
Jeśli chcemy odpowiedzieć sobie na to pytanie, powinniśmy udać się do… Internetu. Nie brakuje ogólnodostępnych narzędzi, które sprawdzają prędkość ładowania się naszej strony. Co więcej, mogą one pokazywać na jakim etapie ładowania, jakie pliki są wykorzystywane. Przykładem takiego narzędzia może być webpagetest.org. Wskaże Ci na diagramie, ile trwa ładowanie poszczególnych zasobów, jaki jest łączny czas ładowania strony itp.
To właśnie na podstawie analizy swojej strony pod tym kątem, musisz podjąć decyzję do jakich zasobów wykorzystasz atrybut rel=”preload”. Można jednak zaznaczyć, że zaleca się go wykorzystywać do np. stylów CSS lub czcionek, które są ładowane lokalnie.
Atrybut rel=”preload” – kilka słów na koniec
Atrybut rel=”preload” odnosi się do swego rodzaju hierarchii ważności zasobów. Ma on za zadanie wskazywać przeglądarkom, które zasoby mają być ładowane w pierwszej kolejności. W ten sposób możemy realnie przyspieszyć prędkość wczytywanie własnej strony internetowej. Należy jednak pamiętać, że wykorzystywany w niewłaściwy sposób, może przynieść efekty odwrotne do zamierzonych.
Dlatego wykorzystywanie atrybutu rel=”preload” powinno być odpowiednio przemyślane. Jeśli chcesz dowiedzieć się, które zasoby w Twoim przypadku są kluczowe do prawidłowego wyświetlania strony, warto wykorzystać dostępne w Internecie narzędzia. Na podstawie analizy uzyskanych danych, powinniśmy zdecydować się na konkretne rodzaje zasobów.
Dodaj komentarz