Kritisk CSS-generator

En gratis webbläsarwidget för en avancerad kritisk CSS-generator och optimerare ovanför mitten .

Ovan-vikt optimerare

Kritisk CSS-generator och optimerare ovanför mitten

Introduktion

Generatorn för Critical CSS gör det möjligt att lösa Googles Core Web Vitals för att ta bort oanvänd CSS- straff, enbart på grundval av minsta CSS. Det gör det möjligt att uppnå ett perfekt pixelresultat .

Det bästa kritiska CSS-resultatet uppnås i en riktig webbläsare.

Webbläsarwidgeten körs på sidan där kritisk CSS ska extraheras och har därför full inbyggd åtkomst till den ursprungliga CSS-miljön.

Du kan välja de stilmallar eller inline-formatmallselement som du vill extrahera kritisk CSS från. Detta är praktiskt för att skapa kritisk CSS som kan delas mellan sidor.

Webbläsarwidgeten har också en funktion för att ta bort kritisk CSS från stilmallar.

Verktyget är spionfritt. Ingen Google Analytics eller spårning. Säker att använda och kan användas lokalt via en Service Worker-cache.

Webbläsarwidgeten ger ett exempel på mer avancerad kritisk CSS-programvara som kan användas via en Chrome-webbläsare i Google Cloud. Se vår professionella optimeringsplugin för mer information.

Installera

För att installera widgeten, dra den här länken🗔 Kritisk-CSS till favoritfältet eller kopiera och klistra in koden nedan.

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

Funktioner

1. Avancerad kritisk CSS-generator

   1. Anpassad utvecklad baserat på PostCSS , en av de bästa CSS-tolkarna.
   2. Stöder flera visningsportar (dator + mobil) för responsiv kritisk CSS .
   3. Spelare som webbläsarkontroll inklusive klick, mushändelser (hovra, flytta etc), rullning, körning av anpassad javascript-kod och mycket mer.
   4. Rå ooptimerad ren kritisk CSS-utgång.

2. Ovan-vikt optimerare

   1. Jämför kritisk CSS med den ursprungliga CSS.
   2. Anpassningsbara pixelmätlinjaler.

3. Avancerade optimeringsverktyg

   1. Oanvänd CSS-borttagare för att ta bort kritisk CSS från stilmallar.
   2. Professionell CSS-komprimering (minify) och optimeringsprogramvara.
   3. Trasig CSS-reparation. Ett verktyg för att fixa felaktig CSS.
   4. Autoprefixer. Ett verktyg för att tillämpa webbläsarprefix på CSS.
   5. CSS-statistik och analys.
   6. CSS försköna.
   7. Avancerat CSS ludd.
   8. Dubblett CSS-borttagare.
   9. Avancerad CSS-redigerare kopplad till CSS lint med optimeringstips.

Hur man använder

Steg 1: starta webbläsarwidgeten på en sida

Navigera till sidan som du vill extrahera kritisk CSS för och starta webbläsarwidgeten. Klicka här för installationsinstruktioner.

Steg 2: generera kritisk CSS

Den kritiska CSS-generatorn kan nås via fliken Verktyg i rubriken.

Konfigurera JSON med hjälp av alternativen i dokumentationen .

Steg 3: optimera resultatet

Utdata från den kritiska CSS-generatorn är rå och kräver ytterligare optimering såsom komprimering.

Optimera -knappen i redigeringsmenyn gör det möjligt att tillämpa avancerad kodoptimering och komprimering.

Dokumentation

Kritisk CSS-generator

Den kritiska CSS-generatorn accepterar följande alternativ.

Visa exempel på konfiguration

{
  "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": "Ställ in visningsport för CSS-upptäckt ovanför mitten."
    },
    {
      "wait": 1000,
      "notes": "Vänta i 1000ms för att visningsporten ska kunna renderas."
    },
    {
      "run": true,
      "notes": "Kör kritisk CSS-generator (CSS-beräkning ovanför mitten)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Avfyra nytt MouseEvent på a.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Kör ett skript, i det här fallet stäng menyn innan du fortsätter med nästa visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI-åtgärder för Critical CSS-generatorn

Den kritiska CSS-generatorn ger Puppeteer-liknande webbläsarkontroll. Parametern ui_actions accepterar en array med UI-åtgärdsobjekt som definierar UI-tillståndsändringar i kronologisk ordning.

{
  "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": "beskrivning av UI-åtgärd för personligt bruk"
}

Visa exempel på konfiguration

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ställ in visningsport för CSS-upptäckt ovanför mitten."
    },
    {
      "wait": 1000,
      "notes": "Vänta i 1000ms för att visningsporten ska kunna renderas."
    },
    {
      "run": true,
      "notes": "Kör kritisk CSS-generator (CSS-beräkning ovanför mitten)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Avfyra nytt MouseEvent på a.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Kör ett skript, i det här fallet stäng menyn innan du fortsätter med nästa visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Oanvänd CSS-borttagare

Den oanvända CSS-borttagaren använder samma programvara som den kritiska CSS-extraktorn och accepterar nästan samma konfigurationsalternativ, inklusive Puppeteer-liknande webbläsarkontroll genom UI-åtgärder. Verktyget gör det också möjligt att extrahera oanvänd CSS.

Visa exempel på konfiguration

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

Dubblett CSS-borttagare

Duplicerings-CSS-borttagaren gör det möjligt att jämföra två stilmallar och ta bort eller extrahera dubblett-CSS.

Visa exempel på konfiguration

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

Det andra inmatningsfältet accepterar stilmallsindexnumret. Du hittar indexet för en stilmall i stilmallsöversikten på fliken Inställningar.

Stilmallsindex översikt

Du kan ladda upp en stilmall eller jämföra stilmallar från externa webbadresser genom att skapa en ny stilmall. Du kan sedan importera webbadresser eller ladda upp stilmallarna och använda indexet från den nya stilmallen i CSS-borttagaren för dubbletter.

Importera eller ladda upp stilmallar

När du har konfigurerat, tryck på knappen för att starta CSS-borttagaren för dubbletter. En CSS-kommentar kommer att visa grundläggande statistik för den resulterande reducerade CSS.

Resultat av duplicerad CSS-borttagare