Złóż przydatne znaczniki link rel preload

Zespoły webowe używają tego, gdy kluczowy zasób wymaga pierwszeństwa, ale wstępne ładowanie wszystkiego marnowałoby transfer.

Złóż przydatne znaczniki link rel preload. Wynik pozostaje w przeglądarce i jest gotowy do sprawdzenia, skopiowania oraz dopasowania bez konta.

Jak używać

  1. Wypisz jeden zasób w wierszu, na przykład plik czcionki lub kluczowy obraz.
  2. Użyj dokładnych ścieżek, których żąda Twoja strona.
  3. Uruchom generator, aby utworzyć znaczniki link rel preload.
  4. Wstaw te znaczniki w sekcji head przed innymi zasobami o wysokim priorytecie.

Przykład

Zespół zauważa, że czcionka tytułu pojawia się późno i przesuwa układ. Wypisuje plik czcionki używany przez stronę, generuje znaczniki preload i umieszcza je w sekcji head. Pomaga to uniknąć wstępnego ładowania każdego zasobu w witrynie. Test na wolnej sieci pokazuje następnie, czy priorytet czcionki jest przydatny.

Dane wejściowe

/assets/font.woff2
/assets/hero.webp

Ograniczenia i formaty

Gdzie odbywa się przetwarzanie

Wprowadzone ścieżki są zamieniane na znaczniki w Twojej przeglądarce. Żaden plik nie jest wysyłany na zewnątrz, a narzędzie nie wywołuje połączeń sieciowych. Wygenerowany kod pozostaje dostępny do skopiowania.

Częste pytania

Które zasoby powinienem wstępnie załadować?

Zarezerwuj wstępne ładowanie dla plików potrzebnych przy pierwszym renderowaniu, takich jak czcionka nagłówka lub obraz główny. Wstępne ładowanie zbyt wielu elementów osłabia sygnał priorytetu. Sprawdź za pomocą narzędzi przeglądarki, czy zmiana pomaga.

Czym różni się to od leniwego ładowania?

Wstępne ładowanie prosi przeglądarkę o wcześniejsze pobranie zasobu. Leniwe ładowanie opóźnia zasoby, które nie są jeszcze potrzebne. Rozwiązują przeciwne problemy i powinny być stosowane do różnych zasobów.

Czy mogę wstępnie załadować czcionkę zewnętrzną?

Możesz wprowadzić ścieżkę względną lub bezwzględną, w zależności od konfiguracji. Upewnij się, że odpowiada plikowi, który Twoja strona faktycznie udostępnia. Zasady dotyczące różnych źródeł i bezpieczeństwo mogą nadal wpływać na to, jak przeglądarka go wykorzysta.

Co się stanie, jeśli podam błędną ścieżkę zasobu?

Błędna ścieżka uniemożliwi przeglądarce znalezienie pliku. Wpisuj dokładne ścieżki, których żąda Twoja strona. Narzędzie zamienia je na znaczniki w przeglądarce, nie wysyła plików i nie wywołuje połączeń sieciowych. Sprawdź wygenerowany kod przed wstawieniem go do sekcji head. Preload działa tylko wtedy, gdy adres jest poprawny.

Czy zbyt wiele tagów preload może zaszkodzić?

Tak. Zbyt wiele tagów może opóźnić inne przydatne elementy. Preloading jest przydatny tylko dla kilku naprawdę krytycznych zasobów. Przeglądarki mogą zignorować preload, który jest niepotrzebny lub nieprawidłowy. Narzędzie nie sprawdza, czy zasób jest już w pamięci podręcznej, więc testuj efekt w przeglądarce. Dodawaj tagi oszczędnie i sprawdzaj priorytet ładowania.

Narzędzia w tej samej kategorii