Wstępnie załadowany obraz LCP
Silktide sprawdza, czy główny obraz na Twojej stronie — największy element widoczny dla odwiedzających podczas ładowania — mógłby pojawić się wcześniej, gdyby przeglądarka otrzymała polecenie pobrania go wcześniej. Strony sprawiają wrażenie załadowanych, gdy pojawia się ich największa zawartość, dlatego ten jeden obraz często decyduje o tym, jak szybko wydaje się ładować cała strona.
Moment pojawienia się tego obrazu jest mierzony za pomocą Largest Contentful Paint (LCP), jednego z Google.
Dlaczego to jest ważne
Przeglądarki pobierają pliki mniej więcej w kolejności, w której je wykrywają, a główny obraz jest często wykrywany późno — ukryty za arkuszami stylów i skryptami, wskazany w lub wstawiony przez skrypt. Rezultatem jest strona, która szybko buduje swoją strukturę, a następnie pozostawia pustą przestrzeń tam, gdzie powinna znajdować się najważniejsza treść.
Ponieważ odwiedzający oceniają szybkość na podstawie tego, kiedy pojawia się główna treść, a Google uwzględnia LCP w rankingu wyszukiwania, poinformowanie przeglądarki, aby nadała priorytet temu jednemu plikowi, jest jedną z najbardziej wartościowych dostępnych optymalizacji szybkości.
Jak to naprawić
- Wstępnie załaduj obraz, aby przeglądarka pobrała go od samego początku ładowania:
<!-- W <head>: pobierz obraz główny natychmiast -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">
- Alternatywnie, jeśli obraz jest zwykłym elementem
<img>, dodaj do niego bezpośredniofetchpriority="high". - Nigdy nie stosuj dla tego obrazu —
loading="lazy"na głównym obrazie opóźnia dokładnie to, co powinno pojawić się jako pierwsze. - Dla głównej grafiki preferuj zwykły element
<img>zamiast obrazu tła CSS, aby przeglądarka mogła wykryć go wcześnie samodzielnie.
Jak Silktide to testuje
- Załaduj stronę w prawdziwej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
- Zidentyfikuj największy element treści widoczny podczas ładowania strony. Jeśli jest to obraz, sprawdź, kiedy przeglądarka go wykryła i pobrała.
- Jeśli wcześniejsze pobranie obrazu sprawiłoby, że pojawiłby się szybciej, zgłoś go wraz z szacowaną oszczędnością czasu.
Rozwiązywanie problemów
Główny obraz zmienia się między stronami lub urządzeniami
Wskazówki dotyczące wstępnego ładowania są przypisane do poszczególnych stron, a „największy” element może różnić się między układami komputerowymi i mobilnymi. Logika szablonu może generować właściwe wstępne ładowanie dla każdej strony, a atrybuty media i imagesrcset wskazówki obsługują responsywne warianty.
Wstępnie załadowałem obraz, ale problem nadal występuje
Adres URL wstępnego ładowania musi dokładnie odpowiadać temu, co strona ostatecznie renderuje — inny wariant rozmiaru lub adres URL przepisany przez nie zostanie uwzględniony. Sprawdź również, czy wskazówka znajduje się bezpośrednio w sekcji head strony, a nie jest dodawana później przez skrypt, co niweczy jej cel.