Optymalizuj skumulowane przesunięcie układu

Dowiedz się, jak uniknąć nagłych zmian układu, aby poprawić wrażenia użytkowników

Skumulowane przesunięcie układu (CLS) to jeden z 3 podstawowych wskaźników internetowych. Miara ta mierzy niestabilność treści przez połączenie przesunięcia widocznych treści w widocznym obszarze z odległością, o jaką przesunęły się elementy.

Przesunięcia układu mogą rozpraszać użytkowników. Wyobraź sobie, że zaczynasz czytać artykuł, a nagle elementy na stronie przesuwają się, co dezorientuje i zmusza do ponownego znalezienia miejsca, w którym się zatrzymałeś. Jest to bardzo częste w internecie, np. podczas czytania wiadomości lub próby kliknięcia przycisków „Szukaj” lub „Dodaj do koszyka”. Takie wrażenia są nieprzyjemne i drażniące. Często są one spowodowane wymuszeniem zmiany położenia widocznych elementów, ponieważ nagle dodano inny element lub zmieniono jego rozmiar.

Aby zapewnić użytkownikom wygodę, witryny powinny mieć wynik CLS równy 0,1 lub mniejszy w przypadku co najmniej 75% wizytacji strony.

W przeciwieństwie do innych podstawowych wskaźników internetowych, które są wartościami zależnymi od czasu i mierzonymi w sekundach lub milisekundach, wynik CLS to wartość bezwymiarowa obliczana na podstawie tego, jak dużo i jak daleko przesuwa się zawartość.

W tym przewodniku omówimy optymalizację typowych przyczyn zmian układu.

Najczęstsze przyczyny niskiego CLS:

• obrazy bez wymiarów,
• reklamy, elementy do wklejania i elementy iframe bez wymiarów;
• dynamicznie wstrzykiwane treści, takie jak reklamy, wstawione elementy i ramki iframe bez wymiarów;
• czcionki internetowe.

Przyczyny zmian układu

Zanim zaczniesz szukać rozwiązań typowych problemów z wskaźnikiem CLS, musisz poznać jego wynik i sprawdzić, skąd pochodzą zmiany.

CLS w narzędziach laboratoryjnych a w warunkach rzeczywistych

Często słyszymy, że zdaniem deweloperów wskaźnik CLS mierzony za pomocą raportu UX Chrome (CrUX) jest nieprawidłowy, ponieważ nie pasuje do CLS mierzonego za pomocą narzędzi deweloperskich w Chrome lub innych narzędzi laboratoryjnych. Narzędzia do testowania wydajności stron internetowych, takie jak Lighthouse, mogą nie pokazywać pełnej wartości CLS strony, ponieważ zwykle ładują ją w prosty sposób, aby mierzyć niektóre dane o wydajności strony i podawać wskazówki (chociaż przepływy użytkownika Lighthouse umożliwiają pomiar wykraczający poza domyślny audyt wczytywania strony).

CrUX to oficjalny zbiór danych programu Web Vitals, w którym CLS jest mierzony przez cały okres istnienia strony, a nie tylko podczas jej wczytywania, co jest typowe dla narzędzi laboratoryjnych.

Przesunięcia układu są bardzo częste podczas wczytywania strony, ponieważ pobierane są wszystkie niezbędne zasoby do wstępnego renderowania strony, ale mogą też występować po początkowym wczytaniu. Wiele przesunięć po zakończeniu wczytywania może wystąpić w wyniku interakcji użytkownika, dlatego zostaną one wykluczone z wyniku CLS, ponieważ są to oczekiwane przesunięcia (o ile nastąpią w ciągu 500 ms od tej interakcji).

Mogą jednak występować inne zmiany po załadowaniu, które są nieoczekiwane dla użytkownika, gdy nie ma odpowiedniej interakcji – na przykład, gdy przewiniesz dalej na stronie i załadowane zostaną treści wczytywane zwłoką, co spowoduje zmiany. Inne częste przyczyny wartości CLS po załadowaniu to interakcje związane z przechodzeniem, np. w przypadku aplikacji typu Single Page, które trwają dłużej niż 500 ms. okresu przejściowego.

Narzędzia PageSpeed Insights wyświetla zarówno CLS postrzegany przez użytkownika z adresu URL w sekcji „Dowiedz się, jakie są wrażenia użytkowników”, jak i CLS z testów laboratoryjnych w sekcji „Diagnoza problemów z wydajnością”. Różnice między tymi wartościami są prawdopodobnie wynikiem CLS po załadowaniu.

