Debuguj przesunięcia układu

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

Katie Hempenius
Katie Hempenius
X

Pierwsza część tego artykułu omawia narzędzia do debugowania zmian układu, a druga – proces myślenia, którego należy użyć do określenia przyczyny zmiany układu.

Narzędzia

Interfejs Layout Instability API

Interfejs API niestabilności układu to mechanizm przeglądarki służący do pomiaru i raportowania zmian układu. Wszystkie narzędzia do debugowania przesunięć układu, w tym DevTools, są ostatecznie oparte na interfejsie Layout Instability API. Jednak bezpośrednie korzystanie z interfejsu Layout Instability API jest skutecznym narzędziem do debugowania ze względu na jego elastyczność.

Wykorzystanie

Ten sam kod fragmentu kodu, który mierzy skumulowane przesunięcie układu (CLS), może też służyć do debugowania przesunięć układu. Fragment kodu poniżej zapisuje w konsoli informacje o przesunięciu układu. Dzięki zapoznaniu się z tym plikiem dziennika dowiesz się, kiedy, gdzie i jak doszło do zmiany 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});

Podczas uruchamiania tego skryptu pamiętaj, że:

  • Opcja buffered: true wskazuje, że PerformanceObserver powinna sprawdzić bufor danych o wydajności przeglądarki pod kątem wpisów o wydajności, które zostały utworzone przed zainicjowaniem obserwatora. W rezultacie funkcja PerformanceObserver będzie raportować zmiany układu, które wystąpiły zarówno przed jej zainicjowaniem, jak i po nim. Pamiętaj o tym, gdy sprawdzasz logi konsoli. Początkowy napływ zmian układu może odzwierciedlać zaległości w raportowaniu, a nie nagłe wystąpienie wielu zmian układu.
  • Aby uniknąć wpływu na wydajność, funkcja PerformanceObserver czeka, aż główny wątek będzie bezczynny, aby przekazać informacje o zmianach układu. W zależności od obciążenia wątku głównego może wystąpić niewielkie opóźnienie między wystąpieniem zmiany układu a jej zarejestrowaniem w konsoli.
  • Ten skrypt ignoruje zmiany układu, które nastąpiły w ciągu 500 ms od wprowadzenia danych przez użytkownika, i dlatego nie są one uwzględniane w wyrażeniu CLS.

Informacje o zmianach układu są raportowane za pomocą kombinacji 2 interfejsów API: LayoutShift i LayoutShiftAttribution. W następnych sekcjach znajdziesz więcej informacji o każdym z tych interfejsów.

LayoutShift

Każda zmiana układu jest zgłaszana za pomocą interfejsu LayoutShift. Treść wpisu wygląda tak:

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 zmianę układu, podczas której 3 elementy DOM zmieniły położenie. Wynik przesunięcia układu w przypadku tego konkretnego przesunięcia układu wynosił 0.175.

Oto właściwości wystąpienia LayoutShift, które są najbardziej przydatne do debugowania przesunięć układu:

Właściwość Opis
sources Właściwość sources zawiera listę elementów DOM, które zostały przeniesione podczas zmiany 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, raportowane są 5 największych (mierzonych pod kątem wpływu na stabilność układu) źródeł przesunięcia układu. Te informacje są raportowane za pomocą interfejsu LayoutShiftAttribution (więcej informacji znajdziesz poniżej).
value Usługa value raportuje wynik przesunięcia układu dla konkretnego 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 nastąpiła zmiana układu. Wartość startTime jest podawana w milisekundach i jest mierzona w odniesieniu do czasu zainicjowania wczytywania strony.
duration Właściwość duration będzie zawsze ustawiona na 0. Ta właściwość jest dziedziczona z interfejsu PerformanceEntry (interfejs LayoutShift rozszerza interfejs PerformanceEntry). Jednak pojęcie czasu trwania nie ma zastosowania do zdarzeń zmiany układu, więc jest ono ustawione na 0. Informacje o interfejsie PerformanceEntry znajdziesz w specyfikacji.

LayoutShiftAttribution

Interfejs LayoutShiftAttribution opisuje pojedynczy przesunięcie pojedynczego elementu DOM. Jeśli podczas przesunięcia układu przesuwa się wiele elementów, właściwość sources zawiera wiele wpisów.

Na przykład poniższy kod JSON odpowiada przesunięciu układu z 1 źródłem: przesunięcie w dół elementu DOM <div id='banner'> z pozycji y: 76 do pozycji 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 został przesunięty. Najechanie kursorem na tę właściwość w Narzędziach deweloperskich podświetla odpowiadający element strony.

