Optymalizuj skumulowane przesunięcie układu

Dowiedz się, jak uniknąć nagłych przesunięć układu, aby zwiększyć wygodę użytkowników

Addy Osmani

Barry Pollard

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ś. Zdarza się to bardzo często w internecie, m.in. podczas czytania wiadomości lub klikania przycisków „Wyszukaj” lub „Dodaj do koszyka”. Mogą one irytować i frustrować użytkowników. Często są one spowodowane wymuszeniem zmiany położenia widocznych elementów, ponieważ nagle dodano inny element lub zmieniono jego rozmiar.

Aby zadbać o wygodę użytkowników, dla co najmniej 75% wizyt na stronie wartość CLS witryny powinna wynosić co najmniej 0,1.

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 optymalizowanie 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 przesunięć układu

Zanim zaczniesz analizować rozwiązania typowych problemów z CLS, musisz wiedzieć, jaki jest wynik CLS i z jakich źródeł pochodzą zmiany.

CLS w narzędziach laboratoryjnych i w terenie

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 zmian po wczytaniu może wystąpić w wyniku interakcji użytkownika i dlatego zostaną one wykluczone z wyniku CLS, ponieważ są to oczekiwane zmiany – o ile mają miejsce w ciągu 500 milisekund od 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. Innymi typowymi przyczynami wartości CLS po załadowaniu są interakcje związane z przechodzeniem między stanami, 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 CLS obciążenia

Jeśli wyniki CrUX i CLS w raporcie 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 w przeprowadzeniu 2 audytów, 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. Te kontrole możesz zobaczyć, filtrując dane kontroli 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 ma ona wpływ. Pomoże Ci to uzyskać więcej informacji o problemach z CLS wczytywania, ponieważ można je łatwo odtworzyć za pomocą ponownie profilu wydajności.

Wykrywanie problemów z CLS po wczytaniu

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 pól znajdziesz w artykule Pomiar elementów CLS w polu.

Rozszerzenie Web Vitals do Chrome może służyć do monitorowania CLS podczas korzystania ze strony na wyświetlaczu HUD lub w konsoli – gdzie znajdziesz więcej szczegółów nad przesuniętymi elementami.

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ę, gdy leniwe ładowanie treści jest w pełni wczytywane i nie ma na nie zarezerwowanego miejsca. Zmiana treści, gdy użytkownik najedzie na nią kursorem, jest inną częstą przyczyną po wczytaniu zawartości CLS. Każda zmiana treści podczas którejkolwiek z tych interakcji jest uznawana za nieoczekiwaną, nawet jeśli nastąpiła w ciągu 500 milisekund.

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

Gdy poznasz typowe przyczyny CLS, możesz też zastosować tryb przepływu użytkowników (timespans) w Lighthouse, dzięki któremu typowe przepływy użytkowników nie będą wracać do poprzedniego stanu. W tym celu wprowadź przesunięcia układu.

Pomiar elementów CLS w warunkach rzeczywistych

Monitorowanie CLS w terenie może być nieocenione podczas określania okoliczności, w których zachodzi CLS, i ograniczania możliwych przyczyn. Podobnie jak większość narzędzi laboratoryjnych, narzędzia terenowe mierzą tylko te elementy, które się zmieniły, ale zwykle dostarczają one wystarczających 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 ma funkcje atrybucji, które pozwalają gromadzić te dodatkowe informacje. Więcej informacji znajdziesz w artykule Debugowanie wydajności w tym polu. 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 podczas ładowania obrazu przeglądarka będzie mogła przydzielić odpowiednią ilość miejsca w dokumencie.

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ć przeformatowanie i zmianę układu.

<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 dopasować się do tej przestrzeni niezależnie od tego, czy prawdziwe wymiary są do niego dopasowane.

Po wprowadzeniu elastycznego projektowania witryn programiści zaczęli pomijać parametry width i height, a zamiast tego zaczęli 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. W miarę ładowania obrazu tekst przesuwa się w dół strony, aby zrobić na nie miejsce, co jest 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 formatu obrazu x:y obraz ma szerokość jednostek x, a wysokość Y.

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ść to 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 odpowiedniej ilości miejsca dla wysokości i powiązanego obszaru.

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. Aby zapobiec zmianom układu, możesz ustawić te atrybuty w obrazie i uwzględnić 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.

Spowoduje to obliczenie współczynnika proporcji na podstawie atrybutów width i height przed wczytaniem obrazu. 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 Chrome wyświetla je w sekcji Style w panelu Element:

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 poprzedniego kodu jest ważna, ponieważ po pobraniu obrazu wymiary obrazu zastępują domyślny współczynnik proporcji. Jeśli wymiary obrazu są inne, po jego wczytaniu nadal powoduje to przesunięcie układu, ale zapewnia, że współczynnik proporcji obrazu będzie 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 0 x 0 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. Ustawiliśmy height: auto;, aby uniknąć stosowania stałej wartości wysokości obrazu.

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

A co z obrazami elastycznymi?

W przypadku pracy z obrazami elastycznymi srcset określa obrazy, które pozwalasz przeglądarce wybrać, oraz ich rozmiar. Aby można było ustawić atrybuty szerokości i wysokości <img>, każdy obraz powinien mieć ten sam współczynnik proporcji.

