0Pricing
CSS Academy · Lekcja

Krytyczny CSS i blokowanie renderowania

Umieszczaj krytyczny CSS widoczny nad zgięciem bezpośrednio w dokumencie, a style niekrytyczne ładuj odroczone, aby wyeliminować blokowanie renderowania.

Krytyczny CSS i blokowanie renderowania to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Jak przeglądarka renderuje stronę

Przeglądarka przetwarza HTML do postaci DOM, CSS do postaci CSSOM, łączy je w drzewo renderowania, wykonuje układ, a następnie maluje. CSS blokuje renderowanie do czasu ukończenia CSSOM — każdy bajt CSS na ścieżce krytycznej opóźnia pierwsze malowanie.

Czym jest Critical CSS?

Critical CSS to minimalny zestaw stylów wymaganych do wyrenderowania treści widocznej bez przewijania. Umieszczenie go bezpośrednio w tagach <style> w sekcji <head> eliminuje żądanie arkusza stylów blokujące renderowanie początkowego widoku.

Zasoby blokujące renderowanie

Każdy element <link rel="stylesheet"> w sekcji head blokuje renderowanie. Skrypty bez async/defer również blokują analizowanie HTML. Ograniczenie zasobów blokujących renderowanie bezpośrednio poprawia Largest Contentful Paint (LCP) i First Contentful Paint (FCP).

Wyodrębnianie Critical CSS

Narzędzia takie jak critical (npm), Penthouse i ekstraktory oparte na Puppeteerze renderują stronę dla określonych rozmiarów obszaru widoku i przechwytują style stosowane do widocznych elementów. Wynik jest umieszczany bezpośrednio w dokumencie, a pełny arkusz stylów jest wczytywany asynchronicznie.

Asynchroniczne wczytywanie niekrytycznego CSS

Wczytaj pełny arkusz stylów bez blokowania renderowania, używając media="print" z zamianą po onload albo wzorca rel="preload" + as="style" + onload="this.rel='stylesheet'".

  <pre class="snippet">&lt;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" href="styles.css"&gt;&lt;/noscript&gt;</pre>

Zapytania o media jako wskazówki wczytywania

Pliki CSS wczytywane za pomocą niedopasowanego zapytania o media, np. media="print", są pobierane z niskim priorytetem i nie blokują renderowania. To klasyczna sztuczka umożliwiająca wczytywanie arkuszy stylów bez blokowania ścieżki krytycznej.

HTTP/2 i dzielenie CSS

Dzięki multipleksowaniu HTTP/2 dzielenie CSS na wiele małych plików wiąże się z mniejszym narzutem niż w HTTP/1. Wczytuj tylko CSS potrzebny dla danej trasy — home.css, checkout.css — zamiast jednego monolitycznego bundla zawierającego style dla każdej strony.

CSS i skaner preload

Skaner preload przeglądarki wcześnie wykrywa znaczniki arkuszy stylów <link> i rozpoczyna ich pobieranie, zanim parser HTML do nich dotrze. Upewnij się, że arkusze stylów znajdują się w sekcji <head>, a nie w body, aby skaner preload znalazł je odpowiednio wcześnie.

Pomiar wpływu blokowania renderowania

Panel Network w Chrome DevTools pokazuje czas blokowania zasobów na wykresie kaskadowym. Lighthouse zgłasza problem "Eliminate render-blocking resources" wraz z oszczędnościami dla poszczególnych zasobów. WebPageTest pokazuje renderBlockingResources w widoku klatek filmu.

Critical CSS po stronie serwera

Frameworki takie jak Next.js i Astro automatycznie umieszczają Critical CSS bezpośrednio w dokumencie podczas SSR. Serwer identyfikuje style dotyczące początkowego kodu HTML i umieszcza je w nim — nie jest wymagany etap wyodrębniania po stronie klienta.

Praktyczne kompromisy

Umieszczenie zbyt dużej ilości CSS bezpośrednio w dokumencie zwiększa rozmiar HTML, spowalnia TTFB i obniża efektywność buforowania (HTML nie jest buforowany tak długo jak pliki CSS). Docelowo umieszczaj w dokumencie nie więcej niż 14 KB Critical CSS, aby zmieścić się w pierwszym oknie przeciążenia TCP.

Sprawdzenie wiedzy

Dlaczego arkusz stylów blokujący renderowanie opóźnia First Contentful Paint?

Podsumowanie

Critical CSS umieszcza style treści widocznej bez przewijania bezpośrednio w dokumencie, eliminując opóźnienia związane z blokowaniem renderowania. Pozostały CSS należy wczytywać asynchronicznie za pomocą preload lub sztuczek z zapytaniami o media. Mierz wpływ za pomocą Lighthouse i DevTools oraz dąż do rozmiaru Critical CSS poniżej 14 KB, aby uzyskać optymalną wydajność.

Często zadawane pytania

Czy lekcja „Krytyczny CSS i blokowanie renderowania” jest bezpłatna?

Tak — pełny tekst „Krytyczny CSS i blokowanie renderowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Krytyczny CSS i blokowanie renderowania”?

Umieszczaj krytyczny CSS widoczny nad zgięciem bezpośrednio w dokumencie, a style niekrytyczne ładuj odroczone, aby wyeliminować blokowanie renderowania. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Krytyczny CSS i blokowanie renderowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Krytyczny CSS i blokowanie renderowania
  2. Układ, malowanie i kompozycja: potok renderowania
  3. will-change i promowanie do warstwy
  4. Pokrycie CSS i nieużywane style
← Powrót do CSS Academy