Debuguj przesunięcia układu

Dowiedz się, jak rozpoznawać i naprawiać przesunięcia układu.

Katie Hempenius

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, że PerformanceObserver. powinien sprawdzić wpis wydajności przeglądarki bufor dla wpisów dotyczących wydajności, które zostały utworzone przed jego zainicjowanie. W efekcie PerformanceObserver 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:

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 i y wskazują współrzędne X i Y. odpowiednio w lewym górnym rogu elementu
• Właściwości width i height raportują odpowiednio szerokość i wysokość. elementu.
• Właściwości top, right, bottom i left zgłaszają x lub y wartości współrzędnych odpowiadających danej krawędzi elementu. W innym słów, wartość top jest równa y; wartość bottom jest równa y+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 i height, które ładują się po ich „boks”, została wyrenderowana.
• Bloki tekstu bez atrybutów width lub height, 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.