Optymalizuj skumulowane przesunięcie układu

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

Skumulowane przesunięcie układu (CLS) to jeden z 3 podstawowych wskaźników internetowych. Mierzy niestabilność treści przez połączenie tego, jak bardzo widoczna treść przesunęła się w widocznym obszarze z odległością, od której zostały przesunięte elementy, których dotyczy problem.

Przesunięcia układu mogą rozpraszać użytkowników. Wyobraź sobie, że zaczynasz czytać artykuł, a wszystkie nagłe elementy przesuwają się wokół strony, co zniechęca Cię i wymaga ponownego znalezienia miejsca. Jest to bardzo częste w internecie, m.in. podczas czytania wiadomości lub klikania przycisku Wyszukaj. lub „Dodaj do koszyka” przyciskami. Mogą one irytować i frustrować użytkowników. Dzieje się tak często, gdy przeniesienie widocznych elementów jest wymuszone, ponieważ na stronie został nagle dodany inny element lub zmiana jego rozmiaru.

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 opartymi na czasie mierzonymi w sekundach lub milisekundach, wynik CLS jest wartością bez jednostek obliczoną na podstawie tego, jak bardzo i jak bardzo treści się zmieniają.

W tym przewodniku omówimy optymalizację częstych przyczyn przesunięć układu.

Najczęstsze przyczyny niskiego CLS:

• Obrazy bez wymiarów.
• Reklamy, umieszczone elementy i elementy iframe bez wymiarów.
• Treści wstrzykiwane dynamicznie, takie jak reklamy, elementy osadzone i elementy 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

