Wyodrębnij reguły widoczne bez przewijania

Programiści front-end izolują tak początkowy CSS, gdy widoczna część strony musi pojawić się szybciej.

Wyodrębnij reguły widoczne bez przewijania. Otrzymujesz praktyczny rezultat bez zakładania konta i wysyłania wprowadzonych danych.

Jak używać

  1. Wklej HTML dla części strony widocznej na górze.
  2. Dodaj linię separatora składającą się z dwóch myślników.
  3. Wklej pełny arkusz stylów używany przez tę stronę poniżej separatora.
  4. Uruchom ekstrakcję, aby uzyskać reguły potrzebne do pierwszego renderowania.

Przykład

Programista front-end dostraja stronę główną, na której nagłówek i menu muszą pojawiać się szybko. Wkleja HTML nagłówka, dodaje dwa myślniki, a następnie dołącza pełny arkusz stylów. Wynik pomaga przygotować blok krytycznego CSS przed dalszą optymalizacją. Następnie testuje wynik na kopii, aby wykryć brakujące reguły.

Dane wejściowe

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Ograniczenia i formaty

Gdzie odbywa się przetwarzanie

Wklejony HTML i CSS pozostają w Twojej przeglądarce. Wyodrębnianie reguł odbywa się na Twoim urządzeniu i nic nie jest wysyłane poza stronę. Wynik nie jest przechowywany po opuszczeniu strony.

Częste pytania

Jaki HTML powinienem podać?

Podaj kod HTML dla tego, co użytkownicy widzą przed przewinięciem, takie jak nagłówek, nawigacja i pierwszy blok treści. Krytyczny CSS zależy od tego początkowego widoku. Szerszy wyciąg zwykle daje mniej skupione reguły.

Dlaczego brakuje niektórych reguł?

Narzędzie odczytuje wklejony HTML i CSS, ale nie uruchamia JavaScriptu strony. Klasy dodane później lub style obliczone przez przeglądarkę mogą być nieobecne. Dodaj je ręcznie, jeśli pierwsze renderowanie ich wymaga.

Czy mogę opublikować wyodrębniony CSS bezpośrednio?

Najpierw przetestuj go na kopii. Sprawdź, czy początkowy układ pozostaje nienaruszony i czy czcionki są nadal dostępne. Krytyczny CSS zwykle uzupełnia główny arkusz stylów, a nie zastępuje go w każdej sytuacji.

Czy narzędzie pobierze stronę z adresu URL?

Nie. Narzędzie nie pobiera strony z adresu URL; HTML i CSS musisz dostarczyć samodzielnie. Odczytuje wklejony kod i wyodrębnia reguły potrzebne do pierwszego renderowania. Nie uruchamia JavaScript strony, więc klasy dodane później mogą nie zostać wykryte. Style dodane przez JavaScript lub złożone pseudoelementy również mogą być nieobecne.

Jak oddzielić HTML od arkusza stylów w narzędziu?

Wklej HTML dla widocznej części strony, a następnie dodaj linię separatora złożoną z dwóch myślników. Poniżej separatora wklej kompletny arkusz stylów używany przez tę stronę. Uruchom wyodrębnianie, aby otrzymać reguły potrzebne do pierwszego renderowania. Przetestuj wynik w przeglądarce przed wdrożeniem. Pamiętaj, że bardzo duża strona może wymagać mniejszego, bardziej świadomego wyboru.

Narzędzia w tej samej kategorii