Ekstraktor critical CSS: style pierwszego ekranu inline | We.Inc
Wklej HTML i CSS, wybierz rozmiar ekranu i zachowaj tylko reguły stylujące to, co widać przed przewinięciem. Skopiuj blok style inline razem ze wzorcem preload.
Ekstraktor critical CSS
Critical CSS to niewielki zestaw reguł potrzebnych do narysowania tego, co odwiedzający widzi przed przewinięciem. Wklej tutaj HTML strony i arkusz stylów, wybierz rozmiar ekranu, a to narzędzie rozmieści stronę w zablokowanej ramce, zachowa reguły pasujące do widocznych elementów i da Ci blok style inline oraz odroczony link do arkusza stylów.
Co zachowuje ekstraktor
Typ reguły
Zachowywana, gdy
Dlaczego
Reguła stylu
Jej selektor pasuje do elementu, którego górna krawędź mieści się w wybranej wysokości
Ten element jest malowany przy pierwszym widoku
html, body, :root, *
Zawsze
Bazowe czcionki, kolory i custom properties wpływają na wszystko, co widoczne
Blok @media
Zachowywany tylko z pasującymi regułami wewnętrznymi
Inne rozmiary ekranu nadal dostają poprawne pierwsze malowanie
@font-face
Zawsze (można wyłączyć)
Widoczny tekst potrzebuje zadeklarowanej czcionki
@keyframes
Jego nazwa jest używana przez zachowaną regułę
Animacje widocznych elementów nadal działają
Przeglądarki czekają na każdy arkusz stylów w sekcji head, zanim cokolwiek narysują. Wstawienie inline kilku reguł potrzebnych na pierwszy ekran, a potem załadowanie pełnego pliku bez blokowania, sprawia, że strona pojawia się szybciej. To narzędzie robi za Ciebie ten wybór z wklejonego kodu. Działa w Twojej przeglądarce i nigdy nie pobiera adresu URL, więc wklej finalny HTML i CSS strony zamiast linku.
Wklej HTML strony (wystarczy zawartość body) i CSS z jej arkusza stylów.
Wybierz gotowy rozmiar ekranu albo wpisz szerokość i wysokość pierwszego ekranu w pikselach.
Narzędzie renderuje Twój HTML w odizolowanej ramce o tym rozmiarze z wyłączonymi skryptami, a potem sprawdza każdy selektor względem elementów na ekranie.
Skopiuj blok style inline do sekcji head i link preload, który później ładuje pełny arkusz stylów. Statystyki pokazują, ile reguł zachowano i jaki jest rozmiar wyniku.
Uruchom narzędzie dla rozmiaru telefonu i komputera, a potem połącz oba wyniki, bo granica pierwszego ekranu leży na każdym w innym miejscu.
Stany interaktywne, takie jak :hover i :focus, są dopasowywane do samego elementu, więc widoczny przycisk zachowuje swoją regułę hover. Usuń je ręcznie, jeśli chcesz jak najmniejszy wynik.
Treści dodane przez JavaScript po załadowaniu nie ma we wklejonym HTML, więc jej style nie zostaną wykryte. Jeśli Twoja strona buduje się w przeglądarce, wklej HTML w postaci po wyrenderowaniu.
Trzymaj blok inline mały. web.dev zaleca, by treść pierwszego ekranu mieściła się w około 14 KB po kompresji, aby mogła dotrzeć w pierwszych wymianach z serwerem.
Uruchom ekstrakcję ponownie przy każdej zmianie górnej części strony. Nieaktualny critical CSS powoduje mignięcie niestylowanej treści przy pierwszym ładowaniu.
Najczęściej zadawane pytania
Czy to to samo co pakiety Critical lub Penthouse?
Działa według tej samej idei, ale prościej. Te narzędzia wiersza poleceń sterują prawdziwą przeglądarką headless na zbudowanych stronach. Ta strona używa Twojej własnej przeglądarki i wklejonego kodu, więc traktuj wynik jako bliskie przybliżenie i przetestuj potem stronę.
Dlaczego link preload potrzebuje onload?
rel=preload z as=style pobiera arkusz stylów bez jego stosowania. Handler onload przełącza rel na stylesheet, gdy plik dotrze, co stosuje go bez blokowania pierwszego malowania. Kopia w noscript obsługuje odwiedzających z wyłączonymi skryptami.
Czy CSS inline szkodzi cache'owaniu?
Reguły inline są wysyłane ponownie z każdą stroną HTML, dlatego blok powinien pozostać mały. Pełny arkusz stylów nadal jest osobnym plikiem, więc po pierwszej wizycie jest cache'owany jak zwykle.
Czy narzędzie może odczytać moją działającą stronę?
Nie. Statyczna strona w Twojej przeglądarce nie może załadować kodu innej witryny, więc nic nie jest pobierane. Otwórz swoją stronę, wyświetl jej źródło i arkusz stylów, a następnie wklej oba. Nic, co wklejasz, nie jest wysyłane.
Co jeśli mój CSS używa frameworka, takiego jak Tailwind?
Wklej skompilowany plik CSS, który tworzy Twój build, a nie źródło z liniami @tailwind lub @import. Ekstraktor działa na gotowych regułach, a klasy utility w Twoim HTML są dopasowywane jak każdy inny selektor.
Gdzie naprawdę kończy się pierwszy ekran
Nie ma jednej granicy pierwszego ekranu. Telefon w pionie może pokazać 650 pikseli wysokości, laptop 800, a duży monitor więcej. Wybierz rozmiary, z których najczęściej korzystają Twoi odwiedzający, i zostaw zapas poniżej linii, bo ludzie często od razu zaczynają przewijać.
Ekstraktor uznaje element za widoczny, gdy jego górna krawędź znajduje się powyżej wybranej wysokości. Wysoka sekcja hero, która zaczyna się na ekranie i kończy poniżej, zostaje zachowana, i właśnie o to chodzi.
Wstawianie wyniku na stronę
Umieść blok style inline w sekcji head przed wszystkim innym, co się renderuje. Zastąp zwykły link do arkusza stylów wzorcem preload, aby reszta CSS ładowała się bez wstrzymywania pierwszego malowania.
Sprawdź wynik przy spowolnionej sieci w narzędziach deweloperskich przeglądarki. Jeśli coś skacze lub zmienia styl, gdy dotrze pełny plik, pominięto regułę dla widocznego elementu: dodaj ją do bloku inline.
Wzorzec ładowania, który tworzy narzędzie
Krytyczne reguły inline, potem reszta bez blokowania
To wzorzec opisany na web.dev. Blok style zawiera wyodrębnione reguły, link preload pobiera pełny plik i stosuje go po załadowaniu, a linia noscript jest rozwiązaniem awaryjnym.
Znane ograniczenia ekstraktora działającego w przeglądarce
Co sprawdzić ręcznie
Sytuacja
Co się dzieje
Co zrobić
Style dodawane przez skrypty
Niewidoczne, skrypty nie działają w ramce
Wklej wyrenderowany HTML zamiast szablonu
Obrazy bez szerokości i wysokości
Mogą zapaść się do zerowej wysokości i podciągnąć dalszą treść w górę
Dodaj do obrazów atrybuty width i height
Czcionki webowe
Nie są pobierane, więc tekst może się inaczej zawijać
Zostaw zapas poniżej wysokości pierwszego ekranu
Selektory odrzucane przez przeglądarkę
Odrzucane przez przeglądarkę przed sprawdzeniem
Popraw składnię: statystyki pokazują, ile reguł odczytano
Bardzo długie strony
Zachowany jest tylko pierwszy ekran, zgodnie z założeniem
Uruchom ponownie dla każdego ważnego dla Ciebie rozmiaru ekranu
Wyodrębnij critical CSS
Narzędzie ładuje się z przykładową stroną piekarni, abyś zobaczył wynik, zanim wkleisz własny kod.
HTML strony
CSS arkusza stylów
Rozmiar ekranu
Tablet 820 x 1000
Laptop 1366 x 768
Komputer 1920 x 1000
Szerokość (px)
Wysokość pierwszego ekranu (px)
Zawsze zachowuj reguły @font-face
Twoja strona w wybranym rozmiarze, skrypty wyłączone
Przerywana linia oznacza granicę pierwszego ekranu.
Odczytano reguł: {read}, zachowano: {kept}. Critical CSS ma {bytes} bajtów przed kompresją.
Rozmieszczanie strony...
Żadna reguła nie pasuje. Sprawdź, czy HTML i CSS pochodzą z tej samej strony.