103 wczesne wskazówki: co to jest i jak to wdrożyć
Opublikowany: 2022-07-16103 Early Hints to nowy kod stanu HTTP, który pomaga przeglądarkom decydować, jakie treści mają być wstępnie załadowane, zanim strona zacznie się pojawiać.
Po tym, jak Cloudflare po raz pierwszy wspomniał o tym pod koniec zeszłego roku, teraz Google oficjalnie ogłosiło, że wczesne wskazówki są dostępne w wersji Chrome 103 z obsługą wstępnego ładowania i wstępnego łączenia, aby rozpocząć:
W kolejnych wierszach dowiesz się, czym dokładnie są Early Hints i jak możesz je zaimplementować na swojej stronie, aby poprawić wydajność.
Ale wcześniej przechodzimy przez krótki przegląd działania przeglądarek i dlaczego w ogóle potrzebne były Wczesne wskazówki.
W skrócie: przeglądarki, serwery i myślenie o serwerach
Aby załadować tę stronę (lub dowolną inną stronę) i przeczytać treść, Twoja przeglądarka potrzebowała instrukcji dotyczących tego, co renderować i jakie zasoby (takie jak obrazy, czcionki, pliki JavaScript) należy pobrać, aby ukończyć malowanie.
Zasadniczo przeglądarka wysyła żądanie do serwera, a instrukcje dotyczące tego, co należy załadować, pochodzą z odpowiedzi serwera.
Niestety, może wystąpić opóźnienie rzędu kilkuset milisekund, zanim serwer zgromadzi wszystkie zasoby potrzebne do skompilowania całej strony i odesłania jej z powrotem do przeglądarki.
Ten okres jest znany jako „czas namysłu serwera”.
Podczas tego czasu namysłu na serwerze przeglądarka po prostu siedzi i czeka, nie wyświetlając żadnej treści. I wierzę, że moglibyśmy się zgodzić, że nikt nie chce patrzeć na pusty ekran.
W tym miejscu w grę wchodzą Wczesne Wskazówki.
Co to są wczesne wskazówki?
Jednym ze sposobów na poprawę wydajności strony jest użycie wskazówek dotyczących zasobów. Jak sugeruje ich nazwa, podpowiadają one przeglądarce, jakich zasobów może później potrzebować — na przykład wstępnego ładowania określonych plików lub łączenia się z innym serwerem.
Jeśli interesuje Cię temat i chcesz dowiedzieć się więcej, zapoznaj się z naszym artykułem o wskazówkach dotyczących zasobów i ich implementacji.
Choć może się wydawać, że korzystanie z podpowiedzi dotyczących zasobów jest świetne, jest pewien haczyk. Aby przeglądarka działała na nich, serwer musi wysłać przynajmniej część strony.
Wprowadź wczesne wskazówki.
Wczesne wskazówki wykorzystują „czas namysłu serwera”, aby asynchronicznie wysyłać instrukcje do przeglądarki, aby rozpocząć ładowanie krytycznych zasobów podrzędnych (takich jak arkusze stylów, krytyczne pliki JavaScript itp.) lub nawiązać połączenie ze źródłami, które mogą być używane w stronę, gdy serwer kompiluje pełną odpowiedź.
Bez wczesnych wskazówek
Mówiąc prościej:
Po włączeniu funkcji Early Hints serwer wysyła dwie odpowiedzi: pierwszą (kod stanu HTTP 103 Early Hints), aby poinstruować przeglądarkę, co może rozpocząć się od razu, a druga (kod stanu HTTP 200) to kompletna odpowiedź, a pozostałe Informacja.
Z włączonymi wczesnymi wskazówkami
Wysyłając te wskazówki do przeglądarki przed skompilowaniem pełnej odpowiedzi, przeglądarka może dowiedzieć się, co musi zrobić, aby szybciej załadować stronę internetową dla użytkownika.
Efekt końcowy:
Krótsze czasy ładowania strony i mniejsze opóźnienia odczuwane przez użytkownika.
Jeśli szukasz bardziej formalnego wyjaśnienia, Cloudflare wykonał świetną robotę, dostarczając to:
Wdrażanie wczesnych wskazówek na swojej stronie
Aby pomyślnie zaimplementować Wczesne wskazówki na swojej stronie, musisz podjąć kilka kroków.
Krok 0: Rozważ użycie linku rel=preload lub link rel=preconnect zamiast wczesnych wskazówek
Jest to krok 0, ponieważ jeśli Twój serwer może natychmiast wysłać odpowiedź 200, dodanie Wczesnej Podpowiedzi jest bezużyteczne . Zamiast tego, jeśli chcesz jeszcze bardziej przyspieszyć odpowiedź 200, możesz skorzystać ze wskazówek dotyczących zasobu link rel=preload lub link rel=preconnect .
Najłatwiejszym sposobem określenia, jak szybko serwer wysyła odpowiedź 200, jest użycie narzędzia do testowania wydajności KeyCDN. Wszystko, co musisz zrobić, to wstawić adres URL swojej witryny i uzyskać dane:
Krok 1: Zidentyfikuj swoje najlepsze strony
W przypadku, gdy krok 0 nie jest dla Ciebie odpowiedni, a Twój serwer potrzebuje czasu na wygenerowanie odpowiedzi, masz wszystkie warunki wstępne, aby kontynuować integrację Wczesne wskazówki.
Pierwszym krokiem jest zidentyfikowanie najlepszych stron docelowych, czyli innymi słowy strony, na której użytkownicy rozpoczynają swoją podróż w Twojej witrynie. Te punkty wejścia są ważniejsze niż jakiekolwiek inne strony, ponieważ skuteczność Wczesnych wskazówek zmniejsza się, gdy użytkownicy poruszają się po Twoich witrynach .
Dzieje się tak, ponieważ nowoczesne przeglądarki całkiem nieźle sobie radzą z odgadywaniem, którą stronę użytkownik odwiedzi jako następną, i prawdopodobnie mają wszystkie podzasoby, których potrzebują podczas drugiej lub trzeciej kolejnej nawigacji.
Krok 2: Zidentyfikuj krytyczne źródła i zasoby podrzędne, które mają największy wpływ na kluczowe wskaźniki wydajności
Po zidentyfikowaniu najlepszych stron docelowych należy przejść do określenia, które źródła i zasoby podrzędne są dobrymi kandydatami na wskazówki dotyczące wstępnego łączenia lub wstępnego ładowania. Były to źródła i zasoby, które w znacznym stopniu przyczyniają się do kluczowych wskaźników, takich jak największe wyrenderowanie treści i pierwsze wyrenderowanie treści.
Mówiąc dokładniej, warto poszukać zasobów podrzędnych blokujących renderowanie, takich jak synchroniczny JavaScript, arkusze stylów, a nawet czcionki internetowe.
Możesz je zidentyfikować, uruchamiając witrynę za pomocą narzędzia testowego, takiego jak WebPageTest i sprawdzając wykres kaskadowy. Wszystkie zasoby blokujące renderowanie miałyby przed sobą „X”:
Najłatwiejszym sposobem zidentyfikowania zasobów podrzędnych odpowiednich dla wczesnych wskazówek jest sytuacja, gdy główne zasoby już korzystają z linku rel=preconnect lub link rel=preload . To są idealni kandydaci.
I w ten sposób możesz ręcznie dodać Wczesne wskazówki do swojej witryny.
Ale co, jeśli nie masz umiejętności technicznych, aby zrobić to sam?
Cóż, jest prostszy sposób.
Włączanie wczesnych wskazówek za pomocą konta Cloudflare
Jeśli jesteś użytkownikiem Cloudflare, możesz włączyć Wczesne wskazówki za pomocą pulpitu nawigacyjnego, wykonując następujące czynności:
- Zaloguj się do pulpitu nawigacyjnego Cloudflare i wybierz swoją domenę.
- W panelu kliknij Prędkość > Optymalizacja.
- W sekcji Zoptymalizowana dostawa włącz Wczesne wskazówki.
Jak być może wiesz, wbudowany CDN NitroPack jest również dostarczany przez Cloudflare. To przejście otworzyło nam drzwi do rozpoczęcia pracy nad nową funkcją buforowania krawędzi HTML, która po wydaniu pozwoli nam zapewnić wszystkim naszym klientom możliwość włączenia wczesnych wskazówek bez posiadania konta Cloudflare.
Jesteśmy głęboko w procesie rozwoju i ciężko pracujemy nad jak najszybszym uwolnieniem buforowania krawędzi HTML. Dlatego zapisz się do naszego newslettera i śledź nasz blog, aby być pierwszym, który dowie się, kiedy to ogłosimy.