Odroczenie renderowania ciężkich treści

Strony internetowe z dużą ilością treści, np. z przewijaniem nieskończonym, złożonymi panelami lub długimi artykułami, mogą mieć problemy z powolnym renderowaniem początkowym i powolnymi interakcjami. Nowoczesne technologie internetowe umożliwiają odroczenie renderowania treści, które nie są od razu widoczne, co znacznie zwiększa wydajność bez pogarszania dostępności i niezgodności z oczekiwaniami użytkowników.

Aby zoptymalizować renderowanie, możesz użyć właściwości CSS content-visibility i atrybutu HTML hidden="until-found". Chociaż oba te rozwiązania pomagają zwiększać skuteczność, służą do różnych celów.

Kiedy używać którego rozwiązania

Jak wdrożyć content-visibility: auto

Wybieranie treści poza ekranem

OBOWIĄZKOWE: MUSISZ dokładnie określić, które elementy mają otrzymać content-visibility: auto.

• KIERUJ reklamy na duże, samodzielne bloki układu, które znajdują się ściśle poniżej początkowego widocznego obszaru (np. elementy kart w nieskończonym kanale, komentarze na końcu lub sekcje układu na dole).
• NIE stosuj tej właściwości do elementów w początkowym widocznym obszarze. Wymusza to na przeglądarce ocenę granic widoczności przed renderowaniem, co paradoksalnie opóźnia wczytywanie strony.
• KIERUJ na elementy o głębokich lub złożonych wewnętrznych strukturach DOM, aby zmaksymalizować oszczędności kosztów renderowania.

Etapy wdrażania

1. OBOWIĄZKOWO: określ ciężkie sekcje, które na pewno nie są widoczne na ekranie podczas początkowego wczytywania.
2. OBOWIĄZKOWO: zastosuj content-visibility: auto do każdego z tych elementów poza ekranem.
3. OBOWIĄZKOWE: podaj szacowany rozmiar struktury układu, używając atrybutu contain-intrinsic-size w każdym elemencie.

Jak używać karty contain-intrinsic-size

MANDATORY: You MUST pair content-visibility: auto with contain-intrinsic-size. Jeśli tego nie zrobisz, przeglądarka będzie musiała zwinąć element do wysokości 0 pikseli, gdy będzie on poza ekranem, co spowoduje poważne przesunięcie układu i skakanie paska przewijania podczas przewijania strony przez użytkownika.

Właściwość skrócona CSS contain-intrinsic-size działa jako wymiar zastępczy. Użycie słowa kluczowego auto umożliwia przeglądarce „zapamiętanie” dokładnego rozmiaru po ostatecznym wyrenderowaniu elementu i użycie tego obliczonego rozmiaru zamiast obiektu zastępczego, jeśli element ponownie zniknie z ekranu.

Przykładowy kod

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

Jak wdrożyć content-visibility: hidden

1. Zidentyfikuj ciężkie sekcje: znajdź bloki układu, które są początkowo ukryte (np. dodatkowe wiersze w dużej tabeli danych).
2. Zastosuj CSS: dodaj do elementu content-visibility: hidden.
3. Odkrywanie elementu: gdy element ma zostać odkryty, zmień właściwość content-visibility na visible lub auto.

Przykładowy kod

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Ponieważ content-visibility: hidden wyklucza element i jego elementy podrzędne z drzewa ułatwień dostępu i wyszukiwania na stronie, NIE używaj go, jeśli treść musi być możliwa do znalezienia, gdy jest ukryta. Jeśli chcesz, aby ukryte treści można było wyszukiwać za pomocą natywnej funkcji Znajdź na stronie, użyj hidden="until-found" zgodnie z opisem w artykule Wyszukiwanie ukrytych treści.

Sprawdzone metody

• TAK – używaj contain-intrinsic-size z content-visibility: auto. Jeśli tego nie zrobisz, wysokość będzie ponownie obliczana podczas przewijania, co spowoduje przeskakiwanie układu widocznego obszaru lub błędy wizualne.
• NIE stosuj content-visibility: auto do elementów w widocznym obszarze strony, ponieważ opóźnia to renderowanie kluczowych elementów strony.
• OBOWIĄZKOWA weryfikacja ułatwień dostępu: podczas stosowania content-visibility: auto MUSISZ sprawdzić, czy można uzyskać dostęp do elementów za pomocą klawiatury sekwencyjnej. W niektórych konfiguracjach technologii wspomagających osoby z niepełnosprawnością węzły poza ekranem, które korzystają z atrybutu content-visibility: auto, mogą być wykluczone z drzewa ułatwień dostępu lub sekwencyjnych ścieżek nawigacji, dopóki nie zostanie na nie wymuszone przeniesienie zaznaczenia. Przetestuj nawigację liniową poza granicami ekranu, używając tylko klawiatury.

Strategie zastępcze

content-visibility – kreacja zastępcza

Jeśli zasada content-visibility nie jest obsługiwana, przeglądarka ją zignoruje. W większości przypadków content-visibility: auto nie będzie potrzebować kreacji zastępczej, ale bez niej nie będzie można uzyskać wzrostu skuteczności. W nieobsługiwanej przeglądarce elementy content-visibility: hidden będą całkowicie widoczne. Użyj wykrywania funkcji, aby wdrożyć kreację zastępczą.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}