Priorytetowe wskazówki Google poprawiają CWV
Eksperymentalny atrybut HTML Chrome może przyspieszyć wyniki Core Web Vitals. Google opublikował artykuł zachęcający programistów i wydawców do korzystania z nowego (i eksperymentalnego) atrybutu wskazówki dotyczącej priorytetu „ważność”, który może pomóc ulepszyć Core Web Vitals i wrażenia użytkownika. Zespół zajmujący się przeglądarką Chrome udostępnił przykład, w którym obraz tła załadowany z atrybutem HTML ze wskazówką priorytetową zaoszczędził 1,9 sekundy w czasie pobierania, tylko w tym jednym obrazie.
Problem, który rozwiązuje wskazówki priorytetowe
Wydawcy mogą przyspieszyć wykrywanie zasobów strony internetowej za pomocą <link rel=preload>, a także mogą kierować tym, jak i kiedy skrypty są pobierane i wykonywane za pomocą atrybutów „ async ” i „ defer ”. Ale wydawcy nie mogą wysłać sygnału, aby poinformować przeglądarkę, które zasoby są ważne, a które nie. Google podaje następujące przykłady problemów, które rozwiązują wskazówki priorytetowe:
„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.
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”.
Podpowiedź dotycząca atrybutów ważności
W języku HTML części składające się na stronę internetową są nazywane Elementami. Byłby to div, nagłówki, znaczniki akapitów, znaczniki obrazów, element linku itp. Jestem prawie pewien, że wszystko, co nazywa się tagiem HTML, jest w rzeczywistości elementem HTML, to łatwy sposób na zapamiętanie, czym jest element. Każdy element można modyfikować za pomocą tak zwanego atrybutu. Pamiętasz atrybut nofollow? W nofollow modyfikuje atrybut elementu Ra.
Atrybut ważności modyfikuje elementy strony internetowej, dając przeglądarce podpowiedź, czy element strony internetowej jest ważny, nieważny, czy po prostu pozwala przeglądarce podjąć decyzję. Atrybut ważności nazywa się wskazówką priorytetową. Atrybut daje przeglądarce podpowiedź, że określony element jest ważny (lub nieważny) i nadaje mu wyższy (lub niższy) priorytet.
Wartości, które może przekazywać atrybut „ ważność ”, to:
– Wysoka
– Niski
– Automatyczny
Wskazówka dotycząca zasobu atrybutu ważności ma zastosowanie do następujących elementów:
– połączyć
– obrazek
– scenariusz
– iframe
W jaki sposób wskazówki dotyczące zasobów poprawiają kluczowe wskaźniki internetowe
Przeglądarki automatycznie obliczają poziomy priorytetów pobierania zasobów. Obecne narzędzia, takie jak atrybut „wstępne ładowanie”, zapewniają wskazówki dotyczące pobierania ważnych zasobów, takich jak na przykład czcionki i obrazy. Inne wskazówki dotyczące zasobów to asynchroniczne i odroczone. Wszystko to pomaga przyspieszyć pobieranie całego dokumentu i sprawić, że dokument będzie widoczny i interaktywny szybciej.
Ale przeglądarka nadal musi zdecydować, który z nich jest ważniejszy. Według Web.dev wstępnie załadowany obraz zostanie pobrany, ale nadal będzie miał niski priorytet przez przeglądarkę i będzie opóźniony. Oto wyjaśnienie:
„Weź obraz o największej zawartości, który po załadowaniu nadal będzie miał niski priorytet.
Jeśli zostanie odsunięty przez inne wczesne zasoby o niskim priorytecie, użycie wskazówek dotyczących priorytetów może nadal pomóc w szybkim załadowaniu obrazu”.
Przykładem przydatności atrybutu ważności jest sytuacja, gdy strona internetowa ma karuzelę obrazów u góry widocznego obszaru (część przeglądarki, którą aktualnie widzi odwiedzający witrynę).
Jeśli karuzela zawiera pięć obrazów, wszystkie można wstępnie wczytać. Ale jeśli pierwszemu przypisano atrybut ważności „ wysoka ”, a pozostałym atrybut „ niskie ”, strona internetowa będzie wyświetlana szybciej, ponieważ przeglądarka będzie teraz wiedziała, że pierwszemu obrazowi należy nadać wysoki priorytet.
Innym przykładem podanym przez Google jest wyróżniony obraz u góry strony internetowej. Przeglądarka nadaje obrazowi niski priorytet i renderuje go dopiero po ukończeniu reszty układu strony internetowej.
Google wyjaśnia:
„Dostarczenie wskazówki dotyczącej priorytetu w znacznikach umożliwia rozpoczęcie obrazu z wysokim priorytetem i rozpoczęcie ładowania znacznie wcześniej.
Należy pamiętać, że wstępne ładowanie jest nadal wymagane do wczesnego wykrywania obrazów LCP zawartych jako tła CSS i można je łączyć z podpowiedziami dotyczącymi priorytetów, umieszczając przy wstępnym wczytywaniu znaczenie=’wysokie’, w przeciwnym razie nadal będzie rozpoczynać się od domyślnego priorytetu „Niski” dla obrazów ”.
To samo dzieje się ze skryptami, które są pobierane jako asynchroniczne lub odroczone, oba mają niski priorytet.
Dodając wskazówkę priorytetową do ważnych skryptów, przeglądarka będzie mogła szybciej renderować stronę i zapewnić lepsze wrażenia użytkownika.
Szybsze ładowanie będzie odczuwane przez odwiedzających witrynę
Priorytetowe wskazówki są obecnie objęte tym, co Google nazywa okresem próbnym Origin. Chrome uruchomił wersję próbną dwa lata temu, ale nie wzbudził zbytniej uwagi. Chrome wprowadza to w Chrome 96, którego premiera zaplanowana jest na 21 listopada 2021 r. Wskazówki dotyczące priorytetów są już dostępne w Chrome Canary , czyli testowej wersji Chrome.
Jak sprawdzić poziom priorytetu zasobów
Poziomy priorytetów zasobów są dostępne do sprawdzenia w dowolnej wersji przeglądarki Chrome, w Narzędziach programistycznych na karcie Sieć. Kliknij trzy kropki (menu wielokropka) w prawym górnym rogu > Więcej narzędzi > Narzędzia programistyczne (następnie wybierz kartę Sieć). Stamtąd ładujesz stronę internetową, kliknij prawym przyciskiem myszy jedną z kolumn (np. Czas lub Wodospad) i wybierz Priorytet, aby wyświetlić poziomy priorytetów. Po zarejestrowaniu się w wersji próbnej Priority Hints możesz używać przeglądarki Chrome Canary do wyświetlania zaktualizowanego priorytetu zasobów, a także w wersji 96 Chrome po jej wdrożeniu.
Gdy weźmiesz udział w tym okresie próbnym, wskazówki dotyczące priorytetów będą pokazywane przeglądarkom odwiedzającym Twoją witrynę, a wszelkie ulepszenia Core Web Vitals zostaną na nich odzwierciedlone. Należy jednak pamiętać, że są to wskazówki dotyczące priorytetów, a nie dyrektywa. Oznacza to, że przeglądarka nie musi ściśle przestrzegać wskazówek dotyczących priorytetów. Przeglądarka może zdecydować się na zignorowanie podpowiedzi oraz przypisanie i skomputeryzowanie własnej kolejności. Można to sprawdzić w Chrome Dev Tools na karcie Sieć, jak opisano powyżej.
Jak zapisać się do wersji próbnej wskazówek priorytetowych
Wydawcy muszą zarejestrować się w Chrome, aby wziąć udział w testach źródłowych, aby uzyskać wskazówki dotyczące priorytetów.
Formularz rejestracyjny Wskazówki priorytetowe znajduje się tutaj:
https://developer.chrome.com/origintrials/#/view_trial/365917469723852801
Wskazówki priorytetowe Pochodzenie Wersja próbna
To jest druga wersja tego okresu próbnego. Za pierwszym razem, gdy był testowany, nie było zbyt wiele odpowiedzi. Ale tym razem może być inaczej ze względu na kluczowe elementy sieci. Wersja próbna jest już otwarta do rejestracji i potrwa do 22 marca 2022 r. Celem okresu próbnego jest zmierzenie zainteresowania programistów i sprawdzenie, czy przyniesie to znaczące ulepszenia.
To, czy funkcja będzie kontynuowana po tej dacie, zależy od Twojej opinii. To świetna okazja, aby poprawić wrażenia użytkownika i być jednym z pierwszych, którzy skorzystają z tej nowej funkcji.