Jak wstępnie załadować kluczowe żądania, aby uzyskać lepsze podstawowe wskaźniki internetowe

Nie wszystkie zasoby Twojej witryny są równie ważne.

Tak, wszystkie są potrzebne, aby Twoja witryna wyglądała i działała bezbłędnie, ale jeśli chodzi o jej wydajność, niektóre muszą mieć wyższy priorytet.

W przeciwnym razie ryzykujesz powolne ładowanie stron i długą listę ostrzeżeń w raporcie PageSpeed ​​Insights (PSI).

Jednym z nich jest –Preload key requests.

W kolejnych linijkach dowiesz się, czym są kluczowe żądania, dlaczego tak ważne jest naprawienie ostrzeżenia „Preload key request” i wreszcie – jak to zrobić.

• Co oznacza żądanie wstępnego załadowania klucza
• Jak wstępne ładowanie krytycznych zasobów poprawi szybkość Twojej witryny
• Jak zidentyfikować kluczowe żądania, które należy wstępnie załadować
• Jak naprawić ostrzeżenie o prośbach o wstępne załadowanie klucza
• Automatyczne wstępne ładowanie żądań kluczy

Czytaj.

Co oznaczają żądania wstępnego ładowania klucza?

Wstępnie ładując kluczowe żądania, informujesz przeglądarkę, które zasoby są najbardziej krytyczne do pobrania z wyprzedzeniem. Dzięki temu najważniejsze pliki ładują się szybciej, zwłaszcza jeśli w przeciwnym razie zostałyby wykryte i pobrane na późniejszym etapie procesu.

Ale to rodzi pytanie:

Co sprawia, że ​​żądanie jest krytyczne?

Żądanie krytyczne to zasób wyświetlany w początkowym widocznym obszarze strony (lub w części strony widocznej na ekranie, jak to nazywamy na rynku).

Na przykład oto, co widzę, gdy ładuję stronę główną NitroPack na moim laptopie:

Wszystkie zasoby, które są ładowane w górnej części ekranu, są uważane za krytyczne. Dlatego powinny być pobierane i renderowane przez przeglądarkę z wyższym priorytetem, aby zapewnić użytkownikowi natychmiastowe ładowanie.

Ogólnie rzecz biorąc, algorytmy przeglądarek całkiem dobrze radzą sobie z priorytetyzacją najbardziej krytycznych zasobów strony. W rzeczywistości, gdy przeglądarka pobiera zasób, przypisuje mu priorytet:

• Najwyższy
• Wysoki
• Średni
• Niski
• Najniższy

Jednak jako właściciel/programista witryny internetowej masz cenne informacje na temat tego, które zasoby są bardziej krytyczne niż inne. W związku z tym, wstępnie je ładując, nie tylko zignorujesz ostrzeżenie PSI, ale także poprawisz ogólną wydajność i wygodę użytkownika.

Oto jak…

Jak zastosowanie poprawki żądań wstępnego ładowania klucza poprawi wydajność

Prawda jest taka:

Naprawianie ostrzeżenia „Preload key request” tylko po to, by przenieść kolejne ostrzeżenie do kategorii „passed” nie jest tego warte.

Jednak wstępne załadowanie najważniejszych zasobów strony internetowej będzie miało znaczący wpływ na:

• Podstawowe wskaźniki internetowe
• Wynik wydajności
• Postrzegana wydajność

Zobaczmy, jak to możliwe.

Wstępne ładowanie i największa zawartość farby (LCP)

Największe malowanie treści mierzy, ile czasu zajmuje załadowanie największego elementu widocznego na ekranie na stronie.

Typy zasobów, które są najczęściej uważane za element LCP, obejmują:

• Obrazy;
• znaczniki obrazu;
• Miniatury wideo;
• Obrazy tła z CSS;
• Elementy tekstowe.

Wszystkie z nich są świetnymi kandydatami do wstępnego ładowania.

Szybsze dostarczanie ich pomoże Ci poprawić wskaźniki Core Web Vitals, z którymi strony internetowe borykają się najbardziej.

Co więcej, LCP stanowi 25% ogólnego wyniku wydajności. Zwiększenie go nieuchronnie doprowadzi do przesunięcia wyniku z czerwonego na zielony.