Identyfikowanie problemów z wartością CLS

Jeśli wyniki CrUX i CLS w narzędzie PageSpeed Insights są do siebie zbliżone, zwykle oznacza to, że Lighthouse wykryło problem z ładowaniem CLS. W tym przypadku Lighthouse pomoże Ci przeprowadzić 2 audyty, aby uzyskać więcej informacji o obrazach powodujących CLS z powodu braku szerokości i wysokości, a także aby wyszczególnić wszystkie elementy, które przesunęły się podczas wczytywania strony, wraz z ich wpływem na CLS. Możesz wyświetlić te audyty, filtrując według audytów CLS:

W panelu Wydajność w Narzędziach deweloperskich zmiany układu są również wyróżnione w sekcji Doświadczenie. Widok Podsumowanie rekordu Layout Shift zawiera skumulowaną ocenę przesunięcia układu oraz nakładkę w postaci prostokąta pokazującą obszary, na które wpływa. Jest to szczególnie przydatne, jeśli chcesz uzyskać więcej informacji o problemach z CLS podczas wczytywania, ponieważ można je łatwo odtworzyć za pomocą profilu wydajności przy ponownym wczytaniu.

Identyfikowanie problemów z CLS po załadowaniu

Różnice między wynikami CLS w CrUX i Lighthouse często wskazują na CLS po załadowaniu. Bez danych z pola trudno jest wykryć te zmiany. Informacje o zbieraniu danych w polu znajdziesz w artykule Pomiar elementów CLS w polu.

Rozszerzenie Web Vitals do Chrome umożliwia monitorowanie CLS podczas interakcji z stroną, na wyświetlaczu Heads-Up lub w konsoli, gdzie możesz uzyskać więcej informacji o przesuwanych elementach.

Zamiast korzystać z rozszerzenia, możesz przeglądać stronę internetową, jednocześnie nagrywając zmiany układu za pomocą Performance Observer w konsoli.

Po skonfigurowaniu monitorowania zmian możesz spróbować odtworzyć wszelkie problemy z wartością CLS po załadowaniu. CLS często występuje, gdy użytkownik przewija stronę, a zawartość wczytywana z opóźnieniem wczytuje się całkowicie bez rezerwacji miejsca. Przesuwanie treści, gdy użytkownik najedzie na nie kursorem, to kolejna częsta przyczyna CLS po załadowaniu. Każde przesunięcie treści podczas którejkolwiek z tych interakcji jest uznawane za nieoczekiwane, nawet jeśli nastąpiło w ciągu 500 milisekund.

Więcej informacji znajdziesz w artykule Debugowanie zmian układu.

Po zidentyfikowaniu typowych przyczyn CLS możesz użyć trybu przepływu danych w Lighthouse, aby upewnić się, że typowe przepływy danych nie pogarszają się z powodu zmian układu.

Pomiar elementów CLS w warunkach rzeczywistych

Monitorowanie CLS w polu może być nieocenione w określaniu okoliczności, w jakich występuje CLS, i ograniczaniu możliwych przyczyn. Podobnie jak większość narzędzi laboratoryjnych, narzędzia terenowe mierzą tylko elementy, które uległy zmianie, ale zwykle dostarczają wystarczającej ilości informacji do zidentyfikowania przyczyny. Aby określić, które problemy należy rozwiązać w pierwszej kolejności, możesz też używać pomiarów pola CLS.

Biblioteka web-vitals zawiera funkcje atrybucji, które umożliwiają zbieranie tych dodatkowych informacji. Więcej informacji znajdziesz w artykule Debugowanie skuteczności w warunkach rzeczywistych. Inni dostawcy RUM również zaczęli gromadzić i prezentować te dane w podobny sposób.

Najczęstsze przyczyny CLS

Gdy już zidentyfikujesz przyczyny CLS, możesz zacząć rozwiązywać problemy. W tej sekcji pokażemy, jakie są najczęstsze przyczyny CLS i jak można ich uniknąć.

Obrazy bez wymiarów

W obrazach i elementach wideo zawsze podawaj atrybuty rozmiarów width i height. Możesz też zarezerwować wymaganą przestrzeń za pomocą CSS aspect-ratio lub podobnej metody. Dzięki temu przeglądarka może przydzielić odpowiednią ilość miejsca w dokumencie podczas wczytywania obrazu.

