Link rel=preload: Nadaj priorytet zasobom, aby uzyskać lepszą szybkość witryny

W 2016 roku w3c wraz z Yoavem Weissem wydali nowy standard internetowy dla Chrome o nazwie link rel="preload" otwierający nowe ścieżki do szybszego ładowania.

Sześć lat później wstępne ładowanie jest techniką numer jeden w ustalaniu priorytetów zasobów, stosowaną przez czołowe witryny w celu poprawy szybkości ładowania i wygody użytkownika.

Wykres słupkowy przedstawiający przyjęcie rel="preload" w podziale według rankingu CrUX. Źródło: Web Almanach 2021

Rosnąca popularność linku rel=preload dowodzi, jak skuteczne może być. Co również sprawia, że ​​jest podatny na nadużycia.

Ze względu na swoją elastyczność wstępne ładowanie ważnych zasobów wymaga głębszej wiedzy, jeśli chcesz zrobić więcej dobrego niż złego.

Z tego artykułu dowiesz się:

• Jak działa ustalanie priorytetów zasobów
• Co to jest wstępne ładowanie łącza rel
• Jakie elementy strony internetowej można wstępnie załadować
• Kiedy powinieneś (i nie powinieneś) używać linku rel=preload
• Które wskaźniki Core Web Vitals poprawiają wstępne ładowanie
• Korzyści z link rel=preload w rzeczywistych witrynach internetowych

Zanurzmy się od razu!

Zobacz, o ile szybsza może być Twoja strona internetowa dzięki NitroPack

Wyjaśnienie priorytetyzacji zasobów

Ręczne nadawanie priorytetów zasobom to sposób na wyeliminowanie zgadywania, jakie nowoczesne przeglądarki wykonują podczas ładowania strony.

Zanim jednak zaczniesz wpływać na to, jak i kiedy ładowane są zasoby, powinniśmy omówić kilka podstaw.

Domyślnie przeglądarki będą próbowały dowiedzieć się, o które zasoby poprosić iw jakiej kolejności. Gdy przeglądarka pobiera zasób, zawsze przypisywany jest mu priorytet: najwyższy, wysoki, średni, niski lub najniższy.

Priorytety zależą od typu zasobu (np. tekst, obraz, arkusz stylów, skrypt, wideo) i umiejscowienia odniesienia do zasobu w dokumencie.

Wybierając zasoby do wstępnego załadowania, musisz pamiętać o zasobach blokujących renderowanie i nie powstrzymywać przeglądarek przed ich pobraniem. W przeciwnym razie może się okazać, że zamiast szybciej ładować stronę, wyświetli się pusta strona.

Optymalizuj krytyczne zasoby na autopilocie! Zobacz swoją witrynę z NitroPack.

Co to jest link rel=preload?

Mówiąc najprościej, link rel=preload to polecenie informujące przeglądarki, że chcesz, aby pobrały ważny zasób wcześniej, niż normalnie go wykryją.

W przeciwieństwie do innych technik ustalania priorytetów zasobów, takich jak prefetch i preconnect , wstępne ładowanie to nie tylko wskazówka, ale deklaracja. Oznacza to, że przeglądarki są zmuszone pobrać zasób, o którym wiesz, że ma kluczowe znaczenie dla działania strony.

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

< link rel ="preload" as ="script" href ="critical.js">

Nie martw się, za chwilę omówimy szczegóły.

Jakie przeglądarki obsługują link rel=preload?

Wstępne ładowanie jest obsługiwane przez wszystkie główne przeglądarki, umożliwiając właścicielom witryn i programistom oferowanie krótszych czasów ładowania i nieograniczonego doświadczenia użytkownika.

Aby uzyskać szczegółowe zestawienie obsługiwanych wersji przeglądarek, zobacz tę tabelę w sekcji „Czy mogę używać”.

Czy łącze rel=preload jest konieczne?

Wstępne ładowanie kluczowych zasobów zapewnia szczegółową kontrolę nad definiowaniem niestandardowej logiki ładowania. To, czy Twoja witryna tego potrzebuje, zależy od wyników Twoich audytów.

W celu oceny kluczowych żądań wysokiej jakości zalecamy zapoznanie się z ręcznymi testami szybkości strony internetowej i danymi z laboratorium terenowego zebranymi wewnętrznie.