Deweloperzy często uważają, że wartości CLS zmierzone w raporcie na temat użytkowania Chrome (CrUX) są nieprawidłowe, ponieważ nie odpowiadają CLS mierzonym za pomocą Narzędzi deweloperskich w Chrome lub innych narzędzi laboratoryjnych. Narzędzia w laboratorium wydajności stron internetowych, takie jak Lighthouse, mogą nie wyświetlać pełnego CLS strony, ponieważ zwykle wczytują się jej w prosty sposób, aby zmierzyć niektóre dane o wydajności witryny i dostarczyć pewne wskazówki (chociaż z umiejętności korzystania z Lighthouse pozwalają dokonywać pomiarów wykraczających poza domyślny audyt wczytywania strony.

CrUX to oficjalny zbiór danych programu wskaźników internetowych. W związku z tym CLS jest mierzony przez cały okres działania strony, a nie tylko podczas jej początkowego wczytywania, które są zwykle mierzone przez narzędzia laboratoryjne.

Przesunięcia układu są bardzo częste podczas wczytywania strony, ponieważ pobierane są wszystkie niezbędne zasoby, by na początku wyrenderować stronę. Przesunięcia układu mogą się jednak zdarzyć już po wstępnym 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.

W przypadku braku kwalifikującej się interakcji mogą też zostać uwzględnione inne nieoczekiwane przez użytkownika przesunięcia po wczytaniu (np. jeśli przewiniesz dalej stronę i wczytujesz się leniwie), co spowoduje przesunięcia. Innymi częstymi przyczynami CLS po wczytaniu są interakcje przejścia, np. w aplikacjach jednostronicowych, które trwają dłużej niż 500 milisekund.

PageSpeed Insights pokazuje zarówno stronę postrzeganą przez użytkowników, CLS z adresu URL w sekcji „Dowiedz się, co robią użytkownicy” sekcji, oraz oparty na laboratorium CLS w sekcji „Diagnozuj problemy z wydajnością”. . Różnice między tymi wartościami prawdopodobnie są wynikiem CLS po wczytaniu.

.

Identyfikowanie problemów z CLS obciążenia

Gdy wyniki CrUX i Lighthouse w PageSpeed Insights są w dużej mierze zgodne, zwykle oznacza to, że Lighthouse wykrył problem z CLS wczytywania. W tym przypadku Lighthouse pomoże Ci przeprowadzić 2 kontrole, aby uzyskać więcej informacji o obrazach powodujących CLS z powodu brakującej szerokości i wysokości. Przedstawi też wszystkie elementy, które przesunęły się podczas wczytywania strony, wraz z ich udziałem w CLS. Te kontrole możesz zobaczyć, filtrując dane kontroli CLS:

.

Panel Skuteczność w Narzędziach deweloperskich wyróżnia też przesunięcia układu w sekcji Eksperymenty. Widok Podsumowanie rekordu Layout Shift zawiera łączny wynik przesunięcia układu oraz nakładkę prostokątną z regionami, których dotyczy problem. 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

Niezgodność między wynikami CrUX i CLS w Lighthouse często wskazuje na CLS po wczytaniu. Ich śledzenie może być trudne bez danych z terenu. 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ą i rejestrować zmiany układu, korzystając z wklejonego w konsoli narzędzia Performance Observer.

Po skonfigurowaniu monitorowania zmian możesz spróbować odtworzyć wszystkie problemy z CLS po wczytaniu. 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. Wszelkie zmiany treści podczas jednej z tych interakcji uznaje się za nieoczekiwane, nawet jeśli mają miejsce w ciągu 500 milisekund.

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

Po zidentyfikowaniu wszelkich częstych przyczyn 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.

Mierz elementy CLS w polu

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ącej ilości informacji do zidentyfikowania przyczyny. Możesz też użyć pomiarów pól CLS, aby określić, które problemy o najwyższym priorytecie należy rozwiązać.

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ż rozpoczęli gromadzenie i prezentowanie tych danych w podobny sposób.

Najczęstsze przyczyny CLS

Po zidentyfikowaniu przyczyn CLS możesz zacząć pracę nad rozwiązaniem problemów. W tej sekcji podamy niektóre z najczęstszych przyczyn CLS i podpowiemy, jak ich uniknąć.

Obrazy bez wymiarów

Zawsze umieszczaj atrybuty rozmiaru width i height w elementach graficznych i wideo. Zarezerwuj miejsce za pomocą usługi porównywania cen aspect-ratio lub podobnej. Dzięki temu podczas ładowania obrazu przeglądarka będzie mogła przydzielić odpowiednią ilość miejsca w dokumencie.

.

.

Historia atrybutów width i height na zdjęciach

W początkowej fazie rozwoju internetu deweloperzy dodawały atrybuty width i height do tagów <img>, aby mieć pewność, że na stronie jest wystarczająca ilość miejsca, zanim przeglądarka zaczęła pobierać obrazy. Pozwoli to zminimalizować przeformatowanie i zmianę układu.

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

width i height w tym przykładzie nie zawierają jednostek. Te „piksele” zarezerwowanie przez przeglądarkę obszaru o wymiarach 640 x 360 w układzie strony. Obraz zostanie rozciągnięty, aby dopasować się do tej przestrzeni niezależnie od tego, czy rzeczywiste 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ć dla niego miejsca, dopóki przeglądarka nie rozpocznie pobierania i nie będzie w stanie określić jego wymiarów. W miarę wczytywania obrazów tekst przesuwa się w dół strony, aby zrobić na nie miejsce, co jest mylące i frustrujące dla użytkowników.

Dlatego do akcji wkraczają tu proporcje obrazu. Współczynnik proporcji obrazu to stosunek jego szerokości do jego wysokości. Często występują w tym przypadku 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 ustalić drugi. W przypadku formatu 16:9:

• Jeśli miniatura szczeniak.jpg ma wysokość 360 pikseli, szerokość to 360 x (16 / 9) = 640 pikseli.
• Jeśli miniatura.jpg ma szerokość 640 pikseli, wysokość wynosi 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.

Nowoczesna sprawdzona metoda ustawiania wymiarów obrazów

Nowoczesne przeglądarki ustawiają domyślny współczynnik proporcji obrazów na podstawie width i height obrazu możesz zapobiec przesunięciu układu, przez ustawienie tych atrybutów w obrazie i dodając poprzedni kod CSS do pliku arkusza 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ą następnie 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. Podaje te informacje na samym początku obliczania układu. Gdy tylko obraz ma określoną szerokość (np. width: 100%), do obliczenia wysokości zostaje użyty współczynnik proporcji.

Wartość aspect-ratio jest obliczana przez najważniejsze przeglądarki w trakcie przetwarzania kodu HTML, a nie za pomocą domyślnego arkusza stylów klienta użytkownika (szczegóły znajdziesz w tym poście, by dowiedzieć się, dlaczego tak jest), dlatego wartość jest wyświetlana 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 i używa źródła w stylu Atrybuty HTML. Firefox w ogóle nie wyświetla obliczonych wartości aspect-ratio w panelu Inspektor, ale używa go do określania 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 różnią się, nadal powoduje to pewne przesunięcia układu po załadowaniu obrazu, ale daje to pewność, że współczynnik proporcji obrazu będzie nadal używany, gdy tylko stanie się dostępny, o ile kod HTML będzie nieprawidłowy. Nawet jeśli rzeczywisty współczynnik proporcji różni się od domyślnego, nadal powoduje mniejsze przesunięcie układu niż w przypadku domyślnego rozmiaru 0 x 0 obrazu bez podanych wymiarów.

Aby uzyskać szczegółowe informacje o współczynniku proporcji i zastanowieniu się nad elastycznymi obrazami, przeczytaj artykuł o bezproblemowym ładowaniu stron dzięki formatom multimediów.

Jeśli obraz znajduje się w kontenerze, możesz użyć CSS, aby dopasować go do szerokości kontenera. Ustawiliśmy height: auto;, aby uniknąć używania stałej wartości wysokości obrazu.

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

A co z obrazami elastycznymi?

W przypadku obrazów elastycznych srcset definiuje obrazy, które przeglądarka może wybrać, oraz rozmiar każdego z nich. 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"
/>

Twoje obrazy format obrazu może się też zmieniać w zależności kierunek graficzny. Możesz na przykład dodać przycięte ujęcie obrazu, by uzyskać wąski w widocznych obszarach i wyświetlaj cały 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 na Elementy (<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 umieszczone i inne wczytywane z opóźnieniem treści

Obrazy nie są jedynym typem treści, który może powodować przesunięcia układu. Reklamy, elementy umieszczone, elementy iframe i inne treści wstrzykiwane dynamicznie mogą powodować przesunięcie treści pojawiającej się po nich w dół, zwiększając CLS.

Reklamy mają największy udział w przesunięciach układu w internecie. Sieci reklamowe i wydawcy często obsługują rozmiary reklam dynamicznych. Rozmiary reklam zwiększają skuteczność lub przychody dzięki wyższym współczynnikom klikalności i większej liczbie reklam konkurujących na 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 związku z tym platformy z możliwością umieszczania treści nie zawsze rezerwują miejsce na widżety, co powoduje przesuwanie układu po załadowaniu.

Techniki radzenia sobie z tymi problemami są podobne. Główne różnice dotyczą tego, jak duża jest kontrola nad treścią, która zostanie wstawiona. Jeśli element ten zostanie wstawiony przez firmę zewnętrzną, np. partnera reklamowego, możesz nie znać dokładnego rozmiaru treści, które zostaną wstawione, i nie będziesz mieć możliwości kontrolowania przesunięcia układu w tych osadzonych elementach.

Zarezerwuj miejsce na treści ładowane z opóźnieniem

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 ze sposobów jest dodanie reguły CSS min-height, aby zarezerwować przestrzeń lub – na przykład w przypadku elastycznych treści, takich jak reklamy – użyć właściwości CSS aspect-ratio w podobny sposób, w jaki przeglądarki automatycznie używają jej w przypadku obrazów o podanych wymiarach.

Korzystając z zapytań o media, możesz uwzględnić niewielkie różnice w rozmiarach reklam lub obiektów zastępczych w poszczególnych formatach.

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. Zgodnie z wcześniejszym sugerowanym użyciem elementu min-height element nadrzędny może powiększać się w razie potrzeby, jednocześnie zmniejszając wpływ przesunięć układu w porównaniu z domyślnym rozmiarem pustego elementu wynoszący 0 pikseli.

Staraj się unikać zwijania zarezerwowanej przestrzeni, wyświetlając obiekt zastępczy np. 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

Dynamicznie wstrzykiwane treści bliżej górnej części widocznego obszaru zwykle powodują większe przesunięcia układu niż treści wstrzykiwane niżej. 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.

Nie wstawiaj nowych treści bez interakcji ze strony użytkownika

Prawdopodobnie układ się przesunął z powodu interfejsu, który pojawia się u góry lub u dołu widocznego obszaru podczas wczytywania strony. Podobnie jak w przypadku reklam, często dzieje się to w przypadku banerów i formularzy, które przesuwają pozostałą część zawartości strony:

Jeśli chcesz wyświetlić takie funkcje interfejsu, zarezerwuj z wyprzedzeniem odpowiednią ilość miejsca w widocznym obszarze (np. za pomocą obiektu zastępczego lub szkieletowego interfejsu), aby podczas wczytywania nie powodować niespodziewanych przesuwania zawartości strony. Możesz też zadbać o to, aby element nie był częścią przepływu dokumentów. W tym celu nałóż na treść odpowiednią treść. Więcej zaleceń dotyczących tego typu komponentów znajdziesz w poście ze sprawdzonymi metodami dotyczącymi powiadomień o plikach cookie.

W niektórych przypadkach dynamiczne dodawanie treści ma duże znaczenie dla wygody użytkowników. Na przykład podczas wczytywania kolejnych produktów do listy produktów lub podczas aktualizowania treści aktywnego pliku danych. Aby w takich przypadkach uniknąć nieoczekiwanych przesunięć układu, możesz to zrobić na kilka sposobów:

• Zastąp starą treść nowymi w kontenerze o stałym rozmiarze lub użyj karuzeli i usuń stare treści po przeniesieniu. Pamiętaj, aby wyłączyć wszystkie linki i elementy sterujące do momentu zakończenia przejścia, aby zapobiec przypadkowym kliknięciom i kliknięciom w trakcie pojawiania się nowych treści.
• Poproś użytkownika o zainicjowanie ładowania nowej treści, aby nie zaskoczył go zmiana (np. za pomocą przycisku „Wczytaj więcej” lub „Odśwież”). Zalecamy wstępne pobranie treści przed interakcją z użytkownikiem, tak aby były widoczne 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.
• Płynnie wczytuj treści poza ekran i nakładaj na użytkowników powiadomienia 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, aktywują przekaźnik, wyrenderowanie i kompozycję. Zmiana właściwości top i left również powoduje przesunięcia układu, nawet jeśli przenoszony element znajduje się we własnej warstwie. Unikaj używania tych właściwości do animowania.

Inne właściwości CSS można zmieniać bez uruchamiania ponownego układów. Obejmują one używanie 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

Pobieranie i renderowanie czcionek internetowych odbywa się zwykle na jeden z dwóch sposobów przed pobraniem czcionki internetowej:

• Czcionka zastępcza jest zastępowana czcionką internetową, co powoduje pojawienie się błysku niesformatowanego tekstu (FOUT).
• „Niewidoczny” tekst jest wyświetlany przy użyciu czcionki zastępczej do czasu, aż czcionka internetowa będzie dostępna, a tekst stanie się widoczny (FOIT – błysk niewidocznego tekstu).

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ę tak samo jak widoczna czcionka.

Te narzędzia pomagają zminimalizować przesuwanie tekstu:

• font-display: optional może uniknąć zmiany układu, ponieważ czcionka internetowa jest używana tylko wtedy, gdy jest dostępna przed wstępnym układem.
• Upewnij się, że używasz odpowiedniej czcionki zastępczej. Na przykład użycie zasady font-family: "Google Sans", sans-serif; sprawi, że podczas wczytywania elementu "Google Sans" używana będzie czcionka zastępcza przeglądarki sans-serif. 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>. Wstępnie załadowana czcionka ma większą szansę na pierwsze wyrenderowanie, przez co nie ma przesunięcia układu.

Inne sprawdzone metody dotyczące czcionek znajdziesz w artykule Sprawdzone metody korzystania z czcionek.

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

Bardzo skuteczną metodą utrzymywania niskich wyników CLS jest zadbanie o to, aby Twoje strony internetowe kwalifikowały się do korzystania z pamięci podręcznej stanu strony internetowej (bfcache).

Funkcja bfcache przechowuje strony w pamięci przeglądarki przez krótki czas po ich zamknięciu, więc jeśli do nich wrócisz, zostaną one przywrócone dokładnie w takiej postaci, w jakiej zostały przez Ciebie odwiedzone. 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.

Mimo że wciąż może to oznaczać, że przy początkowym wczytywaniu strony występują zmiany układu, gdy użytkownik przegląda strony ponownie, nie widzi wielokrotnie tych samych zmian. Staraj się unikać zmian nawet przy początkowym wczytywaniu, ale w sytuacjach, w których jest to trudniejsze, można przynajmniej ograniczyć wpływ tych zmian, unikając ich przy każdej nawigacji w pamięci podręcznej stanu strony internetowej.

W wielu witrynach często przewija się do przodu i do tyłu. Może to być na przykład powrót na stronę z treścią, stronę kategorii lub wyniki wyszukiwania.

Po wdrożeniu tej funkcji w Chrome zaobserwowaliśmy zauważalne ulepszenia CLS.

Wszystkie przeglądarki używają domyślnie pamięci podręcznej stanu strony internetowej, jednak z różnych powodów nie można z niej korzystać w niektórych witrynach. Zapoznaj się z przewodnikiem dotyczącym pamięci podręcznej stanu strony internetowej, aby dowiedzieć się więcej o tym, jak przetestować i zidentyfikować problemy uniemożliwiające użycie pamięci podręcznej stanu strony internetowej. Dzięki temu będziesz mieć pewność, że w pełni korzystasz z tej funkcji i pomagasz w osiągnięciu ogólnego wyniku CLS witryny.

Podsumowanie

Istnieje wiele technik wykrywania i ulepszania CLS, które opisaliśmy wcześniej w tym przewodniku. Podstawowe wskaźniki internetowe zawierają pewne ograniczenia, więc nawet jeśli nie możesz całkowicie wyeliminować CLS, zastosowanie niektórych z tych metod powinno pomóc w zmniejszeniu wpływu. Mam nadzieję, że w ten sposób uda Ci się przekroczyć te limity i zapewni użytkownikom większą wygodę korzystania z Twojej witryny.