Kritischer CSS-Generator

Ein kostenloses Browser-Widget für einen erweiterten kritischen CSS-Generator und einen Above-the-Fold-Optimierer .

Above-the-Fold-Optimierer

Kritischer CSS-Generator und „above the fold“-Optimierer

Einführung

Der Critical-CSS-Generator ermöglicht es, die Core Web Vitals von Google aufzulösen und ungenutzte CSS-Einbußen zu entfernen , und zwar ausschließlich auf der Grundlage von minimalem CSS. Es ermöglicht ein pixelgenaues Ergebnis .

Das beste kritische CSS-Ergebnis wird in einem echten Browser erzielt.

Das Browser-Widget wird auf der Seite ausgeführt, auf der kritisches CSS extrahiert werden soll, und hat daher vollen nativen Zugriff auf die ursprüngliche CSS-Umgebung.

Sie können die Stylesheets oder Inline-Stylesheet-Elemente auswählen, aus denen wichtiges CSS extrahiert werden soll. Dies ist praktisch, um kritisches CSS zu erstellen, das zwischen Seiten geteilt werden kann.

Das Browser-Widget hat auch eine Funktion, um kritisches CSS aus Stylesheets zu entfernen.

Das Tool ist spionagefrei. Kein Google Analytics oder Tracking. Sicher zu verwenden und kann lokal über einen Service Worker-Cache verwendet werden.

Das Browser-Widget ist ein Beispiel für fortgeschrittenere kritische CSS-Software, die über einen Chrome-Browser in Google Cloud verwendet werden kann. Weitere Informationen finden Sie in unserem professionellen Optimierungs-Plugin .

Installieren

Um das Widget zu installieren, Ziehen Sie diesen Link🗔 Critical-CSS in die Favoritenleiste oder kopieren Sie den folgenden Code und fügen Sie ihn ein.

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);

Merkmale

1. Fortschrittlicher kritischer CSS-Generator

   1. Kundenspezifisch entwickelt basierend auf PostCSS , einem der besten CSS-Parser.
   2. Unterstützt mehrere Ansichtsfenster (Desktop + Mobil) für reaktionsschnelles kritisches CSS .
   3. Puppeteer-ähnliche Browsersteuerung, einschließlich Klicken, Mausereignisse (Hover, Bewegen usw.), Scrollen, Ausführung von benutzerdefiniertem Javascript-Code und vielem mehr.
   4. Rohe, nicht optimierte, reine, kritische CSS-Ausgabe.

2. Above-the-Fold-Optimierer

   1. Vergleichen Sie kritisches CSS mit dem ursprünglichen CSS.
   2. Anpassbare Pixelmaßlineale.

3. Erweiterte Optimierungstools

   1. Unbenutzter CSS-Entferner zum Entfernen von kritischem CSS aus Stylesheets.
   2. Professionelle CSS-Komprimierungs- (Minify) und Optimierungssoftware.
   3. Defekte CSS-Reparatur. Ein Tool zum Beheben von fehlerhaftem CSS.
   4. Autoprefixer. Ein Tool zum Anwenden von Browserpräfixen auf CSS.
   5. CSS-Statistiken und Analysen.
   6. CSS verschönern.
   7. Fortgeschrittenes CSS-Flusen.
   8. Duplikat-CSS-Entferner.
   9. Erweiterter CSS-Editor verbunden mit CSS Lint mit Optimierungstipps.

Wie benutzt man

Schritt 1: Starten Sie das Browser-Widget auf einer Seite

Navigieren Sie zu der Seite, für die Sie wichtiges CSS extrahieren möchten, und starten Sie das Browser-Widget. Klicken Sie hier für Installationsanweisungen.

Schritt 2: Kritisches CSS generieren

Auf den kritischen CSS-Generator kann über die Registerkarte Tools in der Kopfzeile zugegriffen werden.

Konfigurieren Sie JSON mithilfe der Optionen in der Dokumentation .

Schritt 3: Optimieren Sie das Ergebnis

Die Ausgabe des kritischen CSS-Generators ist roh und erfordert eine weitere Optimierung wie Komprimierung.

Die Schaltfläche Optimieren im Editormenü ermöglicht die Anwendung erweiterter Codeoptimierung und -komprimierung.

Dokumentation

Kritischer CSS-Generator

Der kritische CSS-Generator akzeptiert die folgenden Optionen.

Beispielkonfiguration anzeigen

{
  "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": "Stellen Sie den Darstellungsbereich für die CSS-Erkennung "above the fold" ein."
    },
    {
      "wait": 1000,
      "notes": "Warten Sie 1000 ms, damit der Darstellungsbereich gerendert werden kann."
    },
    {
      "run": true,
      "notes": "Führen Sie einen kritischen CSS-Generator aus (above-the-fold-CSS-Berechnung)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Feuern Sie ein neues MouseEvent auf einem.nav-menu DOM-Element ab."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Führen Sie ein Skript aus, schließen Sie in diesem Fall das Menü, bevor Sie mit dem nächsten Ansichtsfenster fortfahren."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI-Aktionen des Critical CSS-Generators

Der kritische CSS-Generator bietet eine Puppeteer-ähnliche Browsersteuerung. Der Parameter ui_actions akzeptiert ein Array mit UI-Aktionsobjekten, die UI-Statusänderungen in chronologischer Reihenfolge definieren.

{
  "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": "Beschreibung der UI-Aktion für den persönlichen Gebrauch"
}

Beispielkonfiguration anzeigen

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Stellen Sie den Darstellungsbereich für die CSS-Erkennung "above the fold" ein."
    },
    {
      "wait": 1000,
      "notes": "Warten Sie 1000 ms, damit der Darstellungsbereich gerendert werden kann."
    },
    {
      "run": true,
      "notes": "Führen Sie einen kritischen CSS-Generator aus (above-the-fold-CSS-Berechnung)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Feuern Sie ein neues MouseEvent auf einem.nav-menu DOM-Element ab."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Führen Sie ein Skript aus, schließen Sie in diesem Fall das Menü, bevor Sie mit dem nächsten Ansichtsfenster fortfahren."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Unbenutzter CSS-Entferner

Der unbenutzte CSS-Entferner verwendet dieselbe Software wie der kritische CSS-Extraktor und akzeptiert fast dieselben Konfigurationsoptionen, einschließlich einer Puppeteer-ähnlichen Browsersteuerung durch UI-Aktionen. Das Tool ermöglicht auch das Extrahieren von nicht verwendetem CSS.

Beispielkonfiguration anzeigen

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

Duplikat-CSS-Entferner

Der doppelte CSS-Entferner ermöglicht es, zwei Stylesheets zu vergleichen und das doppelte CSS zu entfernen oder zu extrahieren.

Beispielkonfiguration anzeigen

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

Das zweite Eingabefeld akzeptiert die Indexnummer des Stylesheets. Den Index eines Stylesheets finden Sie in der Stylesheet-Übersicht auf der Registerkarte Einstellungen.

Überblick über den Stylesheet-Index

Sie können ein Stylesheet hochladen oder Stylesheets von externen URLs vergleichen, indem Sie ein neues Stylesheet erstellen. Sie können dann URLs importieren oder die Stylesheets hochladen und den Index aus dem neuen Stylesheet im doppelten CSS-Entferner verwenden.

Stylesheets importieren oder hochladen

Drücken Sie nach der Konfiguration die Schaltfläche, um den Duplikat-CSS-Entferner zu starten. Ein CSS-Kommentar zeigt grundlegende Statistiken des resultierenden reduzierten CSS an.

Ergebnis des doppelten CSS-Entferners