<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 grafiki. 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, elementy osadzone 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 wstawiane, 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 negatywnie wpływać na wygodę użytkowników, ponieważ reklamy spychają widoczne treści w dół strony.

Widżety do umieszczania na stronie pozwalają umieścić na stronie przenośne treści internetowe, takie jak filmy z YouTube, mapy z Map Google i posty w mediach społecznościowych. Jednak te widżety często nie zdają sobie sprawy, jak duża jest ich zawartość, zanim się załadują. W efekcie platformy oferujące możliwość osadzenia 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 element zostanie wstawiony przez firmę zewnętrzną, np. partnera reklamowego, możesz nie wiedzieć, jaki jest dokładny rozmiar treści, która zostanie wstawiona, i nie będziesz mieć możliwości kontrolowania przesunięcia układu w tych osadzonych elementach.

Zarezerwuj miejsce na treści wczytywane później

Jeśli umieszczasz w przepływie treści późno ładujące się treści, można zapobiec przesunięciu układu, rezerwując dla nich miejsce w układzie początkowym.

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 nie mają stałej wysokości (np. reklam), możesz nie być w stanie zarezerwować dokładnej ilości miejsca potrzebnego do całkowitego wyeliminowania przesunięcia układu. Jeśli wyświetlana jest mniejsza reklama, wydawca może zmienić styl większego kontenera, aby uniknąć zmian układu, lub wybrać najbardziej prawdopodobny rozmiar boksu reklamowego na podstawie danych historycznych. Wadą tego rozwiązania jest to, że zwiększa ono ilość pustego miejsca na stronie.

Zamiast tego możesz ustawić najmniejszy rozmiar początkowy, który zostanie użyty, i zaakceptować pewne przesunięcie w przypadku większych treści. Użycie wartości min-height, jak sugerowano wcześniej, 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.

Staraj się unikać zwijania zarezerwowanej przestrzeni, wyświetlając obiekt zastępczy na przykład wtedy, gdy nie zostanie zwrócona żadna reklama. Usunięcie wolnego miejsca przeznaczonego na elementy może spowodować taki sam efekt CLS jak wstawianie treści.

Umieszczaj późno ładowane treści 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 pewne przesunięcie. Jeśli nie możesz zarezerwować miejsca na wstrzyknięte treści, zalecamy umieszczenie ich później na stronie, aby zmniejszyć wpływ na jej CLS.

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

Podczas próby załadowania witryny prawdopodobnie zauważysz przesunięcia układu spowodowane interfejsem, który pojawia się u góry lub u dołu widocznego obszaru. Podobnie jak w przypadku reklam często dzieje się to w przypadku banerów i formularzy, które przesuwają pozostałą część 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 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.
• Zapewnij użytkownikowi możliwość zainicjowania wczytania nowych treści, aby nie był zaskoczony zmianą (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 zmiany układu, które mają miejsce w ciągu 500 milisekund od wprowadzenia danych przez użytkownika, nie są wliczane do CLS.
• Ładowanie treści poza ekranem i informowanie użytkownika o ich dostępności (np. za pomocą przycisku „Przewiń w górę”).

Animacje

Zmiany wartości właściwości CSS mogą wymagać od przeglądarki reakcji na te zmiany. 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. używania animacji transform do przesuwania, skalowania, obracania i pochylania elementów.

Animacje skomponowane korzystające z funkcji translate nie mają wpływu na inne elementy, więc nie są uwzględniane w CLS. Nieskomponowane animacje również nie powodują przeformatowania układu. Więcej informacji o właściwościach CSS wywołujących przesunięcia układu znajdziesz w artykule Animacje o wysokiej wydajności.

czcionki internetowe,

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

• Czcionka zastępcza jest zastępowana czcionką internetową, co powoduje pojawienie się błysku 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 rozwiązania mogą powodować przesunięcia układu. Nawet jeśli tekst jest niewidoczny, jego układ jest wyświetlany przy użyciu czcionki zastępczej, więc po załadowaniu czcionki internetowej blok tekstu i otaczająca go zawartość przesuwają się w taki sam sposób jak w przypadku widocznej czcionki.

Te narzędzia pomagają zminimalizować przesuwanie 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. Jeśli nie określisz czcionki zastępczej za pomocą samego atrybutu font-family: "Google Sans", zostanie użyta czcionka domyślna, czyli w Chrome „Times” – czcionka szeryfowa, która lepiej pasuje niż domyślna czcionka sans-serif.
• Zminimalizuj różnice w rozmiarach 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. Więcej informacji na ten temat znajdziesz w poście Ulepszone opcje kreacji zastępczych.
• Interfejs Font load API może skrócić czas potrzebny na uzyskanie niezbędnych czcionek.
• Najważniejsze czcionki internetowe ładują się tak szybko, jak to możliwe, korzystając z narzędzia <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. W takim przypadku nie dochodzi do przesunięcia 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ś/opuściłaś. Oznacza to, że w pełni wczytana strona jest dostępna od razu, bez żadnych przesunięć, które zwykle są widoczne podczas wczytywania z powodu podanych wcześniej przyczyn.

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 bfcache.

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 wdrożyliśmy tę funkcję w Chrome, zaobserwowaliśmy zauważalne ulepszenia 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

Istnieje kilka metod wykrywania i ulepszania CLS, które opisaliśmy wcześniej w tym przewodniku. W ramach Core Web Vitals istnieją pewne tolerancje, 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ę.