CSS-Optimierung – 21 Möglichkeiten, Ihre Website zu beschleunigen

Hören Sie sich diesen Artikel an

CSS muss eine relativ komplexe Pipeline durchlaufen, genau wie HTML und JavaScript. Der Browser muss die Dateien vom Server herunterladen und sie dann analysieren und auf das DOM anwenden. Aufgrund des extremen Optimierungsgrads ist dieser Prozess meist recht schnell – bei kleinen Webprojekten, die nicht auf Frameworks basieren, macht CSS meist nur einen kleinen Teil des gesamten Ressourcenverbrauchs aus.

Frames zerstören dieses Gleichgewicht. Binden Sie einen JavaScript-GUI-Stack wie jQuery UI ein und beobachten Sie, wie Ihr CSS, JS und HTML exponentiell wachsen. Entwickler haben oft kein schlechtes Gewissen – wenn sie an einer leistungsstarken Achtkern-Workstation mit T3-Internet sitzen, kümmert sich niemand um Geschwindigkeit. Dies ändert sich, wenn Latenzen oder Geräte mit CPU-Einschränkungen ins Spiel kommen.

CSS-Optimierung erfordert einen mehrdimensionalen Ansatz. Während handgeschriebener Code mit verschiedenen Methoden reduziert werden kann, ist das manuelle Durchlaufen des Framework-Codes ineffizient. In diesen Fällen führt die Verwendung des automatischen Minimierers zu besseren Ergebnissen.

Die folgenden Schritte helfen Ihnen, Ihr CSS zu optimieren. Möglicherweise sind nicht alle davon direkt auf Ihr Projekt anwendbar. Bedenken Sie dies.

Der Inhalt des Artikels:

• Verwenden Sie Shortcut-CSS-Vorschläge
• Entfernen Sie nicht verwendeten CSS-Code
• Arbeiten Sie bequemer mit CSS
• Seien Sie sich immer der Probleme im Zusammenhang mit Ihren Stilen bewusst
• Kritisches Inline-CSS
• Antiparallele Analyse
• Ersetzen Sie Ihre Bilder durch CSS
• Verwenden Sie Farbkombinationen
• Entfernen Sie unnötige Nullen und Einsen
• Entfernen Sie zusätzliche Semikolons
• Verwenden Sie Textur-Sprites
• Löschen Sie unerwünschte Pixel
• Vermeiden Sie anspruchsvolle Proportionen
• Entfernen Sie unnötige Leerzeichen
• Entfernen Sie unerwünschte Kommentare
• Verwenden Sie die automatische Komprimierung
• Von NPM ausführen
• Halten Sie Sass und andere unter Kontrolle
• Caching einrichten
• Cache leeren
• Vergessen Sie nicht die Grundlagen

Verwenden Sie Shortcut-CSS-Vorschläge

Der schnellste CSS-Satz ist der, der nie analysiert wird. Durch die Verwendung von Abkürzungsvorschlägen wie der unten gezeigten Felddeklaration wird die Größe Ihrer CSS-Dateien drastisch reduziert. Viele weitere Abkürzungen finden Sie, indem Sie „CSS Shorthand“ googeln.

Hier ist ein Beispiel:

p { margin-top: 1px; Rand rechts: 2px; Rand unten: 3px; Rand links: 4px; } p { Rand: 1px 2px 3px 4px; }

Entfernen Sie nicht verwendeten CSS-Code

Das Entfernen unnötiger Teile Ihres Markups führt offensichtlich zu einer enormen Geschwindigkeitssteigerung. Der Google Chrome-Browser verfügt standardmäßig über diese Funktion.

Gehen Sie einfach zu Ansicht > Entwickler > Entwicklertools, öffnen Sie die Registerkarte „Quellen“ in der neuesten Version und öffnen Sie das Befehlsmenü. Wählen Sie anschließend „Abdeckung anzeigen“ und bewundern Sie das Fenster zur Abdeckungsanalyse, in dem nicht verwendeter Code auf der aktuellen Webseite hervorgehoben wird.

Arbeiten Sie bequemer mit CSS

Die Navigation durch die zeilenweise Analyse ist nicht unbedingt bequem. Chrome Web Performance Audit gibt ähnliche Informationen zurück – öffnen Sie es einfach über die Symbolleiste, wählen Sie „Ansicht“ > „Entwickler“ > „Entwicklertools“ > „Audit“ und führen Sie es aus. Wenn dies erledigt ist, wird eine Liste der problematischen Elemente angezeigt.

Seien Sie sich immer der Probleme im Zusammenhang mit Ihren Stilen bewusst

