Opanowanie INP: jak wykorzystać widoczność treści w celu zwiększenia responsywności

Chcesz poznać sekret responsywnych stron internetowych, płynniejszego UX i doskonałego wyniku INP?

To wydajne renderowanie.

Zwykle osiąga się to poprzez kontrolowanie renderowania treści poza ekranem i odciążanie przeglądarki od wykonywania zadań, które nie są natychmiast potrzebne podczas początkowego ładowania strony.

W kolejnych wierszach dowiesz się, jak wykorzystać właściwość CSS dotyczącą widoczności treści , aby znacznie poprawić wydajność witryny, zwiększyć podstawowe wskaźniki internetowe i poprawić komfort użytkowania.

Czytaj.

Kwantyfikacja reakcji na podstawie interakcji z następną farbą (INP)

90% czasu użytkownika spędzanego na stronie spędza się po jej załadowaniu.

Innymi słowy, równie ważne jak inwestowanie w przyspieszenie początkowego ładowania strony, równie ważne jest to, jak zachowuje się Twoja witryna, gdy użytkownik zacznie z nią wchodzić w interakcję.

Czy to błąd? Czy zapewnia płynne przewijanie? Czy jest responsywny?

Wszystkie odpowiedzi są ukryte za Twoim wynikiem INP.

Interakcja z Next Paint to miernik wydajności zorientowany na użytkownika i następca opóźnienia pierwszego wejścia, używany do oceny responsywności strony internetowej. W szczególności mierzy czas potrzebny stronie internetowej, aby wizualnie zareagować na dane wejściowe użytkownika.

Słowem kluczowym jest tutaj „wizualnie”.

Nikt nie oczekuje, że wszystkie Twoje interakcje zostaną wykonane w ciągu kilku milisekund. To po prostu niemożliwe. Wszystko, co musisz zrobić, aby uzyskać dobry wynik INP i Core Web Vitals, to zapewnić natychmiastową wizualną informację zwrotną na temat działań osób odwiedzających Twoją witrynę.

Wracając do początku naszego artykułu, zapewnienie wydajnego renderowania stron przez przeglądarkę to pewny sposób na osiągnięcie doskonałych wyników i wrażeń w świecie rzeczywistym.

Dwa krytyczne czynniki, które znacząco wpływają na szybkość renderowania, to główny wątek i rozmiar DOM.

Rola głównego wątku i rozmiar DOM

Zanim zagłębimy się w szczegóły techniczne, zróbmy trochę porządków.

Twój wynik INP zależy od tego, jak szybko przeglądarka zwraca użytkownikowi wizualną informację po interakcji z Twoją witryną.

Aby przeglądarka mogła szybko odbierać, przetwarzać i prezentować informacje zwrotne, jej główny wątek musi być odciążony od długotrwałych zadań.

Do największych winowajców zaliczają się duże zasoby JavaScriptu i, co nie mniej ważne, duży rozmiar DOM.

To jest proces. Teraz wyjaśnijmy tajemnicę każdej części.

Główny wątek

Wątek główny to główny wątek wykonawczy, który obsługuje większość krytycznych zadań związanych z renderowaniem strony internetowej, w tym:

• Analiza HTML, CSS
• Wykonanie JavaScriptu
• budowa Obiektowego Modelu Dokumentu (DOM)
• dodawanie stylów obliczeniowych
• tworzenie drzewa układu
• tworzenie rekordów farb

Jeśli wykonanie zadania zajmuje ponad 50 ms , uważa się je za długie . Dzieje się tak głównie z powodu intensywnie działających plików JavaScript lub dużego rozmiaru DOM.

Powinieneś wiedzieć, że główny wątek może wykonywać tylko jedno zadanie na raz. Im dłuższe są zadania, tym wolniejsza będzie Twoja witryna.

Dlaczego?

Wyobraź sobie, że masz stronę internetową z funkcją interaktywną, taką jak złożona wizualizacja danych lub dynamiczny interfejs użytkownika. Użytkownik uruchamia akcję, na przykład klikając przycisk, co inicjuje ciężkie obliczenia JavaScript (wykonanie trwa dłużej niż 50 ms).

To automatycznie stwarza kilka wyzwań dla wydajności i szybkości reakcji Twojej witryny:

