Critical CSS-generator

Een gratis browserwidget voor een geavanceerde kritische CSS-generator en above-the-fold optimizer.

Optimalisatie boven de vouw

Kritieke CSS-generator en optimalisatie boven de vouw

Introductie

De Critical CSS-generator maakt het mogelijk om Google's Core Web Vitals-penalty ongebruikte CSS verwijderen op te lossen, puur op basis van minimale CSS. Hiermee kunt u een pixel perfect resultaat bereiken.

Het beste kritische CSS-resultaat wordt behaald in een echte browser.

De browserwidget wordt uitgevoerd op de pagina waarop kritieke CSS moet worden geëxtraheerd en heeft daarom volledige native toegang tot de oorspronkelijke CSS-omgeving.

U kunt de stylesheets of inline stylesheet-elementen selecteren waaruit u kritieke CSS wilt extraheren. Dit is handig om kritieke CSS te maken die tussen pagina's kan worden gedeeld.

De browserwidget heeft ook een functie om kritieke CSS uit stylesheets te verwijderen.

De tool is spionagevrij. Geen Google Analytics of tracking. Veilig in gebruik en kan lokaal worden gebruikt via een Service Worker-cache.

De browser-widget geeft een voorbeeld van meer geavanceerde kritieke CSS-software die kan worden gebruikt via een Chrome-browser in Google Cloud. Zie voor meer informatie onze professionele optimalisatie plugin.

Installeren

Om de widget te installeren, sleep deze link🗔 Critical-CSS naar de favorietenbalk of kopieert en plakt u de onderstaande code.

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="Critical-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);

Functies

1. Geavanceerde kritieke CSS-generator

   1. Op maat ontwikkeld op basis van PostCSS, een van de beste CSS-parsers.
   2. Ondersteunt meerdere viewports (desktop + mobiel) voor responsieve kritische CSS.
   3. Poppenspeler-achtige browserbesturing inclusief klikken, muisgebeurtenissen (zweven, verplaatsen enz.), scrollen, aangepaste javascript-code-uitvoering en nog veel meer.
   4. Onbewerkte, niet-geoptimaliseerde pure kritieke CSS-uitvoer.

2. Optimalisatie boven de vouw

   1. Vergelijk kritieke CSS met de originele CSS.
   2. Aanpasbare linialen voor pixelmeting.

3. Geavanceerde optimalisatie tools

   1. Ongebruikte CSS-verwijderaar om kritieke CSS uit stylesheets te verwijderen.
   2. Professionele CSS-compressie (verkleinen) en optimalisatiesoftware.
   3. Defecte CSS-reparatie. Een tool om misvormde CSS te repareren.
   4. Autoprefixer. Een hulpmiddel om browservoorvoegsels toe te passen op CSS.
   5. CSS-statistieken en -analyses.
   6. CSS beautify.
   7. Geavanceerde CSS-lint.
   8. Dubbele CSS-verwijderaar.
   9. Geavanceerde CSS-editor verbonden met CSS-lint met optimalisatietips.

Hoe te gebruiken

Stap 1: start de browserwidget op een pagina

Navigeer naar de pagina waarvoor u kritieke CSS wilt extraheren en start de browserwidget. Klik hier voor installatie-instructies.

Stap 2: genereer kritieke CSS

De kritieke CSS-generator is toegankelijk via het tabblad Tools in de koptekst.

Configureer de JSON met behulp van de opties in de de documentatie.

Stap 3: optimaliseer het resultaat

De uitvoer van de kritieke CSS-generator is onbewerkt en vereist verdere optimalisatie, zoals compressie.

Met de knop Optimaliseren in het editormenu kunt u geavanceerde code-optimalisatie en compressie toepassen.

Documentatie

Critical CSS-generator

De kritieke CSS-generator accepteert de volgende opties.

Toon voorbeeldconfiguratie

{
  "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": "Stel viewport in voor CSS-detectie boven de vouw."
    },
    {
      "wait": 1000,
      "notes": "Wacht 1000 ms om de viewport te laten renderen."
    },
    {
      "run": true,
      "notes": "Voer een kritieke CSS-generator uit (boven de vouw CSS-berekening)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Start nieuw MouseEvent op een.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Voer een script uit, sluit in dit geval het menu voordat u verder gaat met het volgende venster."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI-acties van de kritieke CSS-generator

De kritieke CSS-generator biedt Puppeteer-achtige browsercontrole. De parameter ui_actions accepteert een array met UI-actieobjecten die UI-statuswijzigingen in chronologische volgorde definiëren.

{
  "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": "beschrijving van UI-actie voor persoonlijk gebruik"
}

Toon voorbeeldconfiguratie

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Stel viewport in voor CSS-detectie boven de vouw."
    },
    {
      "wait": 1000,
      "notes": "Wacht 1000 ms om de viewport te laten renderen."
    },
    {
      "run": true,
      "notes": "Voer een kritieke CSS-generator uit (boven de vouw CSS-berekening)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Start nieuw MouseEvent op een.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Voer een script uit, sluit in dit geval het menu voordat u verder gaat met het volgende venster."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Ongebruikte CSS-verwijderaar

De ongebruikte CSS-verwijderaar gebruikt dezelfde software als de kritieke CSS-extractor en accepteert bijna dezelfde configuratie-opties, inclusief Puppeteer-achtige browsercontrole via UI-acties. De tool maakt het ook mogelijk om ongebruikte CSS te extraheren.

Toon voorbeeldconfiguratie

{
  "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
    }
  ]
}

Dubbele CSS-verwijderaar

De dubbele CSS-verwijderaar maakt het mogelijk om twee stylesheets te vergelijken en de dubbele CSS te verwijderen of te extraheren.

Toon voorbeeldconfiguratie

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

Het tweede invoerveld accepteert het indexnummer van de stylesheet. De index van een stylesheet vind u in het stylesheetoverzicht op het tabblad instellingen.

Stylesheet-indexoverzicht

U kunt een stylesheet uploaden of stylesheets van externe URL('s) vergelijken door een nieuwe stylesheet te maken. U kunt vervolgens URL's importeren of de stylesheets uploaden en de index van de nieuwe stylesheet gebruiken in de dubbele CSS-verwijderaar.

Stylesheets importeren of uploaden

Eenmaal geconfigureerd, drukt u op de knop om de dubbele CSS-verwijderaar te starten. Een CSS-commentaar geeft basisstatistieken weer van de resulterende gereduceerde CSS.

Resultaat van dubbele CSS-verwijderaar