Wie man CSS für eine bessere Website-Leistung minimiert

Warum CSS minimieren?

Die CSS-Minifizierung reduziert die Größe von Cascading-Style-Sheet-Dateien (CSS), so dass sie schneller geladen werden. Bei der CSS-Minifizierung werden alle überflüssigen Zeichen und Leerzeichen aus der CSS-Auszeichnung entfernt, ohne dass dies Auswirkungen darauf hat, wie die Browser sie interpretieren.

CSS-Dateien enthalten Anweisungen zur Formatierung von HTML-Elementen. Wenn sie schneller geladen werden, laden die Webseiten insgesamt schneller, so wie das Tragen leichter Kleidung einem Jogger hilft, schneller zu laufen. Schnelles Laden verbessert die Benutzererfahrung und SEO den Wert der Seite, und Verbesserungen der Seitengeschwindigkeit können sogar dazu beitragen, die Konversionsratenzu steigern.

Diese einfache Stilvorlage enthält mehrere Codezeilen und Kommentare für Entwickler, die sie lesen:

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

Nach der CSS-Minifizierung ist es nur noch eine einzige komprimierte Zeile, und die Kommentare werden entfernt:

p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;} 

Während dieser Text für Menschen weniger gut lesbar ist, liest und interpretiert ein Browser die zweite Version genauso wie die erste. Die verkleinerte Version hat den Vorteil, dass sie schneller geladen wird, weil sie weniger Platz benötigt.

Wie das Rendern von Seiten funktioniert

Bevor ein Browser eine Webseite anzeigen kann, muss er wissen, welche Elemente (z. B. Text, Bilder und andere Multimedia-Inhalte) sich auf der Webseite befinden und wo alles auf der Seite angeordnet ist. So wie Bauunternehmer die Baupläne eines Gebäudes benötigen, bevor sie mit dem Bau beginnen können, benötigen Browser die Baupläne einer Webseite "" , bevor sie mit der Darstellung der Seite beginnen können.

Nach dem Empfang einer HTML-Datei für eine Webseite beginnen die Browser mit dem Aufbau eines Document Object Model (DOM) Baumes, der wie ein grober Umriss oder eine Skizze aller Elemente auf der Seite aussieht. Browser analysieren auch alle <style> Tags und verknüpften CSS-Dateien, um einen CSSOM-Baum zu erstellen, der aufzeigt, wie all diese Seitenelemente gestaltet werden sollen.

Schließlich kombinieren die Browser DOM und CSSOM, um einen "Renderbaum zu erstellen." Sobald der Renderbaum erstellt ist, beginnt der Browser mit der Darstellung der Seite. Solange dies nicht geschieht, sieht der Benutzer einen leeren Bildschirm.

Das Ergebnis: Bis der Browser das Herunterladen und Lesen von CSS abgeschlossen hat, kann die Seite nicht angezeigt werden.

Wie kann CSS die Anzeige einer Webseite blockieren?

In der Webentwicklung wird jedes Element oder jede Funktion, die geladen werden muss, bevor die Seite dem Endbenutzer angezeigt werden kann, als "render-blocking resource bezeichnet." CSS ist eine solche Ressource. Rendering-blockierende Ressourcen müssen, wann immer möglich, für schnelles Laden optimiert werden.

Große Ressourcen, die das Rendering blockieren, brauchen länger, um heruntergeladen zu werden, was dazu führt, dass der Browser wartet und die Seite buchstäblich blockiert, so dass es für den Benutzer so aussieht, als würde nichts passieren. Solche Verzögerungen führen häufig dazu, dass Nutzer die Seite verlassen ("bounce").

Sie wirken sich auch auf Core Web Vitalsaus, die Metriken, die Google zur Messung der Seitenleistung verwendet - insbesondere Largest Contentful Paint (LCP), das misst, wie lange das größte Element einer Seite zum Laden braucht. Schlechte Core Web Vitals-Bewertungen können dazu führen, dass Google die Seite in den Suchergebnissen niedriger einstuft, so dass die Seite insgesamt weniger Besucher erhält.

Wie man CSS verkleinert

Glücklicherweise gibt es viele Minification Tools für CSS. Der vielleicht bequemste Ansatz ist die Verwendung von Minifizierungswerkzeugen, die in das Content Delivery Network (CDN)einer Website integriert sind, einem Dienst, der in den Zwischenspeicher stellt und Inhalte liefert. CDNs sollten in der Lage sein, Minifizierungsdienste anzubieten, um die Leistung weiter zu steigern.

Cloudflare Auto Minify ist im Lieferumfang des Cloudflare CDN enthalten. Website-Besitzer können CSS-Dateien (zusammen mit JavaScript- und HTML-Dateien) für die Minifizierung über ihr Cloudflare-Dashboard auswählen.

Was ist der Unterschied zwischen CSS-Minifizierung und Komprimierung?

Technisch gesehen unterscheidet sich die CSS-Minifizierung von der CSS-Komprimierung, auch wenn beide das gleiche Ziel verfolgen: die Verringerung der Dateigröße. Bei der Minifizierung wird der Code durch Entfernen von Kommentaren und Zeichen verändert. Bei der Komprimierung wird die Datei durch die Verwendung eines Komprimierungsalgorithmus (z. B. gzip) verkleinert, ohne dass der Inhalt der Datei verändert wird.

Gibt es Nachteile beim Mining von CSS?

Da verkleinertes CSS oft weniger lesbar ist, kann es für Entwickler schwieriger sein, Fehler im CSS-Markup manuell zu identifizieren und zu beheben.

Außerdem reicht die Minimierung von CSS allein nicht aus, um die Leistung einer Website zu verbessern. Es kann einer Website Millisekunden bringen, aber es gibt zusätzliche Maßnahmen, die Website-Betreiber ergreifen müssen, um signifikante Leistungsverbesserungen zu erzielen - einschließlich Bildoptimierung, Browser-HTTP-Caching und mehr.

CSS vs. JavaScript-Minifizierung

JavaScript-Minifizierung ist ein ähnliches Konzept, allerdings für ausführbaren JavaScript-Code. Kommentare, Leerzeichen und andere zusätzliche Zeichen werden entfernt, so dass die .js Datei schneller geladen und ausgeführt werden kann. JavaScript- und CSS-Minifizierung tragen beide zu einer schneller ladenden Website bei und können zu einer besseren Nutzerbindung und mehr organischem Traffic führen.

Website-Betreiber können das Cloudflare CDN nutzen, um sowohl CSS als auch JavaScript zu minifizieren - erfahren Sie hier mehr über die verfügbaren Cloudflare-Pläne.