Opublikowano: 30 października 2024 r.
Wprowadzenie wskaźnika interakcji do następnego wyrenderowania (INP) jako podstawowego wskaźnika internetowego na początku 2024 roku wzbudziło większe zainteresowanie wydajnością renderowania. Część INP dotyczy czasu potrzebnego przeglądarce na wyrenderowanie następnego obrazu po tym, gdy użytkownik rozpocznie interakcję ze stroną. Utrzymywanie niskiego wskaźnika INP witryny oznacza, że użytkownicy mają wrażenie, że reagują na ich interakcje tak szybko i bezproblemowo.
Ważne są też czynności związane z renderowaniem, które należy wykonywać podczas wczytywania strony, co może opóźnić rozpoczęcie interakcji. Warto znaleźć sposoby na zmniejszenie ilości pracy wykonywanej w tym kluczowym etapie cyklu życia strony. Usługa w ramach usługi porównawczej content-visibility to jeden ze sposobów na osiągnięcie tego celu. Z przyjemnością informujemy, że od września 2024 r. jest ona dostępna jako wartość domyślna.
content-visibility to właściwość CSS, która informuje klienta użytkownika, aby opóźniał renderowanie elementów do czasu, gdy zbliżą się do widoku. W przypadku stron z wieloma elementami DOM może to być korzystne, ponieważ początkowe wczytanie strony będzie uruchamiać mniej zadań związanych z renderowaniem. Zamiast tego praca odbywa się tuż przed wyświetleniem treści użytkownikowi.
content-visibility: auto do podzielonych obszarów treści zwiększa wydajność renderowania podczas początkowego wczytywania o 7 razy. Aby dowiedzieć się więcej, czytaj dalej.
Aby włączyć tę optymalizację dla elementów poza ekranem, zastosuj do nich regułę content-visibility: auto w arkuszu CSS witryny:
.render-me-later {
content-visibility: auto;
}
content-visibility działa zgodnie z niektórymi zachowaniami zdefiniowanymi dla właściwości contain w ograniczeniu do usługi porównywania cen. Celem ograniczania CSS jest zapewnienie izolacji części drzewa DOM. Umożliwia to ograniczenie operacji renderowania do określonej części drzewa DOM, dzięki czemu układ jest nieważny i jest ponownie tworzony tylko dla podzbioru drzewa DOM. Podczas stosowania tej funkcji do zwiększenia wydajności renderowania potrzebna jest pewna znajomość różnych wartości właściwości contain oraz tego, jak skutecznie z nich korzystać.
Gdy zastosujesz właściwość content-visibility: auto do elementów, automatycznie przyjmą one niektóre z właściwości podanych przez właściwość contain. W efekcie elementy, których dotyczy problem, będą początkowo renderowane o wysokości 0px, co oznacza, że nie będą renderowane.
Ma to jednak pewne skutki uboczne. Na przykład pasek przewijania na stronie może się przesuwać i zmieniać wysokość, gdy użytkownik przewija stronę w kierunku elementów, które nie zostały wcześniej wyrenderowane i które renderują się w odpowiednim momencie. Aby temu zapobiec, zastosuj właściwość contain-intrinsic-size.
Funkcja content-visibility jest dostępna od niedawna, więc możesz mieć wątpliwości dotyczące użytkowników z przeglądarkami, które nie zostały jeszcze zaktualizowane, aby korzystać z nowej usługi. Ponieważ content-visibility to właściwość CSS, nie musisz się tym zbytnio przejmować. Przeglądarki, które je rozumieją, będą z nich korzystać, a te, które tego nie robią, nie będą. Oznacza to, że oprócz zwiększenia wydajności przeglądarek obsługujących content-visibility możesz spodziewać się, że strony będą działać prawie tak samo.
content-visibility zapewnia dodatkową korzyść. Jeśli w niektórych przypadkach możesz użyć tej opcji, aby zmniejszyć obciążenie procesora podczas wczytywania strony, rozważ jej użycie, aby zapewnić stronom jak największą moc obliczeniową, gdy będą jej najbardziej potrzebować. Teraz, gdy ta przydatna funkcja jest dostępna jako nowa wartość domyślna, możesz z niej korzystać, aby użytkownicy mogli korzystać z renderowania, które ta funkcja omija, dopóki nie będzie to konieczne.