1. Te długie obliczenia blokują wątek, uniemożliwiając mu wykonywanie innych zadań, takich jak obsługa danych wejściowych użytkownika, renderowanie aktualizacji lub wykonywanie innych skryptów.
2. Podczas wykonywania obliczeń użytkownik może próbować wchodzić w interakcję z innymi częściami strony — przewijać, klikać inne przyciski lub pisać w polach wejściowych. Jednak te działania nie zostaną przetworzone natychmiast, a strona będzie wyglądać na zawieszoną lub nie odpowiadającą.
3. Jeśli interakcja użytkownika miała wywołać zmianę wizualną (np. podświetlenie przycisku po kliknięciu), informacja zwrotna zostanie opóźniona do czasu zakończenia długotrwałego zadania.

Krótko mówiąc, bardzo ważne jest odciążenie zadań od głównego wątku, a my znamy co najmniej 7 sposobów, jak można to zrobić.

DOM (obiektowy model dokumentu)

Jednym z głównych zadań wątku jest analizowanie kodu HTML.

Oznacza to, że przeglądarka zamienia dane (znaczniki HTML) na DOM.

DOM reprezentuje strukturę strony jako drzewo obiektów używanych przez przeglądarkę do renderowania treści na ekranie.

Większy DOM zazwyczaj oznacza więcej węzłów (elementów, tekstu, komentarzy itp.), którymi może zarządzać przeglądarka.

Kiedy masz duży rozmiar DOM, główny wątek ma więcej pracy do wykonania. Analiza kodu HTML w modelu DOM, zastosowanie stylów CSS, układ strony i ponowne renderowanie części strony po wystąpieniu zmian (np. w wyniku manipulacji JavaScriptem) zajmuje więcej czasu.

Duże drzewa DOM mogą również spowalniać interakcje na stronach, ponieważ każda interakcja użytkownika (taka jak kliknięcia, przewijanie i pisanie) często wymaga od przeglądarki ponownego obliczenia stylów i układu części DOM.

Zatem dobrą zasadą jest, aby strona miałarozmiar DOM do 1400 węzłów.

Jednym ze sposobów poprawy wydajności głównego wątku i złagodzenia wpływu dużego DOM jest kontrolowanie renderowania treści poza ekranem.

A ta właściwość CSS może Ci w tym pomóc…

Wykorzystaniewidoczności treściw celu lepszego renderowania

Właściwość CSS dotycząca widoczności treści to przełomowy dodatek do zestawu narzędzi optymalizacji wydajności sieci.

Ta właściwość, szczególnie w ustawieniu automatycznym, odgrywa kluczową rolę w zwiększaniu wydajności renderowania stron internetowych. Atrybut content-visibility: auto informuje przeglądarkę, że może pominąć renderowanie i obliczenia układu elementu, dopóki nie będzie potrzebny, co zwykle ma miejsce w momencie, gdy element wchodzi do rzutni.

Po zastosowaniu content-visibility: auto pozwala przeglądarce zoptymalizować obciążenie renderowaniem. Opóźniając renderowanie niewidocznej treści, widoczność treści znacznie skraca początkowy czas ładowania i zmniejsza obciążenie głównego wątku, co prowadzi do szybszego renderowania i lepszej responsywności strony internetowej.

Praktycznym przykładem, w którym widoczność treści: auto świeci, jest optymalizacja interakcji do następnego malowania.

Na przykład w przypadku wpisu na blogu z wieloma komentarzami lub długo przewijanej witryny z wiadomościami zastosowanie opcji content-visibility: auto do poszczególnych komentarzy lub artykułów informacyjnych, które nie są od razu widoczne, gwarantuje, że przeglądarka będzie reagować na interakcje użytkownika i szybko ładuje widoczną treść.

Oto prosty sposób na jego wdrożenie:

Warto jednak wiedzieć, że nie jest to rozwiązanie uniwersalne. Do widoczności treści należy podejść z zachowaniem równowagi, testując jej wpływ na różnych urządzeniach i przeglądarkach, aby zapewnić stałą wydajność i uniknąć nieprzewidzianych zmian układu lub problemów z dostępnością.

Widoczność treści w działaniu