Hyper-jump to: Jak sprawdzić, które zasoby należy wstępnie załadować.

Czy link rel=preload blokuje renderowanie?

Tag wstępnego ładowania może zakłócać prawidłowe renderowanie strony, jeśli jest używany w dużych ilościach do nieistotnych plików. W tym przypadku, zamiast skupiać się na ważnych zasobach blokujących renderowanie, przeglądarka jest zajęta wieloma plikami o niskim priorytecie.

Na przykład strona główna Asany zawiera 26 tagów wstępnego ładowania dla plików JavaScript o niskim znaczeniu. Powoduje to znaczne opóźnienia w renderowaniu strony, co szkodzi wygodzie użytkownika.

(Przykład strony głównej Asany) Zielona linia na wykresie kaskadowym żądań pokazuje, kiedy strona zaczyna się renderować. Źródło: artykuł DebugBear

Łącze rel=”preload” a rel=”prefetch”

Kiedy po raz pierwszy udostępniono wstępne ładowanie, wielu użytkowników było zdezorientowanych co do jego zalet w porównaniu z istniejącą już dyrektywą pobierania wstępnego.

Pobieranie z wyprzedzeniem koncentruje się na zasobie, który najprawdopodobniej stanie się niezbędny do przyszłej nawigacji (czyli po bieżącej stronie). Z drugiej strony ładowanie wstępne zajmuje się zasobem bieżącej nawigacji.

Jakie elementy strony internetowej mogę wstępnie załadować?

Jak wspomniano wcześniej, wstępne ładowanie łącza rel jest odpowiednie dla zasobów zwykle późno wykrywanych przez przeglądarkę.

Zasoby, które możesz wstępnie załadować, obejmują:

• Pliki dźwiękowe i muzyczne
• Wideo (MP4, MP3, WebM)
• Ścieżki audio WebVTT
• Pliki JavaScript
• Arkusze stylów CSS
• Czcionki internetowe (TTF, EOT, WOFF, WOFF2)
• Obrazy (AVIF, WebP, JPG i JPEG lub PNG)
• XHR i pobieraj żądania API
• Pracownicy sieci
• Osadzone multimedia i przedmiot

Dyrektywa wstępnego ładowania zawiera potężną wartość „as”. Niezbędne jest poinformowanie przeglądarek o priorytecie, jaki ma nadać wstępnie ładowanemu zasobowi, bez opóźniania ważniejszych plików lub pozostawania w tyle za mniej ważnymi.

Oto przydatna lista wartości „jako”, które możesz określić:

Yoav Weiss (członek zespołu ds. relacji z programistami Google Chrome) również zauważa:

„...preload nie blokuje zdarzenia onload okna, chyba że zasób jest również żądany przez zasób, który blokuje to zdarzenie”.

Przyjrzyjmy się najczęstszym zasobom, które właściciele witryn i programiści wybierają do wstępnego ładowania.

Jak połączyć obrazy rel=preload

W Twojej witrynie zawsze znajduje się co najmniej jedna strona z dużym obrazem w widocznym obszarze witającym odwiedzających witrynę od samego początku. Takie obrazy są idealnymi kandydatami do wstępnego załadowania.

Pamiętaj, aby wstępnie załadować zasoby, dodając tag linku z rel="preload" do nagłówka dokumentu HTML. jak tak:

W rezultacie Twój obraz ładuje się szybciej i poprawia jeden z najtrudniejszych wskaźników Core Web Vitals – LCP.

Aby jednak wstępnie załadować responsywne obrazy, należy użyć atrybutów imagesrcset i imagesizes , aby pomóc przeglądarkom wybrać odpowiedni obraz do pobrania w zależności od rozmiaru ekranu.

Zoptymalizuj wszystkie obrazy, aby uzyskać szybki czas ładowania i responsywność na autopilocie. Zobacz swoją witrynę z NitroPack.

Jak połączyć rel = wstępne ładowanie czcionek internetowych

Czcionki zdefiniowane za pomocą reguł @font-face w plikach CSS nie są pobierane, dopóki przeglądarki nie pobiorą i nie przeanalizują plików CSS. Właśnie dlatego czcionki internetowe są drugim najpopularniejszym zasobem, który czołowe strony internetowe wybierają do wstępnego ładowania.

