Przyspiesz ładowanie zasobów dzięki wskazówkom dotyczącym priorytetów i priorytetom pobierania

Jak szybko ładują się Twoje najważniejsze zasoby?

To dokładne pytanie zadaje właścicielom witryn (i doświadczonym ekspertom internetowym) na szpilkach i igłach. I tak się składa, że ​​tworzy lub psuje Twoją witrynę w ciągu pierwszych milisekund.

Jeśli chodzi o optymalizację ładowania zasobów, masz dwie możliwości:

1. Polegaj całkowicie na mechanizmach przeglądarek, aby pobierać i pobierać zasoby w optymalnej kolejności.
2. Spróbuj im pomóc, wdrażając wskazówki dotyczące zasobów.

Niestety, tak dobre jak nowoczesne przeglądarki, każda witryna/aplikacja różni się konfiguracją i kontekstem. I chociaż są całkiem dobre w przypisywaniu priorytetów zasobów, w niektórych przypadkach to nie wystarczy.

Niestety, wskazówki dotyczące zasobów mają ograniczony wpływ na priorytety zasobów.

Na szczęście pojawiła się nowa wskazówka, którą możesz dodać do swojego zestawu narzędzi do zwiększania wydajności sieci — wskazówki dotyczące priorytetów.

W tym artykule dowiesz się więcej o:

• Czym są wskazówki priorytetowe;
• Kiedy ich używać;
• Jak je wdrożyć za pomocą priorytetu pobierania;
• Jak możesz je przetestować na swojej stronie.

Zaczynajmy!

Czym są wskazówki priorytetowe?

Wskazówki dotyczące priorytetów to sygnał, który pozwala właścicielom witryn i programistom wskazać priorytet zasobów (np. obrazów, czcionek, CSS, skryptów i ramek iframe) podczas ich ładowania przez przeglądarki.

Przeglądarka musi pobierać wszelkiego rodzaju zasoby w procesie budowania strony internetowej. Jako zasób priorytetowy najpierw żąda i pobiera dokument HTML.

Ale w jaki sposób przeglądarka określa, co ma załadować dalej?

Cóż, przeglądarki mają zestaw z góry określonych priorytetów dla każdego typu zasobu:

Te domyślne priorytety zwykle działają całkiem dobrze, co skutkuje dobrą wydajnością sieci.

Jednak, jak wspomniał Addy Osmani w swoim artykule o wskazówkach dotyczących priorytetów, przeglądarki potrafią dość dobrze zgadywać, co należy pobrać dalej.

Ale oni nie znają twojego projektu tak dobrze jak ty.

Może więc być konieczne drobne dostrojenie:

„Przeglądarki takie jak Chrome mają heurystykę do próby pobrania zasobów o odpowiednim priorytecie na podstawie sygnałów, takich jak to, czy znajdują się w widocznym obszarze. To powiedziawszy, bez wskazówek dotyczących priorytetów Chrome jest w stanie podnieść priorytet obrazów w widocznym obszarze tylko po utworzeniu układu. zostało ukończone. Bardzo często jest to za późno i na tym etapie może konkurować ze wszystkim innym. Innym powodem, dla którego warto rozważyć korzystanie z podpowiedzi, jest to, że jako autor strony prawdopodobnie wiesz, co jest najważniejsze dla użytkowników, aby zobaczyć je jako pierwsze i może poinformować przeglądarkę, aby mogła zoptymalizować ją pod kątem Twojego zastosowania."

Wcześniej jedyną rzeczą, którą można było zrobić, było użycie preload lub preconnect.

I chociaż wstępne ładowanie jest obowiązkową dyrektywą, z którą przeglądarki muszą być zgodne, w niektórych przypadkach wstępnie załadowany zasób może nadal mieć niski priorytet.

Na przykład wstępnie załadowany obraz największej zawartości (LCP) może otrzymać niski priorytet i zostać odsunięty przez inne zasoby o wysokim priorytecie. W takich przypadkach wskazówki dotyczące priorytetów mogą doskonale uzupełniać wstępne ładowanie i pomagać w szybkim wczytywaniu zasobów.

Oto webinarium na temat wskazówek priorytetowych, w którym Pat Meenan opowiada o wskazówkach priorytetowych w Chrome, a nawet nazywa je „oszustwem” dla LCP:

To doskonały przykład potęgi wskazówek priorytetowych.

Zobaczmy teraz, kiedy należy wdrożyć wskazówki dotyczące priorytetów w swojej strategii wydajności sieci.

Kiedy używać wskazówek priorytetowych

Według Google istnieje 5 głównych scenariuszy, w których wskazówki dotyczące priorytetów mogą pomóc:

1. Masz kilka zdjęć w części strony widocznej na ekranie, ale nie wszystkie muszą mieć ten sam priorytet. Na przykład w karuzeli obrazów tylko pierwszy widoczny obraz wymaga wyższego priorytetu niż pozostałe.
   
2. Obrazy bohaterów w widocznym obszarze zaczynają się z niskim priorytetem. Gdy układ jest gotowy, Chrome odkrywa, że ​​znajdują się w widocznym obszarze i zwiększa ich priorytet (niestety, narzędzia programistyczne pokazują tylko ostateczny priorytet – WebPageTest pokaże oba). Zwykle powoduje to znaczne opóźnienie ładowania obrazu. Dostarczenie wskazówki dotyczącej priorytetu w znaczniku umożliwia rozpoczęcie obrazu z wysokim priorytetem i rozpoczęcie ładowania znacznie wcześniej.

Uwaga: Zadeklarowanie skryptów jako asynchronicznych lub odroczonych nakazuje przeglądarce ładowanie ich asynchronicznie. Jednak, jak widać na powyższym rysunku, skryptom tym również przypisywany jest „niski” priorytet. Możesz chcieć podnieść ich priorytet, zapewniając jednocześnie pobieranie asynchroniczne, szczególnie w przypadku skryptów, które są krytyczne dla wygody użytkownika.

