Jawnie określone rozmiary obrazów

Silktide sprawdza, czy obrazy na Twojej stronie mają określony rozmiar, aby przeglądarka mogła zarezerwować odpowiednią ilość miejsca dla każdego z nich przed ich pobraniem. Obrazy bez określonego rozmiaru powodują przeskakiwanie elementów strony podczas ich ładowania.

<!-- Problem: brak rozmiaru, przeglądarka nie rezerwuje miejsca -->
<img src="hero.jpg" alt="Wiosenna kolekcja">

<!-- Naprawiono: przeglądarka od razu rezerwuje miejsce 1200x600 -->
<img src="hero.jpg" alt="Wiosenna kolekcja" width="1200" height="600">

Dlaczego to jest ważne

Dopóki plik obrazu nie zostanie pobrany, przeglądarka nie może wiedzieć, jak duży będzie obraz, chyba że strona to określi. Bez tej informacji renderuje stronę bez wolnego miejsca, a następnie przesuwa wszystko w dół po załadowaniu każdego obrazu — tekst przeskakuje w środku zdania, a odwiedzający klikają niewłaściwe elementy, ponieważ cele przesuwają się w ostatniej chwili.

To przeskakiwanie jest mierzone jako przesunięcie układu, będące częścią Google, które wpływają również na pozycję w wynikach wyszukiwania. Obrazy bez określonego rozmiaru są najczęstszą pojedynczą przyczyną tego zjawiska.

Jak to naprawić

Dodaj atrybuty width i height do każdego obrazu i filmu, tak aby odpowiadały rzeczywistym proporcjom pliku. Przeglądarka używa ich do zarezerwowania miejsca we właściwych proporcjach, nawet gdy responsywnie skaluje obraz.
W przypadku obrazów responsywnych zachowaj atrybuty i pozwól CSS, na przykład max-width: 100%; height: auto;, wykonać skalowanie — zarezerwowane miejsce będzie skalowane razem z obrazem.
Jeśli nie możesz dodać atrybutów, zarezerwuj miejsce w CSS za pomocą właściwości aspect-ratio na obrazie lub jego kontenerze.
Sprawdź swój : większość systemów automatycznie wstawia wymiary, gdy obrazy są dodawane za pomocą edytora, więc brakujące rozmiary często pochodzą z ręcznie pisanego , szablonów lub osadzonej zawartości.

Jak Silktide to testuje

Ładuje stronę w prawdziwej przeglądarce, używając typu urządzenia, szybkości połączenia i lokalizacji testowej skonfigurowanych dla testów szybkości.
Znajduje każdy obraz renderowany bez jawnie określonego rozmiaru — bez użytecznych atrybutów szerokości/wysokości i bez CSS ustalającego jego wymiary.
Raportuje każdy obraz bez określonego rozmiaru wraz z jego lokalizacją na stronie.

Rozwiązywanie problemów

Strona wygląda dobrze, gdy ją ładuję

Przy obrazach zapisanych w pamięci podręcznej lub szybkim połączeniu obrazy mogą pojawiać się tak szybko, że nic widocznie nie przeskakuje. Odwiedzający korzystający z wolniejszych sieci widzą, jak ta sama strona składa się kawałek po kawałku. Zarezerwowane miejsce nic nie kosztuje, gdy obraz ładuje się szybko, a zapobiega przeskakiwaniu, gdy tak nie jest.

Czy stałe rozmiary nie zepsują responsywnego projektu?

Nie. Współczesne przeglądarki traktują atrybuty width i height jako proporcje obrazu, a nie stały rozmiar, więc CSS nadal może skalować obraz, aby dopasować go do każdego ekranu. Atrybuty i CSS dla działają razem.