Historia atrybutów width i height w obrazach

Na początku istnienia internetu deweloperzy dodawali atrybuty width i height do tagów <img>, aby zapewnić wystarczającą ilość miejsca na stronie przed pobraniem obrazów przez przeglądarkę. Pozwoli to zminimalizować ponowne przepływy i przeformatowania.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

W tym przykładzie wartości width i height nie zawierają jednostek. Te wymiary w pikselach sprawiłyby, że przeglądarka zarezerwowałaby w układzie strony obszar 640 x 360. Obraz zostanie rozciągnięty, aby wypełnić tę przestrzeń, niezależnie od tego, czy jego rzeczywiste wymiary są zgodne z wymaganiami.

Po wprowadzeniu elastycznego projektowania witryn deweloperzy zaczęli pomijać elementy width i height oraz używać CSS do zmiany rozmiaru obrazów:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Ponieważ jednak rozmiar obrazu nie jest określony, nie można przydzielić mu miejsca, dopóki przeglądarka nie zacznie go pobierać i nie określi jego wymiarów. Podczas wczytywania obrazów tekst przesuwa się w dół strony, aby zrobić dla nich miejsce. Może to być mylące i frustrujące dla użytkowników.

Właśnie tutaj do akcji wkraczają proporcje. Format obrazu to stosunek jego szerokości do wysokości. Zwykle jest to wyrażane jako 2 liczby rozdzielone dwukropkiem (np. 16:9 lub 4:3). W przypadku współczynnika proporcji x:y obraz ma x jednostek szerokości i y jednostek wysokości.

Oznacza to, że jeśli znamy jeden z wymiarów, możemy określić drugi. Współczynnik proporcji 16:9:

• Jeśli plik puppy.jpg ma wysokość 360 pikseli, jego szerokość wynosi 360 x (16 / 9) = 640 pikseli.
• Jeśli plik puppy.jpg ma szerokość 640 pikseli, jego wysokość to 640 x (9 / 16) = 360 pikseli.

Znajomość współczynnika proporcji obrazu umożliwia przeglądarce obliczenie i zarezerwowanie wystarczającej ilości miejsca na wysokość i powiązany obszar.

Nowoczesne sprawdzone metody ustawiania wymiarów obrazów

Nowoczesne przeglądarki ustawiają domyślne proporcje obrazów na podstawie atrybutów width i height obrazu. Możesz zapobiec zmianom układu, ustawiając te atrybuty w obrazie i uwzględniając kod CSS w arkuszu stylów.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Wszystkie przeglądarki dodadzą domyślny format obrazu na podstawie istniejących atrybutów width i height elementu.

Oblicza współczynnik proporcji na podstawie atrybutów width i height, zanim obraz zostanie załadowany. Udostępnia te informacje na samym początku obliczania układu. Gdy tylko obraz ma określoną szerokość (np. width: 100%), współczynnik proporcji jest używany do obliczenia wysokości.

Wartość aspect-ratio jest obliczana przez główne przeglądarki podczas przetwarzania kodu HTML, a nie za pomocą domyślnego arkusza stylów klienta użytkownika (więcej informacji na ten temat znajdziesz w tym poście), więc wyświetla się nieco inaczej. Na przykład w Chrome w sekcji Styl w panelu Elementy wygląda to tak:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari działa podobnie, używając źródła stylów Atrybuty HTML. Firefox nie wyświetla w ogóle obliczonej wartości aspect-ratio w panelu Inspekcja, ale używa jej do układu.

Część auto w powyższym kodzie jest ważna, ponieważ powoduje, że po pobraniu obrazu wymiary obrazu zastąpią domyślny format obrazu. Jeśli wymiary obrazu są inne, nadal powoduje to przesunięcie układu po załadowaniu obrazu, ale zapewnia, że współczynnik proporcji obrazu jest nadal używany, gdy stanie się dostępny, na wypadek, gdyby kod HTML był nieprawidłowy. Nawet jeśli rzeczywisty format obrazu różni się od domyślnego, nadal powoduje on mniejsze przesunięcie układu niż domyślny rozmiar 0x0 obrazu bez podanych wymiarów.

Aby dowiedzieć się więcej o sposobach korzystania z obrazów elastycznych, zapoznaj się z artykułem Ładowanie strony bez opóźnień z użyciem współczynników proporcji multimediów.