Podczas naszego webinaru z Google na temat „Optymalizacji INP” mieliśmy okazję zademonstrować wpływ widoczności treści i sposobu, w jaki NitroPack ją wykorzystuje.

Zidentyfikowaliśmy główną przyczynę słabego INP za pomocą kilku narzędzi – rozszerzenia Web Vitals, Chrome DevTools i profilera wydajności.

W trakcie tego procesu odkryliśmy, że głównymi winowajcami powodującymi wynik INP wynoszący 272 ms były dwa zdarzenia „Styl ponownego obliczenia”, których przetworzenie zajęło 69,87 ms i wpłynęło na 1139 elementów.

Włączając NitroPack na stronie, nasz serwis automatycznie wykrył elementy, które skorzystałyby na widoczności treści: auto . Po szybkiej konfiguracji udało nam się ponad dwukrotnie skrócić czas renderowania długich zadań i liczbę dotkniętych elementów:

Ponadto wynik INP poprawił się z „wymaga poprawy” do „dobry”.

Przygotuj swoją witrynę na przyszłość i przekaż INP na autopilocie. Zdobądź NitroPack teraz →

Dodatkowe wskazówki dotyczące optymalizacji INP

Niewątpliwie widoczność treści zapewnia duży wzrost wydajności przy minimalnym wysiłku.

Jednak w niektórych przypadkach możesz potrzebować dodatkowej mocy, aby zagwarantować płynną reakcję i dobre wyniki INP. Jeśli tak się stanie, oto kilka innych strategii optymalizacji INP, które możesz wykorzystać:

1. Poddaj się głównemu wątku

Jak już wiesz, wydajność Twojej witryny w dużym stopniu zależy od tego, jak zajęty jest główny wątek. Uleganie głównemu wątkowi odnosi się do praktyki celowego dzielenia długotrwałych zadań na mniejsze, łatwiejsze do zarządzania fragmenty, aby uniknąć blokowania głównego wątku przez dłuższy czas.

Można to osiągnąć za pomocą funkcji plastycznych, takich jak:

• harmonogram.wydajność()
• ustaw limit czasu
• żądanie ramki animacji
• żądanieIdleCallback

2. Zmniejsz rozmiar DOM

Drugim wymienionym winowajcą responsywności był rozmiar DOM. Posiadanie dużego DOM może znacząco utrudniać przekazywanie INP. Aby temu zapobiec, ważne jest zminimalizowanie jego rozmiaru, a dokładniej ograniczenie głębokości DOM.

Cel ten można osiągnąć za pomocą różnych strategii:

• Unikaj wtyczek i motywów, które są źle zakodowane.
• Ogranicz użycie JavaScript do tworzenia węzłów DOM.
• Wybierz alternatywy dla programów do tworzenia stron znanych z tworzenia nadmiernej ilości kodu HTML.
• Rozważ podzielenie jednostronicowej witryny internetowej na kilka stron.
• Unikaj ukrywania niepotrzebnych elementów za pomocą właściwości Display: none CSS.
  

3. Unikaj nakładania się interakcji

Nakładanie się interakcji ma miejsce, gdy użytkownik wchodzi w interakcję z innym elementem strony przed zakończeniem renderowania pierwszej interakcji. Dzieje się tak często podczas szybkiego pisania w polach formularzy, gdzie szybko następuje wielokrotne naciśnięcie klawiszy.

Aby to zoptymalizować, rozważ:

• Implementacja odbicia na wejściach w celu zmniejszenia częstotliwości wywołań zwrotnych zdarzeń.
• Wykorzystanie AbortController do anulowania bieżących żądań pobrania, zapobiegając przeciążeniu głównego wątku z powodu nadmiernych wywołań zwrotnych pobierania.
  

Zakończyć

Pamiętaj – INP polega na umożliwieniu przeglądarce jak najszybszego pomalowania kolejnego ekranu.

Użytkownicy chcą wiedzieć, że ich działania są przetwarzane i że coś dzieje się w tle.

A połączenie możliwości przeglądarki, takich jak widoczność treści, z potężnymi rozwiązaniami zwiększającymi wydajność sieci, takimi jak NitroPack, oznacza, że ​​uwzględniasz całe spektrum doświadczeń użytkownika – od początkowego ładowania po przeglądanie wszystkich stron.

Przetestuj NitroPack za darmo →