Interaction to Next Paint - opóźnienie prezentacji

Problemy z Interaction to Next Paint (INP) spowodowane opóźnieniem prezentacji

W naszej poprzedniej serii artykułów omawialiśmy Interaction to Next Paint oraz jak identyfikować problemy z Interaction to Next Paint. Jeśli chcesz zapoznać się z podstawami, to świetne miejsce na start!

W tym artykule skupię się na 'opóźnieniu prezentacji'. Omówię, jak wpływa to na Interaction to Next Paint, a następnie wyjaśnię, jak zoptymalizować opóźnienie prezentacji, aby poprawić Interaction to Next Paint!

W skrócie: Interaction to Next Paint (INP) mierzy, jak długo trwa, zanim użytkownik zobaczy zmianę wizualną na stronie po interakcji. INP można podzielić na 3 składniki: 'opóźnienie wejściowe', 'czas przetwarzania' i 'opóźnienie prezentacji'. Opóźnienie prezentacji jest głównym czynnikiem wpływającym na całkowity INP, stanowiąc średnio około 42% opóźnienia wejściowego.  Oznacza to, że optymalizacja prezentacji i uproszczenie HTML może znacząco wpłynąć na wynik INP Twojej strony.

Opóźnienie prezentacji: Czy kiedykolwiek kliknąłeś przycisk i zastanawiałeś się, dlaczego trwało ułamek sekundy zbyt długo, zanim zobaczyłeś wynik? To Interaction to Next Paint (INP) w akcji. Opóźnienie prezentacji to ostatni krok w procesie interakcji, który rozpoczyna się po przetworzeniu kliknięcia, ale przed wyświetleniem jakichkolwiek zmian wizualnych. 

Zrozumienie opóźnienia prezentacji

Prezentacja to końcowa faza interakcji, a opóźnienie prezentacji reprezentuje czas potrzebny przeglądarce na wyrenderowanie aktualizacji wizualnych następujących po interakcji. Opóźnienie prezentacji rozpoczyna się, gdy procedury obsługi zdarzeń dla interakcji zakończą działanie, i kończy się, gdy następna klatka (zawierająca zmiany wizualne) zostanie namalowana. Na opóźnienie prezentacji mogą wpływać różne czynniki, w tym złożoność układu, rozmiar DOM oraz ilość wymaganej pracy renderowania.

Interaction to Newt Paint (INP) można podzielić na 3 podczęści: 'Input Delay', 'Processing Time' i 'Presentation Delay'

Opóźnienie prezentacji a INP

Prezentacja to ostatnia faza INP. Średnio opóźnienie prezentacji stanowi około 42% całkowitego czasu INP.

W CoreDash zbieramy miliony punktów danych Core Web Vitals co godzinę. Na podstawie tych danych czas opóźnienia prezentacji stanowi 42% Interaction to Next Paint. 

Opóźnienie prezentacji: Wyobraź sobie, że przeglądasz na telefonie sklep internetowy w poszukiwaniu nowej pary butów. Klikasz na zdjęcie produktu, aby zobaczyć więcej szczegółów. Jednak Twój telefon jest nieco starszy i ma trudności z nadążeniem. W tej sytuacji możesz doświadczyć słabego wyniku Interaction to Next Paint (INP). Oto co się dzieje: Klikasz na zdjęcie (Interakcja). Telefon potrzebuje czasu na przetworzenie żądania i aktualizację wyświetlacza (Czas przetwarzania). Strona musi pobrać dodatkowe informacje o produkcie i wyrenderować nową stronę z większym zdjęciem i szczegółami (Może to być wolniejsze z powodu czynników takich jak wolne połączenie internetowe lub złożona strona produktu z wieloma elementami). W końcu zauważalną ilość czasu zajmuje pojawienie się nowych szczegółów produktu i zdjęcia na ekranie (Opóźnienie prezentacji). To opóźnienie w INP może być frustrujące dla użytkowników i dlatego ważne jest, aby je naprawić.

Zmniejszanie opóźnienia prezentacji

Minimalizacja opóźnienia prezentacji jest często konieczna, aby spełnić metrykę Interaction to Next Paint (INP) i utrzymać responsywność strony. Jedną skuteczną strategią jest minimalizacja rozmiaru Document Object Model (DOM). Mniejszy DOM generalnie prowadzi do szybszych czasów renderowania, ponieważ przeglądarka ma mniej treści do przetworzenia i zaktualizowania. Deweloperzy powinni dążyć do utrzymania małego i prostego DOM, stosując techniki takie jak leniwe ładowanie treści poza ekranem za pomocą właściwości content-visibility. Ponadto ważne jest, aby pamiętać o ilości pracy układu wywoływanej przez interakcję. Nadmierna praca układu może znacząco zwiększyć opóźnienie prezentacji, prowadząc do mniej responsywnego user experience.

Renderowanie HTML po stronie klienta może również wpływać na opóźnienie prezentacji, szczególnie w Single Page Applications (SPA). Gdy HTML jest dynamicznie tworzony po stronie klienta za pomocą JavaScript, może to skutkować długimi zadaniami, które blokują główny wątek, potencjalnie opóźniając prezentację następnej klatki. Deweloperzy powinni starannie rozważyć wpływ renderowania po stronie klienta na wydajność i dążyć do minimalizacji ilości dynamicznie generowanego HTML.

Identyfikacja długich opóźnień prezentacji

Aby zidentyfikować długie opóźnienia prezentacji, możesz użyć profilera wydajności Chrome. Otwórz devtools (Ctrl-shift-i), przejdź do zakładki wydajności, naciśnij nagrywanie i wejdź w interakcję ze stroną.,

Teraz możesz analizować oś czasu interakcji i wizualizować różne fazy, w tym opóźnienie prezentacji. Badając aktualizacje renderowania, które następują po zakończeniu procedur obsługi zdarzeń, możesz wskazać wszelkie wąskie gardła przyczyniające się do długiego opóźnienia prezentacji. 

Identyfikacja opóźnienia prezentacji za pomocą danych RUM

Więcej informacji o przyczynach opóźnienia prezentacji dzięki Long Animation Frames

API Long Animation Frames (LoAF) dostarcza szczegółowych informacji o przyczynach opóźnień renderowania, w tym tych występujących podczas interakcji użytkownika. To API udostępnia czasy i inne dane, które mogą pomóc deweloperom wskazać konkretne przyczyny wolnych interakcji i odpowiednio zoptymalizować kod. Narzędzia RUM takie jak CoreDash oferują wsparcie dla LoAF i dostarczają dodatkowych informacji o długich klatkach animacji, takich jak dane atrybucji skryptów. Narzędzia te mogą pomóc deweloperom zrozumieć, które skrypty przyczyniają się do opóźnień renderowania i zoptymalizować bazę kodu dla lepszej responsywności.