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.

Wyceń pozycjonowanie swojej strony








  • 0 of 500 max characters
    • Wyrażam zgodę na przetwarzanie moich danych osobowych przez Audytorium Piotr Samojło z siedzibą w Białymstoku ul Rzędziana 1E, 15-698 Białystok (dalej: Audytorium) zawartych w niniejszym formularzu kontaktowym w celu realizacji przesłanego zgłoszenia. Zostałem poinformowany/poinformowana o możliwości wycofania zgody w dowolnym czasie, poprzez przesłanie wiadomości e-mail na adres biuro@audytorium.xyz.

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*

Wraca polskojęzyczne forum dla webmasterów

Po ponad roku nieobecności Google postanowiło przywrócić polskojęzyczne forum dla webmasterów. Polska wersja forum dostępna…

2 tygodnie temu

Dziura w Google Site Kit pozwala przejąć dostęp do Google Search Console

Jeśli używasz oficjalnej wtyczki do Wordpressa: Google Site Kit, to zanim doczytasz do końca, przejdź…

3 tygodnie temu

Nowa inicjatywa Google warta uwagi: Web Vitals

Web Vitals to inicjatywa Google, polegająca na spriorytetyzowaniu działań optymalizacyjnych stron i aplikacji na podstawie…

4 tygodnie temu

MREID (Machine-Readable Entity IDs), czyli jak Google rozumie świat

Nie wiem, czy Cię to zdziwi, czy nie, ale Google prawie każdemu elementowi znanego mu…

1 miesiąc temu

Rank Math – wtyczka dobra, ale dziurawa. Zagrożone 200 000 stron na WordPressie

Jeśli do SEO na swoim Wordpressie używasz wtyczki Rank Math, to zalecam szybką aktualizację. W…

2 miesiące temu

Przechwytywanie domen – jak nie przegapić ani jednej dobrej domeny

Przechwytywanie wartościowych domen wciąż stanowi podstawę tworzenia solidnego zaplecza SEO - choć oczywiście oficjalnie nikt…

2 miesiące temu

Koronawirus ma już swoje… dane strukturalne

Zapewne, tak jak ja, macie już dosyć artykułów o koronawirusie. Zewsząd wypełźli specjaliści od wszystkiego,…

3 miesiące temu

Strony kategorii rankują lepiej niż strony produktów

Bardzo ciekawe badanie ujrzało światło dzienne podczas zakończonej właśnie konferencji SMX West w San Jose.…

3 miesiące temu

Co trzeba umieć, by wyróżnić się w SEO?

Truizmem jest stwierdzenie, że SEO ewoluuje i rozwija się w błyskawicznym tempie. Są trendy, języki…

4 miesiące temu

Ta strona używa cookies.

Polityka prywatności