Właściwości previousRect i currentRect podają rozmiar i położenie węzła.

  • współrzędne x i y podają odpowiednio współrzędną X i Y lewego górnego rogu elementu;
  • Właściwości width i height podają odpowiednio szerokość i wysokość elementu.
  • Właściwości top, right, bottom i left podają wartości współrzędnych x lub y odpowiadające danej krawędzi elementu. Innymi słowy, wartość top jest równa y, a wartość bottom jest równa y+height.

Jeśli wszystkie właściwości previousRect mają wartość 0, oznacza to, że element został przesunięty do widoku. Jeśli wszystkie właściwości elementu currentRect mają wartość 0, oznacza to, że element jest poza widokiem.

Najważniejsze, co należy wiedzieć podczas interpretowania tych danych wyjściowych, to fakt, że elementy wymienione jako źródła to elementy, które zostały przesunięte podczas zmiany układu. Możliwe jednak, że te elementy są tylko pośrednio powiązane z „główną przyczyną” niestabilności układu. Oto kilka przykładów:

Przykład 1

Ta zmiana układu zostałaby zgłoszona z jednego źródła: elementu B. Jednak główną przyczyną tego przesunięcia układu jest zmiana rozmiaru elementu A.

Przykład pokazujący zmianę układu spowodowaną zmianą wymiarów elementu

Przykład 2

W tym przykładzie zmiana układu zostałaby zgłoszona z 2 źródłami: elementem A i elementem B. Główną przyczyną tego przesunięcia układu jest zmiana pozycji elementu A.

Przykład pokazujący zmianę układu spowodowaną zmianą pozycji elementu

Przykład 3

W tym przykładzie zmiana układu zostałaby zaraportowana z jednym źródłem: elementem B. Zmiana pozycji elementu B spowodowała przesunięcie układu.

Przykład pokazujący zmianę układu spowodowaną zmianą pozycji elementu

Przykład 4

Chociaż element B zmienia rozmiar, w tym przykładzie nie ma przesunięcia układu.

Przykład elementu, który zmienia rozmiar, ale nie powoduje zmiany układu

Obejrzyj prezentację, jak zmiany DOM są zgłaszane przez interfejs API niestabilności układu.

Narzędzia deweloperskie

Panel wydajności

W panelu Wrażenia w panelu Wydajność w DevTools wyświetlają się wszystkie przesunięcia układu, które występują podczas danego śledzenia wydajności, nawet jeśli występują w ciągu 500 ms od interakcji użytkownika i dlatego nie są uwzględniane w wyrażeniu CLS. Najechanie kursorem na konkretne przesunięcie układu w panelu Doświadczenie podświetla element DOM, na który ma ono wpływ.

Zrzut ekranu przedstawiający zmianę układu wyświetlaną w panelu Sieć w Narzędziach deweloperskich

Aby wyświetlić więcej informacji o przesunięciu układu, kliknij przesunięcie układu, a następnie otwórz panel Podsumowanie. Zmiany wymiarów elementu są wyświetlane w formacie [width, height], a zmiany jego pozycji – w formacie [x,y]. Właściwość Had recent input (Ostatnie dane wejściowe) wskazuje, czy zmiana układu nastąpiła w ciągu 500 ms od interakcji użytkownika.

Zrzut ekranu z kartą „Podsumowanie” w Narzędziach dla programistów w przypadku przesunięcia układu

Informacje o czasie trwania zmiany układu znajdziesz na karcie Dziennik zdarzeń. Czas trwania zmiany układu można też oszacować, sprawdzając w panelu Doświadczenie długość czerwonego prostokąta zmiany układu.

Zrzut ekranu z kartą „Event Log” (Rejestr zdarzeń) w Narzędziach dla programistów w przypadku przesunięcia układu

Więcej informacji o używaniu panelu Wydajność znajdziesz w tabelce referencyjnej dotyczącej analizy skuteczności.

Podświetlanie regionów przesunięcia układu

Podświetlanie regionów przesunięcia układu może być przydatną techniką, która pozwala szybko i na pierwszy rzut oka określić lokalizację i czas przesunięcia 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 będą krótko wyróżnione na różowo.

Sposób identyfikowania przyczyn przesunięć układu

