Napraw Layout Shift spowodowany przez automatyczne wymiarowanie obrazu

Napraw Layout Shift spowodowany przez automatyczne wymiarowanie obrazu

Czy wiesz, że istnieje bardzo prosty i dość powszechny sposób na zniszczenie Core Web Vitals za pomocą jednej instrukcji CSS? Jest to powszechne w sieci, widziałem to wiele razy i sieje spustoszenie w CLS.

Oto on: mały fragment kodu, który automatycznie sprawi, że wszystkie obrazy na stronie będą się przesuwać. Spowoduje layout shift nawet wtedy, gdy szerokość i wysokość obrazu zostały jawnie ustawione! Ustawienie prawidłowej wartości CSS aspect-ratio również nie rozwiąże problemu!

To podstępny problem z Layout Shift, ponieważ pojawia się tylko przy pierwszych odwiedzinach. Ponieważ Ty, jako webmaster, prawdopodobnie masz obraz w pamięci podręcznej przeglądarki, możesz nie zauważyć od razu Layout Shift.

<style>
img{
   width:auto;
   height:auto;
   max-width:100%
}
<style>

Jak zauważyliśmy problem?

Trudno jest wykryć tego rodzaju problemy, które pojawiają się głównie u nowych użytkowników z urządzeniami mobilnymi o niskiej przepustowości. Odpowiedzią jest RUM Tracking. RUM Tracking śledzi Core Web Vitals dla prawdziwych użytkowników i raportuje wyniki z powrotem do Ciebie. RUM Tracking jest świetny do znajdowania ukrytych problemów z Core Web Vitals!

Jak to działa?

Ten mały fragment kodu CSS jest czasami używany do responsywnych obrazów. Gdy obraz nie jest wstępnie zapisany w pamięci podręcznej przeglądarki, przeglądarka nie ma pojęcia o wewnętrznej szerokości i wysokości. Z tym kodem zignoruje ustawioną szerokość i wysokość i spróbuje wyrenderować stronę z wewnętrzną szerokością i wysokością. Ponieważ jest to nieznane, obraz zostanie najpierw wyrenderowany w rozmiarze 0x0 pikseli i dopiero po pobraniu i zdekodowaniu obrazu zostanie ponownie wyrenderowany i zajmie odpowiednią liczbę pikseli.

1. Właściwość height: auto; zapewnia, że obraz zawsze ma prawidłową wysokość po zmianie rozmiaru. 
2. Właściwość max-width:100%; zapewnia, że obraz nigdy nie jest większy niż widoczny viewport 
3. Część width:auto; generuje layout shift dla niezbuforowanych obrazów, nawet gdy jawnie ustawisz szerokość i wysokość lub aspect ratio.

Jak to naprawić?

Naprawa jest prosta. Wystarczy usunąć width:auto. Zmusi to przeglądarkę do użycia podanej szerokości obrazu i obliczenia automatycznej wysokości na podstawie wysokości. 

Zrób sobie przysługę, poświęć 15 sekund, zbadaj losowy obraz na swojej stronie (kliknij prawym przyciskiem, zbadaj element) i sprawdź, czy jest width:auto; i height:auto; Jeśli tak, napraw to!