Bedenken Sie, dass automatisiertes CSS-Parsen immer zu Fehlern führen kann. Führen Sie einen gründlichen Test der gesamten Website durch, nachdem Sie die CSS-Dateien durch minimierte Dateien ersetzt haben – Sie wissen nie, welche Fehler der Optimierer gemacht hat. Und in Zukunft kann Ihnen ein guter Webhost dabei helfen, die Falten auf Ihrer Website auszubügeln.

Kritisches Inline-CSS

Das Laden externer Stylesheets nimmt aufgrund der Latenz Zeit in Anspruch. Erinnert sich jemand an den „Aufblitz von nicht formatiertem Inhalt“? Auf diese Weise können die wichtigsten Codeteile im Header-Tag platziert werden.

Versuchen Sie jedoch, es nicht zu übertreiben. Beachten Sie, dass der Code auch von Personen gelesen werden muss, die Wartungsarbeiten durchführen.

Hier ist ein Beispiel:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Hallo Welt! </div>

Antiparallele Analyse

@importieren Fügt Ihrem CSS-Code Struktur hinzu. Leider sind die Vorteile nicht kostenlos: Da Importe verschachtelt werden können, können sie nicht parallel analysiert werden. Der parallelere Weg verwendet eine Reihe von Tags, die der Browser gleichzeitig abrufen kann.

Beispiel:

@import url("a.css"); @import url("b.css"); @import url("c.css");

Ersetzen Sie Ihre Bilder durch CSS

Vor einigen Jahren war eine Reihe durchscheinender PNG-Dateien üblich, um durchscheinende Effekte auf Websites zu erzeugen. Derzeit sind CSS-Filter eine ressourcenschonende Alternative. Das Snippet, das diesen Schritt begleitet, stellt beispielsweise sicher, dass das betreffende Bild als Graustufenversion von sich selbst angezeigt wird.

Beispiel:

img { -webkit-filter: greyscale(100%); /* alte Safari */ filter: greyscale(100%); }

Verwenden Sie Farbkombinationen

Der gesunde Menschenverstand besagt, dass sechsstellige Farbbeschreibungen die effizienteste Art sind, Farben auszudrücken. Dies ist nicht der Fall – in einigen Fällen können abgekürzte Beschreibungen oder Farbnamen kürzer sein.

