Generator Critical CSS

Critical CSS to niewielka część Twoich stylów, której potrzebuje pierwszy ekran. Gdy zostanie wstawiony, strona może się narysować, zanim nadejdą pełne arkusze stylów. Generator to funkcja Pro w zakładce Pamięć podręczna i optymalizacja, pod polem Critical CSS. Nie wymaga niczego instalowanego na serwerze, bo domyślny silnik działa w Twojej przeglądarce.

Jak to wygenerować

1. Otwórz Baza Helper > Pamięć podręczna i optymalizacja i przewiń do pola Critical CSS.
2. Wybierz Adres strony (domyślnie strona główna) i Rozmiar ekranu: Mobile 390 x 844, Desktop 1440 x 900 lub Both.
3. Kliknij Generuj automatycznie i poczekaj. Ukryte ramki ładują podpisaną kopię strony, a kolektor odczytuje, jakich reguł używa pierwszy ekran.
4. Zobacz kartę wyniku: stary i nowy rozmiar, ostrzeżenia, różnicę układu w procentach i przeskalowany podgląd.
5. Kliknij Zastosuj, aby zapisać, albo Cancel, aby zostawić wszystko jak było.

Nic nie jest zapisywane przed kliknięciem Apply, a Twoje arkusze stylów nigdy się nie zmieniają. Poprzednia wartość jest zachowywana najpierw, a Przywróć poprzednią wersję przywraca ją (pamiętanych jest 5 ostatnich wersji).

Jak odczytywana jest strona

• Strona jest ładowana jako niezalogowany odwiedzający przez podpisany link ważny 15 minut, więc pasek administratora i Twoje logowanie nie trafiają do wyniku.
• Reguła zostaje, jeśli jej selektor pasuje do elementu mającego pole na pierwszym ekranie. Reguły ukrywające element na pierwszym ekranie są zachowywane w skróconej postaci.
• Reguły hover i focus, reguły druku, reguły poniżej pierwszego ekranu oraz nieużywane @font-face, @keyframes i @property są pomijane.
• Kolejność @layer, opakowania @media, @supports i @container, właściwości niestandardowe i kolejność kaskady są zachowane. Identyczne reguły są łączone, zostaje ostatnia kopia.
• Właściwości niestandardowe, których nikt nie używa, są odrzucane. Osadzone pliki (url(data:…) od 3000 znaków) są pomijane i zgłaszane.
• Wynik jest zminifikowany i zawiera tylko ASCII.

Limity i bezpieczeństwo

• Wynik jest ograniczony do 64 KB. Po przekroczeniu komunikat pokazuje, co zajmuje miejsce (właściwości niestandardowe, czcionki, animacje, reguły media, największe grupy klas).
• Dozwolone są tylko adresy Twojej strony, na portach 80 i 443, bez danych logowania.
• Uruchomienia są pojedyncze, do 12 na godzinę i w odstępie 8 sekund dla każdego użytkownika.
• Strona zabraniająca osadzania w ramkach (X-Frame-Options lub frame-ancestors) zgłasza, że ramka została zablokowana.
• Nieczytelne arkusze stylów z innych źródeł są zgłaszane jako ostrzeżenia.

Użycie z odroczonymi stylami

Po zastosowaniu critical CSS możesz wypisać Uchwyty arkuszy stylów do załadowania po critical CSS. Te style ładują się wtedy bez blokowania pierwszego rysowania, z rozwiązaniem zastępczym bez JavaScriptu. Niepełny critical CSS może wywołać błysk niostylowanej treści, dlatego obejrzyj pierwszy ekran na telefonie i na komputerze.

Ustawienie Używaj Critical CSS tylko na stronie głównej jest domyślnie włączone. Critical CSS powstaje z jednej strony, a inne strony mają inne reguły pierwszego ekranu, więc przy odroczonych stylach mogłyby na chwilę mignąć bez stylów. Gdy jest włączone, tylko strona główna dostaje wbudowany Critical CSS i odroczone style, a pozostałe strony ładują style jak zwykle. Gdy jest wyłączone, używa ich cała witryna i akceptujesz możliwe mignięcie na stronach różniących się od tej, z której go wykonano.

Ustawienie obejmuje wbudowany CSS, linki do odroczonych arkuszy stylów, połączony odroczony plik, skrypt włączający style i czcionki wstępnie ładowane z Critical CSS. Każdy odroczony arkusz stylów jest włączany po kolei, a ekran jest mierzony raz, gdy przeglądarka jest bezczynna.

Dla programistów

Opcjonalny worker serwerowy (Node 18+ z Chromium) może generować CSS bez karty przeglądarki, a inne generatory dodaje się przez filtr baza_helper_critical_css_generators. Aktywny wybiera się przez baza_helper_critical_css_generator.