Krytyczny CSS to niezbędne fragmenty kodu, które wpływają na wyświetlanie pożądanych elementów strony internetowej w określonych miejscach, np. formularza kontaktu, animacji na stronie głównej, itd. Jakie dokładnie funkcje pełni krytyczny CSS i jak można go wygenerować?

Co to jest krytyczny CSS? 

Krytyczny CSS (z ang. critical CSS) to kod CSS, który jest potrzebny do wyświetlenia pierwszej, widocznej zawartości na stronie (tzw. above the fold content).

co to krytyczny css

Większość arkuszy stylów CSS złożonych jest z wielu linijek skomplikowanego kodu. To powoduje, że pełne ładowanie strony internetowej może trwać długo. Dzięki krytycznemu CSS, przeglądarka może załadować witrynę asynchronicznie.

Warto pamiętać, że czas ładowania wpływa na pozycjonowanie oraz na użytkowników. Dlatego należy systematycznie przeprowadzać testy. Natomiast do wyświetlania zawartości strony na ekranie, wystarczy jedynie część kodu, która nazywana jest krytycznym CSS. Takie rozwiązanie w początkowym etapie umożliwia załadowanie najważniejszych elementów i podstawowego widoku strony, a następnie pozostałego kodu HTML i CSS asynchronicznie. 

Jak działa krytyczny CSS?

Przeglądarki blokują renderowanie stron internetowych, co jest potrzebne do stworzenia tzw. drzewa renderowania. Po utworzeniu, dana przeglądarka ,,wie”, jak wyświetlić daną witrynę. Dlatego kod CSS powinien być możliwie najprostszy. Jednak w większości rozbudowanych witryn internetowych, kod jest złożony.

jak dziala krytyczny css

Przeglądarki pobierają zasoby strony, aby ją załadować. Jednak zdarza się, że znaczna część arkuszy stylów, często nie zostaje wyświetlona. Dlatego lepszym rozwiązaniem niż tworzenie wspólnego kodu CSS dla wszystkich kategorii, jest wyodrębnienie jego mniejszych części. Są one wyświetlane w przeglądarce, gdy zachodzi taka potrzeba. To sprawia, że strona nie ładuje się w całości, lecz według ważności poszczególnych elementów na podstawie wyodrębnionych części kodów CSS.

Jakie zalety ma krytyczny kod CSS?

Każda profesjonalna strona internetowa powinna posiadać krytyczny kod CSS.

Do jego kluczowych zalet należą:

  • Krótszy czas ładowania –  im prostszy kod CSS ładowany w pierwszej kolejności, tym krótszy czas ładowania strony internetowej, który wpływa na to, czy użytkownik wejdzie na stronę. Pełny widok strony powinien załadować się w mniej niż 3 sekundy.
  • Lepsze wyniki pozycjonowania – Google również docenia strony, które ładują się szybko i umieszcza je wyżej w wynikach wyszukiwania. Krótki czas wyświetlenia pełnego widoku strony, generuje większy ruch.
  • Przejrzystość kodu – zdarza się tak, że strona posiada nadmiarowe instrukcje CSS, przez co jej wydajność spada. Natomiast usunięcie nieużywanych lub powtarzalnych wyrażeń i dodanie krytycznych CSS sprawia, że kod staje się przejrzysty, a strona bardziej wydajna. 

Narzędzia do generowania krytycznego CSS

Obecnie krytyczny kod CSS można wygenerować za pomocą dostępnych narzędzi, co oszczędza czas.

Oto 2 możliwości generowania krytycznego kodu CSS:

Dla strony WordPress

LiteSpeed Cache – wtyczka przeznaczona do generowania krytycznego CSS na stronach WordPress. Opcja asynchronicznego ładowania CSS sprawia, że przeglądarka pobiera cały kod CSS z nagłówka strony, a następnie wyświetla pozostałe elementy. 

krytyczny css na wordpress

Po aktywacji tej opcji, kod CSS i HTML zostają załadowane jednocześnie, co znacznie skraca czas wyświetlenia strony widoku strony. Kolejną opcją jest wygenerowanie krytycznego CSS, która zostaje uruchomiona po aktywacji pierwszej. Dzięki temu LiteSpeed generuje krytyczny CSS i przesyła go dalej do LS Cache. Ostatnim trybem działania wtyczki jest wygenerowanie krytycznego CSS w tle. Dzięki temu użytkownik nie musi długo czekać na załadowanie strony. LS Cache z góry dodaje witrynę do kolejki opartej na zadaniach cron, a następnie generuje ją potem w tle.

Dla strony HTML

LoadCSS – skrypt, który zapewnia asynchroniczne ładowanie kodu CSS. Tag link wraz z atrybutem preloadi informuje przeglądarkę internetową, która zawartość strony ma zostać wczytana jako pierwsza. Następnie przeglądarka pobiera dalszy kod CSS i wyświetla pozostałe elementy widoku strony. Przeglądarka pobiera pliki w tle, co wpływa na szybszy czas ładowania. 

krytyczny css na stronie internetowej html

Krytyczny CSS to części kodu, które warto wyodrębnić, aby widok strony ładował się szybciej i według określonych priorytetów. Poza tym, trzeba systematycznie przeprowadzać testy wydajności witryny i wprowadzać niezbędne modyfikacje w celu zapewnienia  prawidłowego działania.

Autor