Znajdź obrazy blokujące pierwsze renderowanie

Zespoły wydajności i SEO używają tego, gdy pierwsze renderowanie jest wolne, a obrazy poza ekranem mogą je blokować.

Znajdź obrazy blokujące pierwsze renderowanie. Wynik pozostaje w przeglądarce i jest gotowy do sprawdzenia, skopiowania oraz dopasowania bez konta.

Jak używać

  1. Wklej HTML strony, którą chcesz poddać audytowi.
  2. Uruchom audyt, aby znaleźć obrazy obecne przy pierwszym renderowaniu.
  3. Przejrzyj obrazy, które nie powinny ładować się natychmiast.
  4. Dodaj leniwe ładowanie do obrazów znajdujących się poza początkowym widokiem.

Przykład

Specjalista SEO zauważa, że strona główna zbyt długo pokazuje główną treść. Wkleja HTML, uruchamia audyt i zauważa, że obrazy w stopce ładują się wcześnie. Te obrazy zostają przełączone na leniwe ładowanie, zanim strona zostanie ponownie przetestowana. Dba też o to, aby główny obraz pozostał priorytetem, aby pierwszy widok nie ucierpiał.

Dane wejściowe

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Ograniczenia i formaty

Gdzie odbywa się przetwarzanie

Wklejony HTML jest analizowany w Twojej przeglądarce. Nie są wykonywane żadne zewnętrzne żądania, a audytowana strona nie jest pobierana przez narzędzie. Raport pozostaje lokalny, dopóki nie opuścisz strony.

Częste pytania

Czy narzędzie odwiedza moją stronę internetową?

Nie, nie ładuje Twojej strony z adresu internetowego. Sam kopiujesz HTML do pola wejściowego. Dlatego audyt obejmuje tylko podany znacznik i nie uruchamia skryptów strony.

Które obrazy powinny być ładowane leniwie?

Skup się na obrazach niżej na stronie, które nie są potrzebne przy pierwszym widoku. Obrazy w nagłówku lub główne zdjęcie produktu często muszą ładować się natychmiast. Sprawdź wynik na prawdziwym ekranie.

Dlaczego brakuje obrazu w raporcie?

Może być dodany przez JavaScript, użyty jako tło CSS lub załadowany przez komponent zewnętrzny. Audyt widzi tylko wklejony HTML. Użyj narzędzi programistycznych przeglądarki, aby uzupełnić obraz sytuacji.

Czy leniwe ładowanie należy stosować do obrazów widocznych na pierwszym ekranie?

Nie. Leniwe ładowanie nie jest odpowiednie dla obrazów widocznych na pierwszym ekranie. Skup się na obrazach niżej na stronie, których nie potrzeba do pierwszego widoku. Po zmianie znaczników ponownie sprawdź działanie na urządzeniach mobilnych i odśwież raport. Nagłówki lub główne zdjęcie produktu często muszą ładować się od razu.

Czy raport trzeba aktualizować po zmianach w kodzie?

Tak. Raport należy odświeżyć po każdej zmianie znaczników. Audyt czyta HTML, który wkleisz, a nie odwiedza strony na żywo. Obrazy dodawane przez JavaScript lub ładowane przez CSS mogą nie zostać wykryte. Sprawdź wynik po każdej modyfikacji, aby ocenić, które obrazy nadal wymagają leniwego ładowania. Narzędzie nie wykonuje zewnętrznego żądania.

Narzędzia w tej samej kategorii