Jeśli obraz znajduje się w kontenerze, możesz użyć CSS, aby zmienić jego rozmiar do szerokości kontenera. Ustawiamy height: auto;, aby uniknąć stosowania stałej wartości dla wysokości obrazu.

img {
  height: auto;
  width: 100%;
}

A co z obrazami elastycznymi?

Gdy pracujesz z elastycznymi obrazami, srcset określa obrazy, które przeglądarka może wybrać, oraz ich rozmiary. Aby można było ustawić atrybuty szerokości i wysokości <img>, każdy obraz powinien mieć ten sam format obrazu.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Format obrazu może się też zmieniać w zależności od kierunku artystycznego. Możesz na przykład umieścić przycięty obraz w wąskim widoku i wyświetlić pełny obraz na komputerze:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox i Safari obsługują teraz ustawienia width i height w elementach <source> w danym elemencie <picture>:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

reklamy, treści dołączane i inne treści wczytywane z opóźnieniem;

Obrazy to nie jedyny typ treści, który może powodować przesunięcia układu. Reklamy, elementy osadzone, ramki iframe i inne treści wstawiane dynamicznie mogą powodować przesuwanie się treści pojawiających się po nich w dół, co zwiększa CLS.

Reklamy są jednym z głównych czynników powodujących przesunięcia układu w internecie. Sieci reklamowe i wydawcy często obsługują dynamiczne rozmiary reklam. Rozmiary reklam zwiększają skuteczność/przychody dzięki wyższym współczynnikom klikalności i większej liczbie reklam biorących udział w aukcji. Może to niestety powodować nieoptymalne wrażenia użytkowników, ponieważ reklamy przesuwają widoczne treści, które właśnie oglądasz, w dół strony.

Umożliwiają one umieszczanie na stronie przenośnych treści internetowych, takich jak filmy z YouTube, mapy z Map Google i posty w mediach społecznościowych. Jednak przed załadowaniem tych widżetów często nie wiadomo, jak duże są ich treści. W efekcie platformy oferujące wbudowane treści nie zawsze rezerwują miejsce na swoje widżety, co powoduje przesunięcia układu po ich załadowaniu.

Techniki radzenia sobie z tymi problemami są podobne. Główna różnica polega na tym, jak duży masz wpływ na treści, które zostaną wstawione. Jeśli wstawia je osoba trzecia, np. partner reklamowy, możesz nie znać dokładnego rozmiaru treści, które zostaną wstawione, ani nie mieć możliwości kontrolowania zmian układu w tych elementach.

Zarezerwuj miejsce na treści wczytywane później

Umieszczając w przepływie treści materiały, które wczytują się później, można uniknąć przesunięć układu, rezerwując dla nich miejsce w początkowym układzie.

Jednym z podejść jest dodanie reguły CSS min-height, aby zarezerwować miejsce, lub – w przypadku treści elastycznych, takich jak reklamy – użycie właściwości CSS aspect-ratio w sposób podobny do tego, w jaki przeglądarki automatycznie używają tej właściwości w przypadku obrazów z podawanymi wymiarami.

Korzystając z zapytań multimedialnych, możesz uwzględnić subtelne różnice w rozmiarach reklam lub placeholderów w różnych formach.

W przypadku treści, które mogą nie mieć stałej wysokości, np. reklam, możesz nie mieć możliwości zarezerwowania dokładnej ilości miejsca potrzebnej do całkowitego wyeliminowania przesunięcia układu. Jeśli wyświetlana jest mniejsza reklama, wydawca może nadać styl większemu kontenerowi, aby uniknąć zmian układu, lub wybrać najbardziej prawdopodobny rozmiar boksu reklamowego na podstawie danych historycznych. Minusem tego podejścia jest zwiększenie ilości pustej przestrzeni na stronie.

Możesz zamiast tego ustawić początkowy rozmiar na najmniejszy rozmiar, który będzie używany, i zaakceptować pewien poziom przesunięcia w przypadku większych treści. Jak już wspomnieliśmy, użycie wartości min-height pozwala elementowi nadrzędnemu zwiększać rozmiar w miarę potrzeby, jednocześnie ograniczając wpływ przesunięć układu w porównaniu z domyślnym rozmiarem 0 pikseli pustego elementu.

Jeśli np. nie zostanie zwrócona żadna reklama, spróbuj uniknąć zwijania zarezerwowanej przestrzeni, wyświetlając element zastępczy. Usunięcie miejsca zarezerwowanego dla elementów może spowodować tak samo duży CLS jak wstawienie treści.

