Dowiedz się, jak uniknąć nagłych przesunięć układu, aby poprawić wygodę użytkowników
Data publikacji: 5 maja 2020 r., ostatnia aktualizacja: 7 lutego 2025 r.
Skumulowane przesunięcie układu (CLS) to jeden z 3 podstawowych wskaźników internetowych. Mierzy niestabilność treści, łącząc informacje o tym, ile widocznych treści przesunęło się 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 Cię rozprasza i zmusza do ponownego odnalezienia miejsca, w którym skończyłeś(-aś) czytać. Jest to bardzo powszechne w internecie, np. podczas czytania wiadomości lub próby kliknięcia przycisków „Szukaj” lub „Dodaj do koszyka”. Takie sytuacje są nieprzyjemne i frustrujące. Często są one spowodowane tym, że widoczne elementy są zmuszone do przesunięcia się, ponieważ nagle dodano do strony inny element lub zmieniono jego rozmiar.
Aby zapewniać użytkownikom dobre wrażenia, witryny powinny mieć wartość CLS równą 0,1 lub mniejszą w przypadku co najmniej 75% wizyt na stronie.
W przeciwieństwie do pozostałych podstawowych wskaźników internetowych, które są wartościami czasowymi mierzonymi w sekundach lub milisekundach, wynik CLS jest wartością bez jednostki, która jest obliczana na podstawie tego, ile treści się przesuwa i o ile.
W tym przewodniku omówimy optymalizację typowych przyczyn zmian układu.
Najczęstsze przyczyny niskiego wyniku CLS:
- Obrazy bez wymiarów.
- Reklamy, elementy do umieszczenia i elementy iframe bez wymiarów.
- treści wstawiane dynamicznie, takie jak reklamy, elementy do osadzenia i ramki iframe bez wymiarów;
- czcionki internetowe,
Przyczyny zmian układu
Zanim zaczniesz szukać rozwiązań typowych problemów z CLS, warto poznać swój wynik CLS i ustalić, skąd pochodzą przesunięcia.
CLS w narzędziach laboratoryjnych a w terenie
Deweloperzy często uważają, że wartość CLS mierzona przez Raport UX Chrome (CrUX) jest nieprawidłowa, ponieważ nie pasuje do wartości CLS, którą mierzą za pomocą Narzędzi deweloperskich w Chrome lub innych narzędzi laboratoryjnych. Narzędzia laboratoryjne do testowania wydajności stron internetowych, takie jak Lighthouse, mogą nie wyświetlać pełnego CLS strony, ponieważ zwykle wykonują podstawowe ładowanie strony, aby zmierzyć niektóre dane dotyczące wydajności i udzielić wskazówek (chociaż przepływy użytkowników w Lighthouse umożliwiają pomiary wykraczające poza domyślny audyt ładowania strony).
CrUX to zbiór danych Google w ramach programu Web Vitals. W jego przypadku CLS jest mierzony przez cały czas działania strony, a nie tylko podczas jej początkowego ładowania, jak to zwykle robią narzędzia laboratoryjne.
Przesunięcia układu są bardzo częste podczas wczytywania strony, ponieważ wszystkie niezbędne zasoby są pobierane w celu wstępnego wyrenderowania strony. Mogą one jednak występować również po wstępnym wczytaniu. Wiele przesunięć po wczytaniu może wystąpić w wyniku interakcji użytkownika, dlatego zostaną one wykluczone z wyniku CLS, ponieważ są to oczekiwane przesunięcia – o ile wystąpią w ciągu 500 milisekund od tej interakcji.
Mogą jednak wystąpić inne przesunięcia po wczytaniu, które są nieoczekiwane dla użytkownika, jeśli nie doszło do kwalifikującej się interakcji – na przykład jeśli przewiniesz stronę dalej, a treści wczytywane z opóźnieniem spowodują przesunięcia. Inne częste przyczyny CLS po wczytaniu strony to interakcje z przejściami, np. w przypadku aplikacji jednostronicowych, które trwają dłużej niż 500 ms okresu oczekiwania.
PageSpeed Insights w sekcji „Dowiedz się, jakie są wrażenia użytkowników” pokazuje CLS z perspektywy użytkownika z adresu URL, a w sekcji „Diagnozowanie problemów z wydajnością” – CLS wczytywania na podstawie testów laboratoryjnych. Różnice między tymi wartościami wynikają prawdopodobnie z CLS po wczytaniu.
Identyfikowanie problemów z CLS podczas wczytywania
Gdy wyniki CLS w raporcie na temat użytkowania Chrome i Lighthouse w narzędziu PageSpeed Insights są w dużej mierze zgodne, zwykle oznacza to, że występuje problem z CLS podczas wczytywania, który został wykryty przez Lighthouse. W takim przypadku Lighthouse przeprowadzi 2 audyty, aby dostarczyć więcej informacji o obrazach powodujących CLS z powodu braku szerokości i wysokości, a także wyświetlić listę wszystkich elementów, które uległy przesunięciu podczas ładowania strony, wraz z ich wpływem na CLS. Aby wyświetlić te audyty, odfiltruj audyty CLS:
Panel Wydajność w Narzędziach deweloperskich zawiera wiele informacji o zmianach układu:
Layout Shift. Kliknięcie rombów powoduje wyświetlenie animacji zmiany i szczegółów w panelu Podsumowanie.
Przesunięcia układu są wyróżnione na ścieżce Przesunięcia układu. Fioletowa linia grupuje zmiany w klastry zmian, a diamenty pokazują poszczególne zmiany w tym klastrze. Rozmiar rombu jest proporcjonalny do wielkości przesunięcia, co pozwala skupić się na największych przesunięciach.
Kliknięcie przesunięcia powoduje wyświetlenie wyskakującego okienka z animacją przesunięcia i wyróżnienie elementów przesunięcia na fioletowo.
Dodatkowo widok Podsumowanie dla rekordu Layout Shift zawiera godzinę rozpoczęcia, wynik zmiany oraz elementy, które zostały przesunięte. Jest to szczególnie przydatne w przypadku uzyskiwania szczegółowych informacji o problemach z CLS podczas wczytywania, ponieważ można je łatwo odtworzyć za pomocą profilu wydajności ponownego wczytywania.
Zawiera też link do statystyk Przyczyny przesunięć układu wyświetlanych w panelu Statystyki po lewej stronie. U góry tego panelu znajdziesz łączną wartość CLS, a także możliwe przyczyny przesunięć układu.
Identyfikowanie problemów z CLS po wczytaniu
Różnica między wynikami CLS w CrUX i Lighthouse często wskazuje na CLS po wczytaniu. Bez danych z pola trudno jest śledzić te zmiany. Informacje o zbieraniu danych o polach znajdziesz w artykule Pomiar elementów CLS w polu.
Widok danych na żywo w panelu Wydajność umożliwia interakcję ze stroną i monitorowanie wyniku CLS w celu identyfikowania interakcji powodujących duże przesunięcia układu.
Zamiast korzystać z Narzędzi deweloperskich, możesz przeglądać stronę internetową, rejestrując zmiany układu za pomocą obiektu Performance Observer wklejonego do konsoli.
Po skonfigurowaniu monitorowania przesunięć możesz spróbować odtworzyć wszelkie problemy z CLS po wczytaniu. CLS często występuje, gdy użytkownik przewija stronę, a treści wczytywane z opóźnieniem są wczytywane w całości bez zarezerwowania dla nich miejsca. Kolejną częstą przyczyną CLS po wczytaniu jest przesuwanie się treści, gdy użytkownik najedzie na nią wskaźnikiem. Każde przesunięcie treści podczas którejkolwiek z tych interakcji jest uznawane za nieoczekiwane, nawet jeśli nastąpi w ciągu 500 milisekund.
Więcej informacji znajdziesz w artykule Debugowanie przesunięć układu.
Po zidentyfikowaniu typowych przyczyn CLS możesz też użyć trybu przepływu użytkownika w Lighthouse, aby mieć pewność, że typowe przepływy użytkownika nie ulegną pogorszeniu przez wprowadzenie zmian układu.
Pomiar elementów CLS w terenie
Monitorowanie CLS w terenie może być nieocenione w określaniu okoliczności, w których występuje CLS, i zawężaniu 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ących informacji do określenia przyczyny. Możesz też używać pomiarów w polu CLS, aby określić, które problemy mają najwyższy priorytet.
Biblioteka web-vitals zawiera funkcje atrybucji, które umożliwiają zbieranie tych dodatkowych informacji. Więcej informacji znajdziesz w artykule Debugowanie wydajności w warunkach rzeczywistych. Inni dostawcy RUM również zaczęli zbierać i prezentować te dane w podobny sposób.
Typowe przyczyny CLS
Gdy poznasz przyczyny CLS, możesz zacząć rozwiązywać problemy. W tej sekcji przedstawimy niektóre z najczęstszych przyczyn CLS i sposoby ich unikania.
Obrazy bez wymiarów
W elementach graficznych i wideo zawsze podawaj atrybuty rozmiaru width i height. Możesz też zarezerwować wymaganą przestrzeń za pomocą CSS aspect-ratio lub podobnego rozwiązania. Dzięki temu przeglądarka może przydzielić odpowiednią ilość miejsca w dokumencie podczas ładowania obrazu.
Historia atrybutów width i height na obrazach
W początkach internetu deweloperzy dodawali atrybuty width i height do tagów <img>, aby zapewnić wystarczającą ilość miejsca na stronie, zanim przeglądarka zacznie pobierać obrazy. Pozwoli to zminimalizować ponowne wczytywanie i ponowne rozmieszczanie elementów.
<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 „pikseli” zapewnią, że przeglądarka zarezerwuje w układzie strony obszar o wymiarach 640 x 360. Obraz zostanie rozciągnięty, aby wypełnić to miejsce, niezależnie od tego, czy jego rzeczywiste wymiary są zgodne z wymiarami tego miejsca.
Gdy wprowadzono elastyczne projektowanie witryn, programiści zaczęli pomijać tagi width i height, a zamiast nich używać CSS do zmiany rozmiaru obrazów:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Jednak ponieważ rozmiar obrazu nie jest określony, nie można przydzielić mu miejsca, dopóki przeglądarka nie zacznie go pobierać i nie będzie mogła określić jego wymiarów. Podczas wczytywania obrazów tekst przesuwa się w dół strony, aby zrobić dla nich miejsce, co może być mylące i frustrujące dla użytkowników.
Właśnie tutaj przydaje się format obrazu. Format obrazu to stosunek jego szerokości do wysokości. Zwykle jest on wyrażany jako 2 liczby oddzielone 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. W przypadku formatu obrazu 16:9:
- Jeśli plik puppy.jpg ma wysokość 360 pikseli, szerokość wynosi 360 x (16 / 9) = 640 pikseli.
- Jeśli plik puppy.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 wystarczającej ilości miejsca na wysokość i powiązany obszar.
Nowoczesne sprawdzone metody określania wymiarów obrazu
Nowoczesne przeglądarki ustawiają domyślne proporcje obrazów na podstawie atrybutów width i height obrazu. Możesz zapobiec przesunięciom układu, ustawiając te atrybuty w obrazie i uwzględniając powyższy 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ą wtedy domyślny współczynnik proporcji na podstawie istniejących atrybutów width i height elementu.
Oblicza współczynnik proporcji na podstawie atrybutów width i height, zanim obraz zostanie wczytany. Podaje 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.
Ta 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 znajdziesz w tym poście), więc jest wyświetlana nieco inaczej. Na przykład w sekcji Style w panelu Element Chrome wyświetla go w ten sposób:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari działa podobnie, korzystając ze źródła stylu Atrybuty HTML. Firefox w ogóle nie wyświetla tej obliczonej wartości aspect-ratio w panelu Inspektor, ale używa jej do określania układu.
Fragment auto w powyższym kodzie jest ważny, ponieważ powoduje, że po pobraniu obrazu jego wymiary zastępują domyślny współczynnik proporcji. Jeśli wymiary obrazu są inne, po jego wczytaniu nadal nastąpi przesunięcie układu, ale dzięki temu współczynnik proporcji obrazu będzie 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, powoduje on mniejsze przesunięcie układu niż domyślny rozmiar 0x0 obrazu bez podanych wymiarów.
Więcej informacji o współczynniku proporcji i obrazach elastycznych znajdziesz w artykule jank-free page loading with media aspect ratios (w języku angielskim).
Jeśli obraz znajduje się w kontenerze, możesz użyć CSS, aby zmienić jego rozmiar na szerokość kontenera. Ustawiamy 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 atrybut srcset określa obrazy, spośród których przeglądarka może wybierać, oraz ich rozmiary. Aby można było ustawić atrybuty szerokości i wysokości <img>, każdy obraz powinien mieć ten sam format.
<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"
/>
Proporcje obrazów mogą się też zmieniać w zależności od koncepcji artystycznej. Możesz na przykład umieścić przycięte zdjęcie w przypadku wąskich obszarów wyświetlania, a 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>
Przeglądarki Chrome, Firefox i Safari obsługują teraz ustawianie atrybutów 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 do umieszczenia i inne treści ładowane z opóźnieniem
Obrazy to nie jedyny typ treści, który może powodować zmiany układu. Reklamy, elementy do umieszczenia, elementy iframe i inne treści wstawiane dynamicznie mogą powodować przesunięcie w dół treści pojawiających się po nich, co zwiększa CLS.
Reklamy są jednym z najczęstszych powodów przesunięć układu w internecie. Sieci reklamowe i wydawcy często obsługują dynamiczne rozmiary reklam. Rozmiary reklam zwiększają skuteczność i przychody dzięki wyższym współczynnikom klikalności i większej liczbie reklam biorących udział w aukcji. Niestety może to pogorszyć wrażenia użytkowników, ponieważ reklamy przesuwają w dół widoczne treści, które oglądasz.
Wbudowane widżety umożliwiają umieszczanie na stronie przenośnych treści internetowych, takich jak filmy z YouTube, mapy z Map Google czy posty z mediów społecznościowych. Te widżety często nie wiedzą, jak duże są ich treści, zanim się załadują. W rezultacie platformy oferujące osadzanie nie zawsze rezerwują miejsce na widżety, co powoduje przesunięcia układu, gdy w końcu się one załadują.
Techniki radzenia sobie z nimi są podobne. Główne różnice polegają na tym, jak dużą masz kontrolę nad treściami, które zostaną wstawione. Jeśli jest on wstawiany przez osobę trzecią, np. partnera reklamowego, możesz nie znać dokładnego rozmiaru wstawianych treści ani nie mieć możliwości kontrolowania zmian układu w tych elementach.
Rezerwowanie miejsca na treści wczytywane z opóźnieniem
Umieszczając w przepływie treści elementy wczytywane z opóźnieniem, można uniknąć przesunięć 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ć miejsce, lub w przypadku treści elastycznych, takich jak reklamy, użycie 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.
Może być konieczne uwzględnienie niewielkich różnic w rozmiarach reklam lub symboli zastępczych na różnych urządzeniach za pomocą zapytań o media.
W przypadku treści, które mogą nie mieć stałej wysokości, np. reklam, możesz nie być w stanie zarezerwować dokładnej ilości miejsca potrzebnej do całkowitego wyeliminowania zmiany układu. Jeśli wyświetli się mniejsza reklama, wydawca może dostosować większy kontener, aby uniknąć zmian układu, lub wybrać najbardziej prawdopodobny rozmiar boksu reklamowego na podstawie danych historycznych. Wadą tego podejścia jest zwiększenie ilości pustego miejsca na stronie.
Możesz 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. Użycie min-height, jak sugerowaliśmy wcześniej, pozwala elementowi nadrzędnemu rosnąć w miarę potrzeby, a jednocześnie zmniejsza wpływ przesunięć układu w porównaniu z domyślnym rozmiarem pustego elementu wynoszącym 0 pikseli.
Staraj się unikać zwijania zarezerwowanej przestrzeni, wyświetlając w niej element zastępczy, np. gdy nie zwrócono żadnej reklamy. Usunięcie miejsca zarezerwowanego dla elementów może spowodować podobne przesunięcie CLS jak wstawienie treści.
Umieszczaj treści ładowane z opóźnieniem w dolnej części widocznego obszaru
Treści wstawiane dynamicznie bliżej górnej części widocznego obszaru zwykle powodują większe zmiany układu niż treści wstawiane w dolnej części widocznego obszaru. Jednak wstawianie treści w dowolnym miejscu widocznego obszaru nadal powoduje pewne przesunięcie. Jeśli nie możesz zarezerwować miejsca na wstrzykiwane treści, zalecamy umieszczenie ich w dalszej części strony, aby zmniejszyć wpływ na CLS.
Unikaj wstawiania nowych treści bez interakcji użytkownika
Prawdopodobnie zdarzyło Ci się, że podczas wczytywania witryny układ strony uległ zmianie z powodu interfejsu, który pojawił się u góry lub u dołu widocznego obszaru. Podobnie jak w przypadku reklam, często zdarza się to w przypadku banerów i formularzy, które przesuwają pozostałą część treści strony:
Jeśli musisz wyświetlać tego typu elementy interfejsu, z wyprzedzeniem zarezerwuj dla nich wystarczającą ilość miejsca w obszarze widoku (np. używając obiektu zastępczego lub szkieletu interfejsu), aby po załadowaniu nie powodowały one nagłego przesuwania się treści na stronie. Możesz też zadbać o to, aby element nie był częścią przepływu dokumentu, nakładając treść w odpowiednich miejscach. Więcej rekomendacji dotyczących tych typów komponentów znajdziesz w artykule Sprawdzone metody dotyczące powiadomień o plikach cookie.
W niektórych przypadkach dynamiczne dodawanie treści jest ważnym elementem wygody użytkowników. Na przykład podczas wczytywania większej liczby produktów do listy lub aktualizowania treści kanału 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 przejścia, aby zapobiec przypadkowym kliknięciom lub dotknięciom podczas wczytywania nowych treści.
- Umożliwiaj użytkownikowi inicjowanie wczytywania nowych treści, aby nie był zaskoczony zmianą (np. za pomocą przycisku „Wczytaj więcej” lub „Odśwież”). Zalecamy wstępne pobieranie treści przed interakcją użytkownika, aby wyświetlały się od razu. Przypominamy, że zmiany układu, które występują w ciągu 500 milisekund od działania użytkownika, nie są wliczane do CLS.
- Płynnie wczytuj treści poza ekranem i wyświetlaj użytkownikowi powiadomienie o ich dostępności (np. za pomocą przycisku „Przewiń do góry”).
Animacje
Zmiany wartości właściwości CSS mogą wymagać od przeglądarki reagowania na te zmiany. Niektóre wartości, np. box-shadow i box-sizing, powodują ponowne rozmieszczenie, rysowanie i komponowanie. Zmiana właściwości top i left również powoduje przesunięcia układu, nawet jeśli przenoszony element znajduje się na własnej warstwie. Unikaj animowania za pomocą tych właściwości.
Inne właściwości CSS można zmieniać bez ponownego układu. Obejmuje to używanie animacji transform do przesuwania, skalowania, obracania lub pochylania elementów.
Animacje złożone wykorzystujące translate nie mogą wpływać na inne elementy, więc nie są uwzględniane w CLS. Nieskomponowane animacje nie powodują też ponownego układu. Więcej informacji o tym, które właściwości CSS powodują przesunięcia układu, znajdziesz w artykule Animacje o wysokiej wydajności.
Czcionki internetowe
Pobieranie i renderowanie czcionek internetowych przed ich pobraniem odbywa się zwykle na 2 sposoby:
- Czcionka zastępcza jest zamieniana na czcionkę internetową, co powoduje efekt FOUT (Flash of Unstyled Text).
- „Niewidoczny” tekst jest wyświetlany przy użyciu czcionki zastępczej, dopóki nie będzie dostępna czcionka internetowa i tekst nie stanie się widoczny (FOIT – flash of invisible text).
Oba podejścia mogą powodować przesunięcia układu. Nawet jeśli tekst jest niewidoczny, jest on nadal rozmieszczany przy użyciu czcionki zastępczej, więc gdy czcionka internetowa zostanie załadowana, blok tekstu i otaczająca go treść przesuną się w taki sam sposób jak w przypadku widocznej czcionki.
Te narzędzia pomogą Ci zminimalizować przesuwanie się tekstu:
font-display: optionalmoż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 ładowania czcionki"Google Sans"przeglądarka będzie używać czcionki zastępczejsans-serif. Nieokreślenie czcionki zastępczej za pomocą samego znakufont-family: "Google Sans"spowoduje użycie czcionki domyślnej, która w Chrome jest czcionką szeryfową „Times”. Jest ona gorzej dopasowana niż domyślna czcionkasans-serif. - Zminimalizuj różnice w rozmiarze między czcionką zastępczą a czcionką internetową, korzystając z nowych interfejsów API
size-adjust,ascent-override,descent-overrideiline-gap-override, zgodnie z opisem w poście Ulepszone czcionki zastępcze. - Interfejs Font Loading API może skrócić czas potrzebny na pobranie niezbędnych czcionek.
- Wczytuj najważniejsze czcionki internetowe jak najwcześniej, używając atrybutu
<link rel=preload>. Wstępnie wczytana czcionka ma większe szanse na spełnienie warunku pierwszego wyrenderowania, w którym to przypadku nie następuje przesunięcie układu.
Więcej sprawdzonych metod dotyczących czcionek znajdziesz w artykule Sprawdzone metody dotyczące czcionek.
Zmniejsz CLS, dbając o to, aby strony kwalifikowały się do korzystania z pamięci podręcznej „wstecz/dalej”
Skuteczną metodą utrzymywania niskich wyników CLS jest zapewnienie, że strony internetowe kwalifikują się do pamięci podręcznej wstecz/dalej (bfcache).
Pamięć podręczna stanu strony internetowej przechowuje strony w pamięci przeglądarki przez krótki czas po opuszczeniu ich przez użytkownika. Jeśli użytkownik wróci do tych stron, zostaną one przywrócone dokładnie w takim stanie, w jakim je opuścił. Oznacza to, że w pełni wczytana strona jest dostępna od razu – bez przesunięć, które zwykle występują podczas wczytywania z jednego z podanych wcześniej powodów.
Chociaż może to nadal oznaczać, że początkowe wczytywanie strony powoduje zmiany układu, gdy użytkownik wraca do poprzednich stron, nie widzi tych samych zmian układu wielokrotnie. Zawsze staraj się unikać przesunięć nawet podczas początkowego wczytywania, ale jeśli jest to trudne do pełnego rozwiązania, możesz przynajmniej zmniejszyć ich wpływ, unikając ich podczas nawigacji z użyciem pamięci podręcznej.
Nawigacja wstecz i do przodu jest powszechna w wielu witrynach. Na przykład powrót do strony z treścią, strony kategorii lub wyników wyszukiwania.
Gdy wprowadziliśmy tę zmianę w Chrome, zauważyliśmy wyraźną poprawę 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 używania 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 dotyczącym tej funkcji. Dzięki temu będziesz mieć pewność, że w pełni wykorzystujesz tę funkcję, aby poprawić ogólny wynik CLS witryny.
Podsumowanie
W tym przewodniku opisaliśmy kilka technik identyfikowania i poprawiania CLS. W przypadku podstawowych sygnałów internetowych obowiązują pewne limity, więc nawet jeśli nie możesz całkowicie wyeliminować CLS, zastosowanie niektórych z tych technik powinno pozwolić Ci zmniejszyć jego wpływ. Dzięki temu możesz zmieścić się w tych limitach i zapewnić użytkownikom witryny lepsze wrażenia.