Łączna zmiana układu (CLS)

Co to jest Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) to metryka Core Web Vitals opracowana przez Google w celu pomiaru stabilności wizualnej strony internetowej. Określa ona sumę wszystkich nieoczekiwanych zmian układu, które wystąpiły podczas całego okresu istnienia strony. Przesunięcia układu mają miejsce, gdy widoczny element zmienia swoją pozycję z jednej renderowanej ramki do następnej.

Jak mierzony jest CLS

Wyniki CLS wahają się od 0, co oznacza brak przesunięcia, do wartości powyżej 0 wskazujących na różne stopnie niestabilności. Wzór uwzględnia ułamek wpływu i ułamek odległości każdego przesunięcia, obliczając, jak bardzo elementy się poruszają i jak dużą część rzutni obejmują.

Interpretacja wyników CLS

• Dobry: 0 - 0,1
• Wymaga poprawy: 0.1 - 0.25
• Słaby: Powyżej 0,25

Dlaczego CLS jest ważny?

CLS ma kluczowe znaczenie dla doświadczenia użytkownika, ponieważ nieoczekiwane zmiany układu mogą prowadzić do frustracji użytkownika. Na przykład, jeśli użytkownik ma zamiar kliknąć przycisk, a układ zmienia się, powodując niezamierzone kliknięcie czegoś innego, może to spowodować słabe wrażenia użytkownika i potencjalną utratę konwersji.

Najczęstsze przyczyny słabego CLS

1. Obrazy bez wymiarów:

   • Dołączanie obrazów do kodu HTML bez określenia ich szerokości i wysokości może powodować zmiany układu, ponieważ przeglądarka nie wie, ile miejsca początkowo przydzielić.

2. Reklamy, elementy osadzone i ramki Iframe bez wymiarów:

   • Elementy te mogą ładować się dynamicznie i powodować przesunięcia układu, jeśli ich wymiary nie zostaną określone z wyprzedzeniem.

3. Dynamicznie wstrzykiwana zawartość:

   • Dodanie zawartości powyżej istniejącej zawartości w DOM może zepchnąć elementy w dół, powodując przesunięcia.

4. Czcionki internetowe powodujące FOIT/FOUT:

   • Flash of Invisible Text (FOIT) i Flash of Unstyled Text (FOUT) mogą powodować zmiany układu, gdy przeglądarka ładuje czcionki internetowe.

Najlepsze praktyki w celu zminimalizowania CLS

1. Dołącz atrybuty rozmiaru do obrazów i filmów:

   • Zawsze definiuj szerokość i wysokość obrazów i filmów w HTML, aby zarezerwować miejsce w układzie przed ich załadowaniem.

2. Zarezerwuj miejsce na reklamy i wpisy:

   • Użyj CSS, aby ustawić wymiary slotów reklamowych, ramek iframe i elementów osadzonych, aby uniknąć zmian układu podczas ich ładowania.

3. Unikaj dynamicznego wstrzykiwania treści ponad istniejącą zawartość:

   • Dodawaj nowe treści poniżej zakładki lub w kontenerach, które mają już zarezerwowane miejsce.

4. Używaj strategii ładowania czcionek:

   • Wykorzystaj właściwość CSS font-display, aby kontrolować sposób wyświetlania czcionek internetowych i zminimalizować przesunięcia spowodowane przez FOIT/FOUT.

5. Użyj CSS Transform dla animacji:

   • Użyj właściwości transform zamiast top, bottom, left lub right, aby animować elementy bez powodowania przesunięć układu.

Wnioski

Cumulative Layout Shift (CLS) jest istotnym wskaźnikiem zapewniającym stabilne i atrakcyjne wizualnie wrażenia użytkownika. Zrozumienie czynników, które przyczyniają się do zmian układu i wdrożenie najlepszych praktyk w celu ich zminimalizowania, może poprawić wynik CLS strony internetowej i zwiększyć ogólną satysfakcję użytkownika.

Aby uzyskać więcej informacji na temat ulepszania CLS i innych Core Web Vitals, warto zapoznać się z dokumentacją Google Web Vitals.