Dowiedz się, jak rozpoznawać i naprawiać przesunięcia układu.
W pierwszej części tego artykułu omawiamy narzędzia do debugowania przesunięć układu, W drugiej części omawiamy proces myślowy, który można zastosować aby znaleźć przyczynę przesunięcia układu.
Narzędzia
Interfejs Layout Instability API
Interfejs Layout Instability API to interfejs do pomiaru i raportowania zmian układu w przeglądarce. Wszystkie narzędzia dla przesunięcia układu debugowania, w tym Narzędzia deweloperskie, są ostatecznie oparte na Layout Instability API. Bezpośrednie używanie interfejsu Layout Instability API potężnym narzędziu do debugowania ze względu na swoją elastyczność.
Wykorzystanie
Ten sam fragment kodu, który mierzy skumulowane przesunięcie układu (CLS), może również służą do debugowania przesunięć układu. Fragment poniżej zawiera informacje o układzie przechodzi do konsoli. Sprawdzenie tego dziennika dostarczy Ci informacji o tym, kiedy, gdzie i jak doszło do przesunięcia układu.
let cls = 0;
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Uruchamiając ten skrypt, pamiętaj, że:
- Opcja
buffered: true
wskazuje, żePerformanceObserver
. powinien sprawdzić wpis wydajności przeglądarki bufor dla wpisów dotyczących wydajności, które zostały utworzone przed jego zainicjowanie. W efekciePerformanceObserver
będzie raportował układ i przeniesienia, które miały miejsce zarówno przed, jak i po jego zainicjowaniu. Zachowaj w podczas sprawdzania dzienników konsoli. Początkowa akcja przesunięć układu może odzwierciedlają zaległości raportowania, a nie nagłe wystąpienie wielu przesunięciach układu. - Aby uniknąć wpływu na wydajność,
PerformanceObserver
czeka, aż główny Wątek jest nieaktywny, aby generować raporty o przesunięciach układu. W zależności od tego, jak jest zajęty wątekem głównym, może wystąpić niewielkie opóźnienie między momentem pojawienia się układu zachodzi zmiana i gdy zostanie ona zarejestrowana w konsoli. - Ten skrypt ignoruje przesunięcia układu, które nastąpiły w ciągu 500 ms od wprowadzenia danych przez użytkownika i dlatego nie są wliczane do CLS.
Informacje o przesunięciach układu są zgłaszane przy użyciu kombinacji 2 interfejsów API:
LayoutShift
i
LayoutShiftAttribution
i interfejsów. Każdy z tych interfejsów objaśniamy bardziej szczegółowo w
poniższych sekcji.
LayoutShift
Każde przesunięcie układu jest raportowane w interfejsie LayoutShift
. Zawartość
pojawi się taki wpis:
duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798
Powyższy wpis wskazuje przesunięcie układu, w wyniku którego zmieniły się 3 elementy DOM.
pozycji. Wynik przesunięcia układu w przypadku tego konkretnego przesunięcia układu wyniósł 0.175
.
To są właściwości instancji LayoutShift
, które są najważniejsze dla
debugowanie przesunięć układu:
Właściwość | Opis |
---|---|
sources |
Właściwość sources zawiera listę elementów DOM, które zostały przeniesione podczas przesunięcia układu. Ta tablica może zawierać maksymalnie 5 źródeł. Jeśli przesunięcie układu ma wpływ na więcej niż 5 elementów, w raportach pojawia się 5 największych źródeł (mierzonych na podstawie wpływu na stabilność układu). Te informacje są raportowane za pomocą interfejsu LayoutShiftAttribution (zostało to szczegółowo opisane poniżej). |
value |
Właściwość value podaje wynik przesunięcia układu dla danego przesunięcia układu. |
hadRecentInput |
Właściwość hadRecentInput wskazuje, czy przesunięcie układu nastąpiło w ciągu 500 milisekund od wprowadzenia danych przez użytkownika. |
startTime |
Właściwość startTime wskazuje, kiedy wystąpiło przesunięcie układu. Wartość startTime jest podawana w milisekundach i mierzona względem czasu zainicjowania wczytywania strony. |
duration |
Właściwość duration będzie zawsze mieć wartość 0 . Ta właściwość jest dziedziczona z interfejsu PerformanceEntry (interfejs LayoutShift rozszerza interfejs PerformanceEntry ). Czas trwania nie dotyczy jednak zdarzeń przesunięcia układu, więc ma wartość 0 . Informacje o interfejsie PerformanceEntry znajdziesz w specyfikacji. |
LayoutShiftAttribution
Interfejs LayoutShiftAttribution
opisuje pojedyncze przesunięcie pojedynczego DOM
. Jeśli podczas przesunięcia układu zmieni się wiele elementów, sources
właściwość zawiera wiele wpisów.
Na przykład poniższy plik JSON odpowiada przesunięciu układu z jednym źródłem:
przesunięcie w dół elementu DOM <div id='banner'>
z y: 76
na
y:246
// ...
"sources": [
{
"node": "div#banner",
"previousRect": {
"x": 311,
"y": 76,
"width": 4,
"height": 18,
"top": 76,
"right": 315,
"bottom": 94,
"left": 311
},
"currentRect": {
"x": 311,
"y": 246,
"width": 4,
"height": 18,
"top": 246,
"right": 315,
"bottom": 264,
"left": 311
}
}
]
Właściwość node
identyfikuje element HTML, który przesunął się. Najechanie kursorem
w Narzędziach deweloperskich podświetla odpowiedni element strony.
Właściwości previousRect
i currentRect
raportują rozmiar i pozycję
węzła.
- Współrzędne
x
iy
wskazują współrzędne X i Y. odpowiednio w lewym górnym rogu elementu - Właściwości
width
iheight
raportują odpowiednio szerokość i wysokość. elementu. - Właściwości
top
,right
,bottom
ileft
zgłaszają x lub y wartości współrzędnych odpowiadających danej krawędzi elementu. W innym słów, wartośćtop
jest równay
; wartośćbottom
jest równay+height
Jeśli wszystkie właściwości elementu previousRect
mają wartość 0, oznacza to, że element
pojawiło się
w widoku. Jeśli wszystkie właściwości obiektu currentRect
mają wartość 0, oznacza to,
że element
przesunął się poza widok.
Jedną z najważniejszych kwestii podczas interpretacji tych wyników jest to, że elementy wymienione jako źródła to elementy, które przesunęły się w czasie przesunięcia układu. Możliwe jest jednak, że te elementy są tylko pośrednio związanych z „główną przyczyną” lub niestabilność układu. Oto kilka przykładów:
Przykład 1
To przesunięcie układu zostałoby zarejestrowane z 1 źródłem: element B. Jednak główną przyczyną tego przesunięcia układu jest zmiana rozmiaru elementu A.
Przykład 2
Przesunięcie układu w tym przykładzie zostałoby zaraportowane z użyciem 2 źródeł: element A i elementu B. Główną przyczyną tego przesunięcia układu jest zmiana położenia element A.
Przykład 3
W tym przykładzie przesunięcie układu zostałoby odnotowane z 1 źródłem: elementem B. Zmiana pozycji elementu B spowodowała to przesunięcie układu.
Przykład 4
Chociaż element B zmienia rozmiar, w tym przykładzie nie ma przesunięcia układu.
Obejrzyj prezentację dotyczącą raportowania zmian DOM przez interfejs Layout Instability API.
Narzędzia deweloperskie
Panel wydajności
W panelu Funkcje w panelu Skuteczność w Narzędziach deweloperskich widoczne są wszystkie przesunięcia układu, które mają miejsce podczas danego zrzutu wydajności – nawet jeśli występują w ciągu 500 ms od interakcji użytkownika i dlatego nie są uwzględniane w CLS. Najechanie kursorem na konkretne przesunięcie układu w panelu Eksperymenty do odpowiedniego elementu DOM.
Aby wyświetlić więcej informacji o przesunięciu układu, kliknij to przesunięcie, a potem
otwórz panel Podsumowanie. Zmiany wymiarów elementów są widoczne na liście.
użyj formatu [width, height]
; zmiany pozycji elementu są podane
musi mieć format [x,y]
. Właściwość Podano ostatnio dane wskazuje, czy
przesunięcie układu nastąpiło w ciągu 500 ms od interakcji użytkownika.
Informacje o czasie trwania przesunięcia układu znajdziesz na karcie Dziennik zdarzeń. Czas trwania przesunięcia układu można również oszacować, patrząc na Panel eksperymentu odpowiadający długości czerwonego prostokąta przesunięcia układu.
Więcej informacji o korzystaniu z panelu Skuteczność znajdziesz w artykule Skuteczność Analiza Plik referencyjny.
Wyróżnij regiony przesunięcia układu
Wyróżnianie regionów przesunięcia układu może być pomocną techniką generowania z szybkim podglądem lokalizacji i czasu przesunięć układu na stronie.
Aby włączyć regiony przesunięcia układu w Narzędziach deweloperskich, kliknij Ustawienia > Więcej narzędzi > Renderowanie > Regiony przesunięcia układu, a następnie odśwież stronę, którą chcesz debugować. Obszary przesunięcia układu są krótko podświetlone na fioletowo.
Proces myślenia przy identyfikowaniu przyczyny przesunięć układu
Aby znaleźć przyczynę przesunięć układu, wykonaj te czynności niezależnie od tego, kiedy i w jaki sposób doszło do przesunięcia układu. Te czynności można wykonać uzupełniony o uruchomienie Lighthouse. Pamiętaj jednak, że możesz identyfikować przesunięcia układu, które miały miejsce podczas początkowego wczytywania strony. W Ponadto Lighthouse może wyświetlać sugestie tylko w przypadku niektórych przyczyn układu przesunięciami, na przykład elementów graficznych, które nie mają wyraźnie określonej szerokości i wysokości;
Identyfikowanie przyczyny przesunięcia układu
Przesunięcia układu mogą być spowodowane tymi zdarzeniami:
- Zmiany położenia elementu DOM
- Zmiany wymiarów elementu DOM
- Wstawienie lub usunięcie elementu DOM
- Animacje, które aktywują układ
Element DOM bezpośrednio poprzedzający przesunięty element to element, który ma największe szanse na udział w „powodowaniu” przesunięcia układu. Dlatego gdy aby sprawdzić, dlaczego doszło do przesunięcia układu, rozważ:
- Czy zmieniły się położenie lub wymiary poprzedniego elementu?
- Czy element DOM został wstawiony lub usunięty przed przesunięciem?
- Czy pozycja przesuniętego elementu wyraźnie się zmieniła?
Jeśli poprzedni element nie spowodował przesunięcia układu, kontynuuj wyszukiwanie według z uwzględnieniem innych elementów poprzedzających i pobliskich.
Kierunek i odległość przesunięcia układu mogą też pomóc o głównej przyczynie. Na przykład duże przesunięcie w dół często wskazuje wstawienie elementu DOM, a przesunięcie układu o 1 lub 2 piksele często oznacza, stosowanie sprzecznych stylów CSS lub wczytywanie i stosowanie czcionka internetowa.
Oto niektóre zachowania, które najczęściej powodują przesunięcie układu wydarzenia:
zmiany położenia elementu (które nie są spowodowane ruchem innego elementu);
Taka zmiana ma często następujące przyczyny:
- Arkusze stylów, które są wczytywane późno lub zastępują wcześniej zadeklarowane style.
- Animacje i efekty przejść.
zmiany wymiarów elementu;
Taka zmiana ma często następujące przyczyny:
- Arkusze stylów, które są wczytywane późno lub zastępują wcześniej zadeklarowane style.
- Obrazy i elementy iframe bez atrybutów
width
iheight
, które ładują się po ich „boks”, została wyrenderowana. - Bloki tekstu bez atrybutów
width
lubheight
, które zastępują czcionki po elemencie Wyrenderowano tekst.
wstawianie lub usuwanie elementów DOM;
Zazwyczaj jest to spowodowane:
- Wstawianie reklam i innych elementów zewnętrznych.
- Wstawienie banerów, alertów i modałów.
- Nieskończone przewijanie i inne wzorce UX, które wczytują dodatkowe treści powyżej istniejących treści.
Animacje, które aktywują układ
Niektóre efekty animacji mogą być wywoływane
układ. Częstym
Przykładem tego jest sytuacja, gdy elementy DOM są „animowane”. zwiększając właściwości
np. top
lub left
, zamiast korzystać z CSS
transform
.
usłudze. Przeczytaj artykuł Tworzenie skutecznych animacji CSS.
.
Odtwarzanie przesunięć układu
Nie możesz skorygować przesunięć układu, których nie da się odtworzyć. Jednym z najprostszych, najlepsze sposoby na lepsze poznanie układu witryny Stabilne działanie witryny zajmuje 5-10 minut, zanim wchodzi ona w interakcję z celem. uruchamiają przesunięcia układu. Podczas wykonywania tej czynności pozostaw konsolę otwartą i użyj Layout Instability API do raportowania przesunięć układu.
Jeśli trudno jest znaleźć zmiany układu, powtórz to ćwiczenie z
różne urządzenia i szybkość połączenia. Zwłaszcza użycie wolniejszego
co ułatwia identyfikowanie zmian układu. Ponadto
możesz użyć instrukcji debugger
, aby ułatwić sobie przejście do układu
zmiany.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (!entry.hadRecentInput) {
cls += entry.value;
debugger;
console.log('Current CLS value:', cls, entry);
}
}
}).observe({type: 'layout-shift', buffered: true});
Wreszcie w przypadku problemów z układem, których nie da się odtworzyć w fazie opracowywania, weź pod uwagę używając interfejsu Layout Instability API w połączeniu z narzędziem logowania interfejsu w celu uzyskania dodatkowych informacji na ten temat. Wymelduj się przykładowy kod śledzenia największego przesuniętego elementu na stronie.