CSS Containment – nowy standard wspomagający renderowanie witryny

Zaledwie kilka dni temu pisałem o inicjatywie Web Vitals autorstwa Google, polegającej na skupieniu się na najważniejszych, realnych wskaźnikach prędkości witryny. Jeśli chcesz podkręcić swoje Core Web Vitals, lub jeśli Twoja strona najzwyczajniej „muli” nawet na długo po załadowaniu, to wiedz, że standardem webowym właśnie stała się nowa rzecz: CSS Containment.

CSS Containment wprowadza do języka arkuszy stylów nową właściwość: contain. Ma ona za zadanie wydzielić oznaczony nią element i jego potomstwo od reszty drzewa DOM.

Oznaczona w ten sposób część witryny staje się w pewnym sensie niezależna od pozostałych elementów. Przeglądarka wykonując różnego rodzaju zmiany na elementach drzewa, nie będzie musiała rekalkulować zmian w wyglądzie całej witryny. Znacznie oszczędzi to zasoby przeglądarki (a w domyśle także robotów) i może skrócić czas renderowania.

Kiedy CSS contain może pomóc w szybszym renderowaniu witryny? Jeśli podczas ładowania, a także po nim dokonują się na niej różnorakie zmiany:

  • zmiana fonta
  • zmiana wielkości okna przeglądarki
  • dołączanie lub odłączanie arkuszy stylów
  • zmiany contentu, choćby tak prozaiczne jak wypełnianie pola formularza przez użytkownika
  • za sprawą pseudo-klas CSS (jak np. najechanie myszką na element :hover)
  • skryptowe manipulowanie klasami i atrybutami

Dotyczy to właściwie wszystkich współczesnych stron internetowych, choć oczywiście nie dla wszystkich zastosowanie CSS contain przyniesie jakąś mierzalną różnicę.

Właściwość CSS contain może przybierać różnorakie wartości, które można ze sobą łączyć:

contain: size;

Wskazuje, że element może być przeskalowany bez badania rozmiaru zawartości.

contain: layout;

Stwarza niezależny kontekst formatowania, nic z zewnątrz nie wpływa na wygląd elementu i vice versa.

contain: paint;

Sprawia, że zawartość nie wyświetli się poza elementem; jeśli zawartość wykroczy poza element, stanie się niewidoczna.

contain: strict;

Skrót odpowiadający contain: size layout paint;

contain: content;

Skrót odpowiadający contain: layout paint;

Jeśli masz wątpliwości, czy CSS Containment może Ci jakoś pomóc, to odpowiedź brzmi jak zwykle – to zależy.

Z jednej strony, CSS contain to zabawa dla maniaków optymalizacji, której wyniki to czasem milisekundy poprawy.

Z drugiej strony, witryny z dużą ilością widgetów i boxów informacyjnych mogą tu zyskać znacznie więcej.


Pomogę Ci wybrać agencję SEO Konsultacja i wycena bez żadnych kosztów
Piotr Samojło

Freelancer działający pod marką Audytorium SEO. Jeśli masz pytania, lub szukasz człowieka od SEO i optymalizacji stron, zapraszam do kontaktu.

Zostaw komentarz

Twój adres e-mail nie zostanie upuibliczniony Pola wymagabe*

Historia pozycji keywordów, link opportunities i inne nowości w Ahrefs

Uważam, że Ahrefs to najlepszy kombajn do SEO na rynku. Ma swoje wady (np. fatalne…

15 godzin temu

Google skupi się na fragmentach stron – co to dokładnie znaczy?

Google właśnie zapowiedziało zmianę w swoim algorytmie, która po wdrożeniu znacznie zmieni ranking dla ok…

7 dni temu

Ahrefs Webmaster Tools czyli BARDZO przydatne darmowe narzędzie SEO

Ahrefs potężnym narzędziem jest i basta. A od teraz w dużym stopniu dostęp do tej…

1 miesiąc temu

Googlebot obsłuży HTTP/2, ale (na razie) nie wpłynie to na jakość indeksacji

Google ogłosiło na swoim blogu, że od połowy listopada 2020 Googlebot zyska zdolność do crawlowania…

1 miesiąc temu

Szybkość strony – poradnik dla początkujących

Co by było, gdybyśmy na szybkość witryny spojrzeli nie pod kątem punktów zdobywanych w teście…

2 miesiące temu

People cards – nowa funkcja testowana przez Google

Google testuje na rynku indyjskim nową funkcję, która po głębszym zastanowieniu wydaje się niemal rewolucyjna.…

2 miesiące temu

Firma prowadzona przez Afroamerykanów – nowe oznaczenie w Google Moja Firma

Google w amerykańskiej wersji Google Moja Firma (Google My Business) wprowadza nowe oznaczenie - Black-owned,…

3 miesiące temu

Google Guaranteed, czyli jak Google za $50 miesięcznie rozmienia na drobne swoje dziedzictwo

Google (a dokładniej spółka matka Alphabet) to korporacja. Korporacja ma za zadanie zarabiać i pomnażać…

3 miesiące temu

Rich Results Test wychodzi z bety, ale nie to jest najważniejsze

Google właśnie ogłosiło, że Rich Results Tool, narzędzie do testowania wyników rozszerzonych w SERPie, wyszło…

4 miesiące temu

Ta strona używa cookies.

Polityka prywatności