Możesz użyć JavaScript fetch() API do asynchronicznego pobierania zasobów lub danych. Pobieranie ma wysoki priorytet przez przeglądarkę. Mogą zaistnieć sytuacje, w których nie chcesz, aby wszystkie pobrania były wykonywane z wysokim priorytetem i wolisz zamiast tego używać różnych wskazówek dotyczących priorytetów. Może to być przydatne podczas uruchamiania wywołań API w tle i mieszania ich z wywołaniami API, które odpowiadają na dane wejściowe użytkownika, na przykład w przypadku autouzupełniania. Wywołania interfejsu API w tle można oznaczyć jako o niskim priorytecie, a interaktywne wywołania interfejsu API oznaczyć jako o wysokim priorytecie.

Przeglądarka przypisuje CSS i czcionki wysoki priorytet, ale wszystkie takie zasoby mogą nie być równie ważne lub wymagane dla LCP. Możesz użyć wskazówek dotyczących priorytetów, aby obniżyć priorytet niektórych z tych zasobów.

Prawie każda strona internetowa mieści się w dwóch pierwszych scenariuszach. Aby ustalić, czy powinieneś popracować nad którąkolwiek z pozostałych, zagłębij się w swój kod (HTML/JS) lub poproś o pomoc programistę internetowego.

Jak wdrożyć wskazówki dotyczące priorytetów: atrybut fetchpriority

Wskazówki dotyczące priorytetów można zaimplementować za pomocą atrybutu fetchpriority HTML.

Możesz użyć atrybutu z:

• połączyć
• obrazek
• scenariusz
• Tagi iframe

Atrybut fetchpriority przyjmuje jedną z trzech wartości:

• wysoki: wskazuje, że uważasz zasób za krytyczny i chcesz, aby przeglądarka nadała mu priorytet.
• niski: sygnalizowanie, że uważasz zasób za mniej ważny i chcesz, aby przeglądarka zmieniła jego priorytet.
• auto: wartość domyślna, gdy nie masz preferencji i pozwól przeglądarce wybrać odpowiedni priorytet.

Możesz też użyć interfejsu JavaScript Fetch API:

Kilka rzeczy, o których należy pamiętać podczas korzystania z atrybutu fetchpriority :

• fetchpriority nie gwarantuje, że zasób o wyższym priorytecie zostanie załadowany przed innymi zasobami (o niższym priorytecie) tego samego typu.
• fetchpriority nie powinno być używane do kontrolowania samej kolejności ładowania.
• fetchpriority nie jest obowiązkową dyrektywą i nie może zmusić przeglądarki do pobrania zasobu ani uniemożliwić jego pobrania. Od przeglądarki zależy, czy pobierze zasób, czy nie.

Ważne: Podobnie jak w przypadku wskazówek dotyczących zasobów, wskazówki dotyczące priorytetów należy stosować ostrożnie, ponieważ nadużywanie może spowodować spowolnienie, a nie poprawę wydajności.

Jak przetestować swoją witrynę za pomocą wskazówek priorytetowych

Przed uruchomieniem testów należy wiedzieć, że wskazówki dotyczące priorytetów są dostępne tylko w przeglądarce Chrome 101 (lub nowszej) i Edge 101 (lub nowszej):

Teraz do pytania pod ręką:

Najprostszym sposobem byłoby użycie narzędzia, dzięki czemu nie musisz ręcznie zmieniać kodu.

Na szczęście funkcja Eksperymenty WebPageTest umożliwia testowanie funkcji wydajności, takich jak wskazówki dotyczące priorytetów, bez zmiany kodu.

Jednak funkcja eksperymentu WebPageTest jest częścią ich płatnej subskrypcji, więc musisz zaplanować dodatkowe wydatki.

Wręcz przeciwnie, jeśli masz umiejętności techniczne, możesz samodzielnie dopracować kod swojej witryny i przetestować wpływ wskazówek priorytetowych.

Upewnij się, że przeprowadzasz testy po każdej dokonanej zmianie.

Podsumowanie

Pokonaliśmy dużo terenu, więc oto krótkie podsumowanie najważniejszych punktów:

• Wskazówki dotyczące priorytetów pozwalają określić priorytet zasobów witryny.
• Wskazówki dotyczące priorytetów mogą przyspieszyć ładowanie obrazów w części strony widocznej na ekranie, obrazów bohaterów (element LCP), asynchronicznych i odroczonych skryptów, CSS i plików czcionek.
• Wskazówki dotyczące priorytetów można zaimplementować za pomocą atrybutu fetchpriority.
• Możesz użyć atrybutu fetchpriority z tagami link, img, script i iframe.
• Atrybut fetchpriority przyjmuje jedną z trzech wartości: high, low i auto.
• Uwaga: Podpowiedzi dotyczące priorytetów powinny być wdrażane oszczędnie, ponieważ ich nadużywanie może prowadzić do zmniejszenia wydajności, a nie poprawy szybkości.
• fetchpriority nie jest obowiązkową dyrektywą i nie może zmusić przeglądarki do pobrania zasobu ani uniemożliwić jego pobrania. Od przeglądarki zależy, czy pobierze zasób, czy nie.
• Wskazówki dotyczące priorytetów są dostępne w przeglądarce Chrome 101 lub nowszej.

Aby zmierzyć wpływ wskazówek priorytetowych na Twoją witrynę, przeprowadzaj testy po każdej zmianie.

Popularne narzędzia testowe:

• Statystyki PageSpeed
• GTMetrix
• Test strony internetowej
• Latarnia morska
• Pingdom