Krytyczny generator CSS

Darmowy widget przeglądarki do zaawansowanego, krytycznego generatora CSS i widocznego na ekranie optymalizatora .

Optymalizator strony widocznej na ekranie

Krytyczny generator CSS i optymalizator strony widocznej na ekranie

Wstęp

Generator Critical CSS umożliwia rozwiązanie podstawowych wskaźników internetowych Google i usunięcie niewykorzystanej kary CSS , wyłącznie na podstawie minimalnego CSS. Pozwala uzyskać wynik doskonały w pikselach .

Najlepszy krytyczny wynik CSS uzyskuje się w prawdziwej przeglądarce.

Widżet przeglądarki jest uruchamiany na stronie, na której ma zostać wyodrębniony krytyczny CSS, dzięki czemu ma pełny natywny dostęp do oryginalnego środowiska CSS.

Możesz wybrać arkusze stylów lub wbudowane elementy arkuszy stylów, z których chcesz wyodrębnić krytyczne CSS. Jest to przydatne do tworzenia krytycznego kodu CSS, który można udostępniać między stronami.

Widżet przeglądarki ma również funkcję usuwania krytycznego kodu CSS z arkuszy stylów.

Narzędzie jest wolne od szpiegów. Brak Google Analytics lub śledzenia. Bezpieczny w użyciu i może być używany lokalnie za pośrednictwem pamięci podręcznej Service Worker.

Widżet przeglądarki stanowi przykład bardziej zaawansowanego, krytycznego oprogramowania CSS, którego można używać w przeglądarce Chrome w Google Cloud. Więcej informacji znajdziesz w naszej profesjonalnej wtyczce optymalizacyjnej .

zainstalować

Aby zainstalować widżet, przeciągnij ten link🗔 Krytyczny CSS do paska ulubionych lub skopiuj i wklej poniższy kod.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="Krytyczny CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Cechy

1. Zaawansowany krytyczny generator CSS

   1. Opracowany na zamówienie w oparciu o PostCSS , jeden z najlepszych parserów CSS.
   2. Obsługuje wiele rzutni (komputer stacjonarny + telefon komórkowy) dla responsywnego krytycznego CSS .
   3. Lalkarz jak kontrola przeglądarki, w tym kliknięcie, zdarzenia myszy (najechanie kursorem, ruch itp.), przewijanie, niestandardowe wykonanie kodu javascript i wiele więcej.
   4. Surowe, niezoptymalizowane, czysto krytyczne wyjście CSS.

2. Optymalizator strony widocznej na ekranie

   1. Porównaj krytyczny CSS z oryginalnym CSS.
   2. Konfigurowalne linijki miary pikseli.

3. Zaawansowane narzędzia optymalizacyjne

   1. Nieużywane narzędzie do usuwania CSS do usuwania krytycznych CSS z arkuszy stylów.
   2. Profesjonalne oprogramowanie do kompresji (minify) i optymalizacji CSS.
   3. Uszkodzona naprawa CSS. Narzędzie do naprawy zniekształconego CSS.
   4. autoprefiks. Narzędzie do stosowania przedrostków przeglądarki w CSS.
   5. Statystyki i analizy CSS.
   6. Upiększanie CSS.
   7. Zaawansowane kłaczki CSS.
   8. Narzędzie do usuwania duplikatów CSS.
   9. Zaawansowany edytor CSS połączony z lintem CSS ze wskazówkami optymalizacyjnymi.

Jak używać

Krok 1: uruchom widżet przeglądarki na stronie

Przejdź do strony, dla której chcesz wyodrębnić krytyczny CSS i uruchom widżet przeglądarki. Kliknij tutaj, aby uzyskać instrukcje dotyczące instalacji.

Krok 2: wygeneruj krytyczny CSS

Dostęp do krytycznego generatora CSS można uzyskać za pomocą karty Narzędzia w nagłówku.

Skonfiguruj JSON, korzystając z opcji zawartych w dokumentacji .

Krok 3: zoptymalizuj wynik

Dane wyjściowe krytycznego generatora CSS są surowe i wymagają dalszej optymalizacji, takiej jak kompresja.

Przycisk Optymalizuj w menu edytora umożliwia zastosowanie zaawansowanej optymalizacji i kompresji kodu.

Dokumentacja

Krytyczny generator CSS

Krytyczny generator CSS akceptuje następujące opcje.

Pokaż przykładową konfigurację

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ustaw widoczny obszar dla wykrywania CSS w części widocznej na ekranie."
    },
    {
      "wait": 1000,
      "notes": "Poczekaj 1000 ms, aby umożliwić renderowanie rzutni."
    },
    {
      "run": true,
      "notes": "Uruchom krytyczny generator CSS (obliczenia CSS na części strony)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Uruchom nowe zdarzenie MouseEvent na elemencie DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Wykonaj skrypt, w tym przypadku zamknij menu przed przejściem do następnej rzutni."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Akcje interfejsu użytkownika krytycznego generatora CSS

Krytyczny generator CSS zapewnia kontrolę przeglądarki podobną do Puppeteer. Parametr ui_actions akceptuje tablicę z obiektami akcji interfejsu użytkownika, które definiują zmiany stanu interfejsu użytkownika w porządku chronologicznym.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "opis działania interfejsu użytkownika do użytku osobistego"
}

Pokaż przykładową konfigurację

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ustaw widoczny obszar dla wykrywania CSS w części widocznej na ekranie."
    },
    {
      "wait": 1000,
      "notes": "Poczekaj 1000 ms, aby umożliwić renderowanie rzutni."
    },
    {
      "run": true,
      "notes": "Uruchom krytyczny generator CSS (obliczenia CSS na części strony)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Uruchom nowe zdarzenie MouseEvent na elemencie DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Wykonaj skrypt, w tym przypadku zamknij menu przed przejściem do następnej rzutni."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Nieużywany program do usuwania CSS

Nieużywany narzędzie do usuwania CSS korzysta z tego samego oprogramowania, co krytyczny ekstraktor CSS i akceptuje prawie te same opcje konfiguracji, w tym kontrolę przeglądarki podobną do Puppeteer za pomocą działań interfejsu użytkownika. Narzędzie umożliwia również wyodrębnienie nieużywanego CSS.

Pokaż przykładową konfigurację

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Narzędzie do usuwania duplikatów CSS

Narzędzie do usuwania zduplikowanych CSS umożliwia porównanie dwóch arkuszy stylów i usunięcie lub wyodrębnienie zduplikowanego CSS.

Pokaż przykładową konfigurację

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Drugie pole wejściowe akceptuje numer indeksu arkusza stylów. Indeks arkusza stylów można znaleźć w przeglądzie arkuszy stylów na karcie ustawień.

Omówienie indeksu arkuszy stylów

Możesz przesłać arkusz stylów lub porównać arkusze stylów z zewnętrznych adresów URL, tworząc nowy arkusz stylów. Następnie możesz zaimportować adresy URL lub przesłać arkusze stylów i użyć indeksu z nowego arkusza stylów w narzędziu do usuwania duplikatów CSS.

Importuj lub przesyłaj arkusze stylów

Po skonfigurowaniu naciśnij przycisk, aby uruchomić narzędzie do usuwania duplikatów CSS. Komentarz CSS wyświetli podstawowe statystyki wynikowego zredukowanego CSS.

Wynik usuwania zduplikowanych CSS