umieszczać treści ładujące się później niż inne niżej w widocznym obszarze;

Treści dynamicznie wstrzyknięte bliżej górnej części widocznego obszaru zwykle powodują większe zmiany układu niż treści wstrzyknięte niżej w widocznym obszarze. Jednak wstrzyknięcie treści w dowolnym miejscu w widocznym obszarze nadal powoduje przesunięcie. Jeśli nie możesz zarezerwować miejsca na wstrzyknięty element, zalecamy umieszczenie go później na stronie, aby zmniejszyć wpływ na CLS.

Unikaj wstawiania nowych treści bez interakcji ze strony użytkownika.

Prawdopodobnie zauważysz przesunięcia układu spowodowane interfejsem, który pojawia się u góry lub u dołu widocznego obszaru, gdy próbujesz wczytać witrynę. Podobnie jak w przypadku reklam, często zdarza się to w przypadku banerów i formularzy, które przesuwają pozostałe treści strony:

Jeśli chcesz wyświetlać te typy interfejsów, zarezerwuj dla nich odpowiednio dużo miejsca w widoku (np. za pomocą obiektu zastępczego lub szkieletu interfejsu), aby podczas wczytywania nie powodowały one niespodziewanego przesuwania się treści na stronie. Możesz też upewnić się, że element nie jest częścią przepływu dokumentu, nakładając zawartość w miejscu, w którym ma to sens. Więcej zaleceń dotyczących tego typu komponentów znajdziesz w artykule Sprawdzone metody dotyczące powiadomień o plikach cookie.

W niektórych przypadkach dodawanie treści dynamicznie jest ważnym elementem wrażeń użytkownika. Może to nastąpić na przykład podczas wczytywania większej liczby produktów na listę produktów lub podczas aktualizowania treści pliku danych na żywo. W takich przypadkach możesz uniknąć nieoczekiwanych zmian układu na kilka sposobów:

• Zastąp stare treści nowymi w kontenerze o stałym rozmiarze lub użyj karuzeli i usuń stare treści po przejściu. Pamiętaj, aby wyłączyć wszystkie linki i elementy sterujące do czasu zakończenia przenoszenia. Zapobiegnie to przypadkowemu kliknięciu lub dotknięciu podczas przesyłania nowych treści.
• Zainicjuj wczytywanie nowych treści przez użytkownika, aby nie zaskakiwać go zmianami (np. za pomocą przycisku „Wczytaj więcej” lub „Odśwież”). Zalecamy pobieranie treści w tle przed interakcją użytkownika, aby były one dostępne od razu. Przypominamy, że zmiana układu, która nastąpiła w ciągu 500 milisekund od wprowadzenia danych przez użytkownika, nie jest uwzględniana w CLS.
• Ładowanie treści poza ekranem i informowanie użytkownika o ich dostępności (np. za pomocą przycisku „Przewijanie w górę”).

Animacje

Zmiany wartości właściwości CSS mogą wymagać reakcji przeglądarki. Niektóre wartości, takie jak box-shadow i box-sizing, powodują ponowne rozmieszczenie, malowanie i kompozycję. Zmiana właściwości top i left powoduje też przesunięcia układu, nawet jeśli przenoszony element znajduje się na osobnej warstwie. Unikaj animacji z użyciem tych właściwości.

Inne właściwości CSS można zmieniać bez wywoływania ponownego układania. Dotyczy to m.in. korzystania z animacji transform do przesuwania, skalowania, obracania i pochylania elementów.

Składane animacje korzystające z elementu translate nie mogą wpływać na inne elementy, dlatego nie są uwzględniane w wskaźniku CLS. Nieskomponowane animacje również nie powodują zmiany układu. Więcej informacji o tym, które właściwości CSS powodują zmiany układu, znajdziesz w artykule Efektywne animacje.

czcionki internetowe,

Wczytywanie i renderowanie czcionek internetowych jest zwykle obsługiwane na jeden z 2 sposobów:

• Czcionka zastępcza jest zastępowana czcionką internetową, co powoduje wyświetlenie mignięcia niesformatowanego tekstu (FOUT).
• „Niewidoczny” tekst jest wyświetlany za pomocą czcionki zastępczej, dopóki czcionka internetowa nie stanie się dostępna i tekst nie stanie się widoczny (FOIT – flash of invisible text).