Zdobądź swój wynik LCP od czerwonego do zielonego jednym kliknięciem. Zainstaluj NitroPack już dziś →

Wstępne ładowanie i pierwsze malowanie zawartości (FCP)

First Contentful Paint (FCP) mierzy czas potrzebny przeglądarce na wizualizację pierwszego fragmentu treści DOM (np. obrazu, SVG, niepustego elementu płótna) na stronie.

Chociaż wstępne ładowanie animacji lub logo Twojej strony (może również wywołać FCP) może wydawać się nieistotne, ma kluczowe znaczenie dla doświadczenia użytkownika.

Kiedy przeglądarka natychmiast ładuje element FCP, wysyła bezpośrednią odpowiedź do użytkownika, że ​​jego dane wejściowe są przetwarzane, a strona się ładuje.

Jeśli strona pozostaje pusta przez kilka sekund przed załadowaniem, użytkownicy nie wiedzą, czy coś się dzieje. I możesz odgadnąć, jaki byłby ich następny krok:

Odbić się!

Innymi słowy, wstępne ładowanie elementu FCP jest niezbędne do zadowolenia odwiedzających, a co najważniejsze – do Twojej witryny.

Co więcej, FCP odpowiada za 10% twojego wyniku wydajności, więc również uzyskasz wzrost w tym aspekcie.

Wstępne ładowanie i postrzegana wydajność

Kilkakrotnie wspominaliśmy o postrzeganej wydajności. Jeśli zastanawiasz się, co to znaczy, oto definicja:

„Postrzegana wydajność jest subiektywną miarą wydajności strony internetowej, responsywności i niezawodności. Innymi słowy, jak szybko strona internetowa wydaje się użytkownikowi. Jest to trudniejsze do oszacowania i zmierzenia niż rzeczywista szybkość działania, ale być może nawet ważniejsze”.

W niektórych przypadkach postrzeganie tego, jak szybko i płynnie strony ładują się i reagują na interakcję użytkownika, jest nawet ważniejsze niż rzeczywisty czas potrzebny do pobrania zasobów.

Wstępnie ładując kluczowe zasoby, zapewniasz użytkownikom wrażenie strony, która ładuje się szybciej. Treść wydaje się ładować szybko i płynnie, zapewniając bardziej płynne przeglądanie. Użytkownicy mogą szybciej wchodzić w interakcję ze stroną, nie czekając na pobranie i załadowanie krytycznych zasobów.

Ta lepsza postrzegana wydajność może prowadzić do

• większe zaangażowanie użytkowników
• zmniejszone współczynniki odrzuceń
• ogólne zadowolenie z witryny

Jak zidentyfikować najbardziej krytyczne żądania, które należy wstępnie załadować

Google PageSpeed ​​Insights to najłatwiejszy i najskuteczniejszy sposób identyfikowania kluczowych żądań do wstępnego załadowania.

Podczas testowania skuteczności adresu URL sprawdź sekcję Możliwości, aby znaleźć rekomendacje. Poszukaj w szczególności sugestii oznaczonej „Prośba o wstępne załadowanie klucza”, podobnej do pokazanego przykładu:

Alternatywnie możesz przeprowadzić kilka testów za pomocą Chrome DevTools. Aby rozpocząć proces, załaduj stronę, którą chcesz przetestować, i kliknij Inspekcja > Lighthouse.

Następnie wybierz, czy chcesz przetestować mobilną czy komputerową wersję swojej strony i kliknij „Analizuj” ładowanie strony:

Po zakończeniu testu przewiń w dół i poszukaj ostrzeżenia „Preload key requests”.

Uwaga: ponieważ Google PageSpeed ​​Insights korzysta z Lighthouse, testowanie strony za pomocą PSI lub Chrome DevTools da takie same wyniki. To zależy od Ciebie, który sposób wolisz.

Aby zrozumieć, jak dokładnie Lighthouse określa, które zasoby są odpowiednie do wstępnego ładowania, spójrzmy na poniższy przykład.

Łańcuch krytycznych żądań Twojej strony wygląda następująco:

> indeks.html

>> app.js

>>> style_custom.css

>>>> ui_custom.js