Oto przykładowy fragment:

Jak połączyć pliki rel=preload JavaScript

Aby poprawić wskaźniki responsywności, takie jak Time to Interactive, zalecamy podzielenie dużych pakietów JavaScript i wstępne ładowanie tylko krytycznych fragmentów.

W ten sposób przeglądarki mogą oddzielić pobieranie od wykonania i wykryć ten konkretny zasób wcześniej przed pobraniem całego pakietu JS.

Poszło by to mniej więcej tak:

< link rel ="preload" as ="script" href ="late_discovered.js">

Kiedy należy używać wstępnego ładowania link rel?

To jest przypadek „to zależy”.

Ogólną zasadą jest wstępne ładowanie tylko późno odkrytych zasobów, o których wiesz, że są niezbędne do pierwszych interakcji, gdy użytkownik trafia na stronę.

Jak sprawdzić, które zasoby wstępnie załadować?

Jak wspomnieliśmy wcześniej, najlepszym sposobem określenia, które zasoby należy wstępnie załadować, jest sprawdzenie sposobu ładowania stron internetowych.

Na szczęście możesz identyfikować zasoby do wstępnego załadowania, korzystając z opcji Request Waterfall Charts w Chrome DevTools.

Krok 1: Odwiedź stronę internetową, na której ląduje większość odwiedzających, i „zbadaj” ją

Krok 2: Przejdź do zakładki „Sieć” i odśwież stronę, aby wygenerować wykres wodospadu

Krok 3: Kliknij prawym przyciskiem myszy sekcję „Nazwa”, aby włączyć kolumnę „Priorytet”.

Krok 4: Sprawdź, w jaki sposób załadowano zasoby i jaki priorytet im przypisano, aby wskazać zasoby, które można wstępnie załadować

Ponadto Twój raport Lighthouse zawiera sekcję „Możliwości”, w której zaznaczono późno odkryte zasoby w łańcuchu żądań krytycznych jako kandydatów do wstępnego załadowania:

Skąd mam wiedzieć, czy ładowanie wstępne działa prawidłowo?

Po zidentyfikowaniu kandydatów do wstępnego załadowania możesz rozpocząć testowanie, czy link rel=preload spełnia swoje zadanie.

Zrób to, korzystając z tego samego wykresu kaskadowego żądania w DevTools. Jeśli prawidłowo wybrałeś zasób do wstępnego ładowania i ustawiłeś prawidłowe atrybuty, jak pokazano wcześniej, powinieneś zauważyć poprawę czasu wczytywania strony.

Oto przykład przed i po:

(Przed wstępnym załadowaniem): plik czcionki „Pacifico-Bold.woff2” jest pobierany dopiero po arkuszu stylów „main.css”. (Po wstępnym załadowaniu pliku czcionki): pobieranie czcionki odbywa się równolegle z arkuszem stylów.

Jak nie nadużywać linku rel=preload

Biorąc pod uwagę imponujące wyniki, które może pokazać kilka odpowiednich tagów ładowania wstępnego, łatwo dać się ponieść emocjom.

Jednak ze względu na charakter wstępnego ładowania może wystąpić szereg problemów z wydajnością.

• Niepożądana ingerencja w zwykłe zachowanie przeglądarki
• Nadmierne wykorzystanie zasobów (tj. szybsze niż zwykle zużywanie przepustowości)
• Szkodliwy wpływ na krytyczną ścieżkę renderowania, uniemożliwiający przeglądarkom właściwe działanie

Błąd nr 1: wstępne ładowanie zbyt wielu zasobów

Nie ma dokładnej liczby, do której powinieneś dążyć, ale bądź bardzo uważny przy wyborze zasobów do wstępnego załadowania. Pamiętaj, że powinieneś kierować reklamy na późno odkryte zasoby, które mają kluczowe znaczenie dla pierwszej interakcji ze stroną internetową.

Błąd nr 2: wstępne ładowanie nieużywanej zawartości

Często zdarza się, że we wspólnym nagłówku znajdujemy link rel=preload, mimo że wstępnie załadowany zasób znajduje się tylko na jednej stronie internetowej (np. stronie docelowej).

Komunikat ostrzegawczy dotyczący wstępnego ładowania nieużywanej zawartości