target { Hintergrundfarbe: #ffffff; } target { Hintergrund: #fff; }

Entfernen Sie unnötige Nullen und Einsen

CSS unterstützt eine Vielzahl von Einheiten und Zahlenformaten. Sie sind ein willkommenes Ziel für die Optimierung – sowohl nachgestellte als auch nachgestellte Nullen können entfernt werden, wie im folgenden Snippet gezeigt. Bedenken Sie außerdem, dass Null immer Null ist und dass das Hinzufügen einer Dimension den Wert der enthaltenen Informationen nicht erhöht.

Polsterung: 0,2em Rand: 20,0em Wert: 0px; Polsterung: .2em; Rand: 20em Wert: 0;

Entfernen Sie zusätzliche Semikolons

Diese Optimierung ist etwas kritisch, da sie sich auf Codeänderungen auswirkt. Die CSS-Spezifikation ermöglicht es Ihnen, das letzte Semikolon in einer Eigenschaftsgruppe wegzulassen. Da die durch diese Optimierungsmethode erzielten Einsparungen minimal sind, erwähnen wir sie hauptsächlich für diejenigen, die mit dem automatischen Optimierer arbeiten.

P { . . . Schriftgröße: 1,33em

Verwenden Sie Textur-Sprites

Das Laden mehrerer kleiner Sprites ist aufgrund des Protokoll-Overheads ineffizient. CSS-Sprites kombinieren eine Reihe kleiner Bilder zu einer großen PNG-Datei, die dann mithilfe von CSS-Regeln zerlegt wird. Programme wie Texturpacker , vereinfacht den Erstellungsprozess erheblich.

.download { width:80px; Höhe:31px; Hintergrundposition: -160px -160px; } .download:hover { width:80px; Höhe:32px; Hintergrundposition: -80px -160px; }

Löschen Sie unerwünschte Pixel

Eine praktische Möglichkeit, die Leistung zu verbessern, ist eine Funktion des CSS-Standards. Es wird davon ausgegangen, dass es sich bei numerischen Werten ohne Einheit um Pixel handelt. Durch das Entfernen von Pixeln werden zwei Bytes für jede Zahl eingespart.

h2 {padding:0px; margin:0px;} h2 {padding:0; Rand:0}

Vermeiden Sie anspruchsvolle Proportionen

Die Analyse ergab, dass einige Tags mehr kosten als andere. Die Liste, die diesen Schritt begleitet, gilt als besonders leistungsintensiv – vermeiden Sie sie, wenn Sie die Gelegenheit dazu haben.

Rahmenradius-Boxschatten-Transformationsfilter: Position des n-ten Kindes: behoben; usw.

Entfernen Sie unnötige Leerzeichen

Leerzeichen – denken Sie an Tabulatoren, Wagenrückläufe und Leerzeichen – machen den Code leichter lesbar, bewirken aber aus Sicht eines Parsers nicht viel. Beseitigen Sie sie vor dem Versand. Besser noch, delegieren Sie diese Arbeit an ein Shell-Skript oder ein ähnliches Gerät.

Entfernen Sie unerwünschte Kommentare

Auch Kommentare sind für den Compiler nutzlos. Erstellen Sie Ihren eigenen Parser, um sie vor der Auslieferung zu entfernen. Dies spart nicht nur Bandbreite, sondern erschwert es Angreifern und Klonern auch, herauszufinden, was sich hinter dem Code verbirgt.

Verwenden Sie die automatische Komprimierung

Das UI-Team von Yahoo hat eine Anwendung erstellt, die viel Komprimierungsarbeit leistet. Es liegt als JAR-Datei vor und kann mit der JVM Ihrer Wahl ausgeführt werden.

java -jar yuicompressor-xyzjar Verwendung: java -jar yuicompressor-xyzjar [Optionen] [Eingabedatei] Globale Optionen -h, --help Zeigt diese Informationen an --type Gibt den Typ der Eingabedatei an

Von NPM ausführen

Wenn Sie das Produkt lieber in Node.JS integrieren möchten, besuchen Sie bitte npmjs.com/package/yuicompressor . Das schlecht gewartete Repository enthält eine Reihe von Wrapper-Dateien und eine JavaScript-API.

var compressor = require('yuicompressor'); compresser.compress('/path/to/ file or String of JS', { //Compressor Options: charset: 'utf8', type: 'js',

Halten Sie Sass und andere unter Kontrolle

Während die Leistung des CSS-Selektors nicht mehr so wichtig ist wie noch vor einigen Jahren (siehe Ressource), erzeugen Frameworks wie Sass manchmal extrem komplexen Code. Überprüfen Sie die Ausgabedateien von Zeit zu Zeit und überlegen Sie, wie Sie die Ergebnisse optimieren können. Möchten Sie Ergebnisse mit dem Team teilen? Speichern Sie Dateien im öffentlichen Cloud-Speicher.

Caching einrichten

Das alte Sprichwort besagt, dass die schnellste Datei die ist, die nie über das Kabel geht. Durch Abfragen des Caches des Browsers wird dies effizient erreicht. Leider muss das Festlegen der Caching-Header auf dem Server erfolgen. Nutzen Sie die beiden in den Screenshots gezeigten Tools sinnvoll. Sie bieten eine schnelle Möglichkeit, die Ergebnisse Ihrer Änderungen zu analysieren.

Cache leeren

Designer lehnen Caching oft ab, weil sie Angst vor Problemen bei bevorstehenden Änderungen haben. Eine praktische Möglichkeit, dieses Problem zu lösen, besteht darin, Tags in den Dateinamen einzufügen. Leider funktioniert das im Code, der diesen Schritt begleitet, beschriebene Schema nicht überall, da einige Proxys sich weigern, Dateien mit „dynamischen“ Pfaden zwischenzuspeichern.

<link rel="stylesheet" href="style.css?v=1.2.3">

Vergessen Sie nicht die Grundlagen

Die CSS-Optimierung ist nur ein Teil des Optimierungsaufwands. Wenn Ihr Server keine HTTP/2- und gzip-Komprimierung verwendet, wird beim Übertragen von Daten viel Zeit verschwendet. Glücklicherweise ist die Lösung dieser beiden Probleme recht einfach. Mein Beispiel zeigt mehrere Einstellungen für einen weit verbreiteten Apache-Server mithilfe einer .htaccess-Datei. Wenn Sie sich auf einem anderen System befinden, schauen Sie einfach in der Dokumentation des Servers nach.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Ich würde mich sehr freuen, wenn dieser Artikel für Sie nützlich ist. Nun, ich werde weiterhin neue relevante Materialien zu diesem Thema hinzufügen.

Lesen dieses Artikels:

• So führen Sie eine 301-Umleitung in einer .htaccess-Datei durch – detaillierte Beispiele
• Optimierung der Webseitenleistung

Danke fürs Lesen: SEO HELPER | NICOLA.TOP