W pliku index.html umieszczasz tag script src="app.js" . Gdy plik app.js jest wykonywany, wyzwala wywołanie fetch() w celu pobrania stylów_niestandardowych.css i ui_custom.js . Strona nie zostanie w pełni wyświetlona, ​​dopóki te dwa zasoby nie zostaną pobrane, przeanalizowane i wykonane. Takie pliki są uważane za zasoby blokujące renderowanie.

W związku z tym Lighthouse zidentyfikowałby pliki styles_custom.css i ui_custom.js jako odpowiednie zasoby.

Problem polega na tym, że przeglądarka dowiaduje się o dwóch ostatnich plikach dopiero po pobraniu, przeanalizowaniu i uruchomieniu app.js . Wiesz jednak, że te zasoby znajdują się w górnej części Twojej strony i powinieneś je jak najszybciej pobrać.

Aby nadać im wyższy priorytet, możesz użyć linku rel="preload" .

Jak naprawić ostrzeżenie „Wstępne załadowanie klucza”.

Aby naprawić ostrzeżenie, zastosuj atrybut link rel=preload do zasobów krytycznych oznaczonych przez PSI.

Mówiąc najprościej, polecenie link rel=preload instruuje przeglądarki, aby pobrały znaczący zasób wcześniej, niż zwykle wykrywają.

Wstępne ładowanie jest deklaratywne, w przeciwieństwie do innych wskazówek dotyczących zasobów, takich jakpobieranie z wyprzedzeniemiwstępne łączenie, które dostarczają sugestii. Oznacza to, że przeglądarki muszą pobierać określony zasób, który uważasz za niezbędny do korzystania ze strony.

Możesz wstępnie załadować zasoby, dodając link rel=preload tag do nagłówka dokumentu HTML.

Oto przykład, jak fragment kodu wygląda dla wstępnie załadowanego logo:

Być może zauważyłeś, że oprócz wstępnego ładowania i zasobu istnieje jeszcze trzeci atrybut — jak .

Atrybut as wskazuje typ zawartości zasobu. Jeśli nie dodasz prawidłowego „ as ” podczas określania, co ma zostać wstępnie załadowane, ryzykujesz dwukrotne pobranie zasobu.

Ponadto dodanie atrybutu as pomaga przeglądarce ustawić priorytet wstępnie pobranego zasobu zgodnie z jego typem i określić, czy już istnieje w pamięci podręcznej.

Oto pełna lista as wartości, które możesz określić:

Ważne: Nowoczesne przeglądarki internetowe dobrze ustalają priorytety zasobów, więc nadmierne użycie linku rel=preload może prowadzić do negatywnych wyników. Upewnij się, że używasz go oszczędnie i tylko wtedy, gdy jest to naprawdę potrzebne.

Automatyczne wstępne ładowanie żądań klucza za pomocą NitroPack

Jeśli szukasz łatwiejszego, automatycznego sposobu wstępnego ładowania krytycznych zasobów i poprawy podstawowych wskaźników sieciowych witryny, wyniku wydajności i postrzeganej wydajności, powinieneś wypróbować NitroPack.

Jednym z głównych powodów, dla których NitroPack jest liderem w wynikach Core Web Vitals dla ponad 180 000 stron internetowych, jest nasz autorski mechanizm ładowania zasobów.

NitroPack nie polega na wbudowanych technikach przeglądarki. Zamiast tego korzysta z naszego modułu ładującego zasoby, który zmienia sposób podawania zasobów do głównego wątku i wstępnie ładuje wiele zasobów. Wykorzystuje to wielordzeniowy charakter nowoczesnego procesora, odciążając zadania od głównego wątku.

Ponadto nasza usługa automatycznie optymalizuje dostarczanie CSS w Twojej witrynie, tworząc krytyczne CSS dla każdej strony w każdym układzie. Skutkuje to lepszą postrzeganą i rzeczywistą wydajnością.

Ale najlepsze jest to, że używanie NitroPack jest wolne od ryzyka.

Jak to?

Po pierwsze, możesz przetestować NitroPack bez wydawania ani grosza, otrzymując nasz darmowy plan.

Po drugie, NitroPack pracuje na kopiach plików Twojej witryny, zapewniając 100% bezpieczeństwo oryginałów.

Po prostu:

Możesz wyprzedzić wszystkich konkurentów, mając najszybszą stronę ładowania w branży, bez kiwnięcia palcem i ryzykowania czegokolwiek.

Wydaje mi się, że to całkiem niezły interes!