Może to być zwykły błąd lub niewystarczające kodowanie. W takim przypadku podział ogólnych pakietów na mniejsze ukierunkowane na określone szablony jest znacznie lepszym podejściem.

Błąd nr 3: Wstępne ładowanie nieistotnych zasobów

Wstępne ładowanie dowolnego zasobu nie zapewni pożądanego przyspieszenia. Zasoby, które nie są krytyczne dla renderowania i interaktywności części widocznej na ekranie, powinny mieć niższy priorytet.

Zamiast tego staraj się znaleźć elementy, które przeglądarki wykryją później, niż chcesz.

Błąd nr 4: Wstępne ładowanie nieistniejącej treści

Zdarza się to rzadko, ale kiedy tak się dzieje, wynikiem jest strona 404. Jest to niedopuszczalne podczas wstępnego ładowania i zawsze należy dokładnie sprawdzić, czy zasób jest rzeczywiście ważny.

Które wskaźniki Core Web Vital poprawia rel=preload?

Do tej pory widzieliśmy niezaprzeczalny dowód na moc optymalizacji prędkości wstępnego ładowania. Przyspiesza czas ładowania, poprawia wskaźniki wydajności i responsywność oraz pomaga zrobić doskonałe pierwsze wrażenie.

Oto wskaźniki, które wykazują największą poprawę po poprawnym wstępnym załadowaniu:

• Największe malowanie zawartości (LCP) : duże zasoby widoczne na ekranie (takie jak obrazy bohaterów i duże fragmenty tekstu) są świetnymi kandydatami do LCP. Szybsze ich dostarczanie może pomóc w poprawie wskaźników Core Web Vitals, z którymi strony internetowe borykają się najbardziej.
• Cumulative Layout Shift (CLS) : wstępne ładowanie czcionek internetowych wykazuje znaczną poprawę w zmianach układu związanych z czcionkami, takich jak Flash of Unstyled Text (FOUT) i Flash of Invisible Text (FOIT).
• Opóźnienie pierwszego wejścia (FID) i interakcja z następnym malowaniem (INP) : wstępne ładowanie JavaScript, które napędza ważne interakcje, pomaga osiągnąć lepszy poziom reakcji zgodnie z intencjami użytkownika.

Link rel=preload korzyści w popularnych witrynach internetowych

W 2017 roku zespół Chrome Data Saver (obecnie wygasły) zastosował wstępne ładowanie skryptów i arkuszy stylów CSS i zauważył średnio 12% czasu na ulepszenia pierwszego malowania treści na dotkniętych stronach.

Inne historie sukcesu ulepszonych wskaźników ładowania z linkiem rel=preload obejmują:

1. Shopify z 50% (1,2 sekundy) poprawą czasu do następnego malowania na pulpicie Chrome podczas wstępnego ładowania czcionek internetowych, co całkowicie usunęło Flash of Invisible Text;
2. Flipkart wyciął znaczną część bezczynności głównego wątku, wstępnie ładując swoje pakiety kluczy;
3. Koncepcja z 10% poprawą wskaźników renderowania strony dzięki wstępnemu ładowaniu 9 podstawowych wywołań API;
4. Financial Times skrócił o 1 sekundę czas potrzebny do wyświetlenia obrazu nagłówka, używając nagłówka wstępnego ładowania linku.

Shopify ze wstępnym ładowaniem (po lewej) i bez wstępnego ładowania (po prawej). Źródło: artykuł Addy Osmani

Dołącz do 31% najszybszych stron internetowych! Zobacz wpływ NitroPack z pierwszej ręki.

Streszczenie

Link rel=preload to skuteczna technika ustalania priorytetów zasobów, która przyspiesza działanie witryny i zapewnia lepsze wrażenia użytkownika przy pierwszym kontakcie.

Korzystaj z tej dyrektywy oszczędnie i tylko w przypadku późno odkrytych zasobów, które mają kluczowe znaczenie dla środowiska widocznego na ekranie. Pamiętaj, aby najpierw przeanalizować, w jaki sposób przeglądarki pobierają i analizują Twoje zasoby za pomocą Chrome DevTools i Lighthouse.

Właściwe wdrożenie rel=”preload” poprawi responsywność witryny i wskaźniki wydajności, które są kluczowe dla sukcesu Twojej firmy online.