Wykonaj podane niżej czynności, aby określić przyczynę zmian układu, niezależnie od tego, kiedy i jak do nich doszło. Możesz je uzupełnić o wykorzystanie Lighthouse. Pamiętaj jednak, że Lighthouse może wykryć tylko przesunięcia układu, które wystąpiły podczas początkowego wczytywania strony. Poza tym Lighthouse może podać sugestie tylko w przypadku niektórych przyczyn zmian układu, np. elementów obrazu, które nie mają wyraźnej szerokości ani wysokości.

Identyfikowanie przyczyny przesunięcia układu

Zmiany układu mogą być spowodowane przez te zdarzenia:

  • Zmiany pozycji elementu DOM
  • Zmiany wymiarów elementu DOM
  • wstawianie lub usuwanie elementu DOM;
  • Animacje, które wywołują układ

W szczególności element DOM bezpośrednio poprzedzający przesunięty element jest elementem, który najprawdopodobniej „spowodował” przesunięcie układu. Dlatego podczas sprawdzania, dlaczego doszło do przesunięcia układu, weź pod uwagę:

  • Czy pozycja lub wymiary poprzedniego elementu uległy zmianie?
  • Czy przed przesuniętym elementem został wstawiony lub usunięty element DOM?
  • Czy pozycja przesuniętego elementu została zmieniona?

Jeśli poprzedni element nie spowodował zmiany układu, kontynuuj wyszukiwanie, biorąc pod uwagę inne poprzednie elementy i elementy znajdujące się w pobliżu.

Dodatkowo kierunek i odległość przesunięcia układu mogą wskazywać na przyczynę. Na przykład duży przesunięcie w dół często wskazuje na wstawienie elementu DOM, a przesunięcie układu o 1 px lub 2 px często wskazuje na zastosowanie sprzecznych stylów CSS lub wczytanie i zastosowanie czcionki internetowej.

Diagram pokazujący zmianę układu spowodowaną wymianą czcionki
W tym przykładzie zamiana czcionki spowodowała przesunięcie elementów strony o 5 pikseli w górę.

Oto niektóre z działań, które najczęściej powodują przesunięcia układu:

zmiany pozycji elementu (które nie są spowodowane ruchem innego elementu);

Ten typ zmiany jest często spowodowany:

  • Arkusze stylów, które są ładowane późno lub zastępują wcześniej zadeklarowane style.
  • efekty animacji i przejść;

zmiany wymiarów elementu,

Ten typ zmiany jest często spowodowany:

  • Arkusze stylów, które są ładowane późno lub zastępują wcześniej zadeklarowane style.
  • obrazy i ramki iframe bez atrybutów width i height, które są renderowane po wyświetleniu ich „miejsca”;
  • Bloki tekstowe bez atrybutów width lub height, które zamieniają czcionki po renderowaniu tekstu.

wstawianie lub usuwanie elementów DOM;

Zwykle jest to spowodowane:

  • Wstawianie reklam i innych elementów innych firm.
  • Wstawianie banerów, alertów i modali.
  • Nieskończone przewijanie i inne wzorce interakcji, które wczytują dodatkowe treści nad istniejącymi treściami.

Animacje, które wywołują układ

Niektóre efekty animacji mogą uruchomić układ. Typowym przykładem jest sytuacja, gdy elementy DOM są „animowane” przez zwiększanie wartości właściwości takich jak top lub left zamiast używania właściwości transform w CSS. Więcej informacji znajdziesz w artykule Tworzenie wydajnych animacji CSS.

Odtwarzanie przesunięć układu

Nie możesz naprawić przesunięć układu, których nie możesz odtworzyć. Jednym z najprostszych, a jednocześnie najskuteczniejszych sposobów na uzyskanie lepszego pojęcia stabilności układu witryny jest poświęcenie 5–10 minut na interakcję z witryną w celu wywołania zmian układu. Podczas tego procesu miej otwartą konsolę i używaj interfejsu API niestabilności układu, aby zgłaszać zmiany układu.

Jeśli trudno Ci znaleźć zmiany układu, powtórz to ćwiczenie na różnych urządzeniach i przy różnych szybkościach połączenia. W szczególności wolniejsze połączenie ułatwia wykrywanie zmian układu. Aby ułatwić sobie przechodzenie przez zmiany układu, możesz też użyć instrukcji debugger.

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});

W przypadku problemów z układem, których nie można odtworzyć podczas tworzenia aplikacji, rozważ użycie interfejsu API niestabilności układu w połączeniu z ulubionym narzędziem do rejestrowania danych na poziomie interfejsu użytkownika, aby zebrać więcej informacji o tych problemach. Sprawdź przykład kodu, który pozwala śledzić największy przesunięty element na stronie.