Oba te podejścia mogą powodować przesunięcia układu. Nawet jeśli tekst jest niewidoczny, nadal jest układany za pomocą czcionki zastępczej, więc po załadowaniu czcionki internetowej blok tekstu i otaczające go treści przesuwają się w taki sam sposób jak w przypadku widocznej czcionki.

Te narzędzia pomogą Ci zminimalizować przesuwanie się tekstu:

• font-display: optional może uniknąć ponownego układu, ponieważ czcionka internetowa jest używana tylko wtedy, gdy jest dostępna w momencie początkowego układu.
• Upewnij się, że używana jest odpowiednia czcionka zastępcza. Na przykład użycie font-family: "Google Sans", sans-serif; spowoduje, że podczas wczytywania "Google Sans" będzie używany zastępczy font sans-serif przeglądarki. Nieokreślenie czcionki zastępczej przy użyciu tylko font-family: "Google Sans" spowoduje użycie czcionki domyślnej, która w Chrome to „Times” – czcionka szeryfowa, która jest gorszym dopasowaniem niż czcionka domyślna sans-serif.
• Zmniejsz różnice w rozmiarze między czcionką zastępczą a czcionką internetową, korzystając z nowych interfejsów API size-adjust, ascent-override, descent-override i line-gap-override, zgodnie z opisem w artykule Ulepszony interfejs czcionki zastępczej.
• Interfejs Font Loading API może skrócić czas potrzebny na pobranie niezbędnych czcionek.
• Wczytaj najważniejsze czcionki internetowe jak najszybciej, używając atrybutu <link rel=preload>. W przypadku czcionek załadowanych wstępnie jest większe prawdopodobieństwo, że będą one wyświetlane w ramach pierwszej renderyzacji, co oznacza, że nie będzie przesuwania układu.

Aby dowiedzieć się więcej o sprawdzonych metodach dotyczących czcionek, przeczytaj artykuł Sprawdzone metody dotyczące czcionek.

Zmniejsz CLS, upewniając się, że strony kwalifikują się do korzystania z pamięci podręcznej stanu strony internetowej

Skuteczną metodą na utrzymanie niskiego wyniku CLS jest upewnienie się, że strony internetowe kwalifikują się do bufora wstecznego i do przodu (bfcache).

Pamięć podręczna stanu strony internetowej przechowuje strony w pamięci przeglądarki przez krótki czas po tym, jak je opuścisz. Jeśli więc do nich wrócisz, będą one przywrócone dokładnie w takim stanie, w jakim je opuściłeś. Oznacza to, że w pełni załadowana strona jest natychmiast dostępna – bez żadnych przesunięć, które mogą być normalnie widoczne podczas wczytywania z powodu któregokolwiek z podanych wcześniej powodów.

Chociaż nadal może to oznaczać, że podczas początkowego wczytywania strony występują zmiany układu, gdy użytkownik przewija strony, nie widzi on tych samych zmian układu wielokrotnie. Zawsze należy unikać przesunięć nawet podczas początkowego wczytywania, ale jeśli nie można tego całkowicie rozwiązać, można przynajmniej ograniczyć wpływ, unikając ich w przypadku nawigacji w pamięci podręcznej.

W wielu witrynach częste są elementy nawigacyjne wstecz i do przodu. Może to być na przykład powrót na stronę treści, stronę kategorii lub stronę wyników wyszukiwania.

Gdy wprowadziliśmy tę funkcję w Chrome, zaobserwowaliśmy znaczne polepszenie wartości CLS.

Pamięć podręczna stanu strony internetowej jest domyślnie używana przez wszystkie przeglądarki, ale niektóre witryny nie kwalifikują się do jej korzystania z różnych powodów. Więcej informacji o testowaniu i identyfikowaniu problemów uniemożliwiających korzystanie z pamięci podręcznej stanu strony internetowej znajdziesz w przewodniku na temat tej funkcji. Zapoznaj się z nim, aby mieć pewność, że korzystasz z niej w pełni i że pomaga ona poprawiać ogólny wynik CLS Twojej witryny.

Podsumowanie

Jak opisano wcześniej w tym przewodniku, istnieje kilka metod wykrywania i ulepszania CLS. W ramach Core Web Vitals są uwzględnione pewne odstępstwa, więc nawet jeśli nie możesz całkowicie wyeliminować CLS, zastosowanie niektórych z tych technik powinno pozwolić na zmniejszenie jego wpływu. Mamy nadzieję, że dzięki temu uda Ci się zachować te limity i zapewnić użytkownikom lepszą obsługę.