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

drucken · Время на чтение: 8мин · von · Veröffentlicht · Aktualisiert

reproduzierenArtikel anhören

So optimieren Sie CSS für die Leistung.

css muss durch eine relativ komplexe Pipeline gehen, genau wie HTML und JavaScript. Der Browser muss Dateien vom Server herunterladen, und fahren Sie dann fort, sie zu analysieren und auf das DOM anzuwenden. Aufgrund der extremen Optimierung geht dieser Vorgang meist recht schnell – bei kleinen Webprojekten, die nicht auf Frameworks basieren, macht CSS meist nur einen kleinen Teil des gesamten Ressourcenverbrauchs aus.

Frames brechen dieses Gleichgewicht. Integrieren Sie einen JavaScript-GUI-Stack wie jQuery UI und beobachten Sie, wie Ihr CSS, JS und HTML exponentiell wächst. Entwickler haben oft kein schlechtes Gewissen – wenn sie an einer leistungsstarken Acht-Kern-Workstation mit T3-Internet sitzen, kümmert sich niemand um Geschwindigkeit. Dies ändert sich, wenn Latenzen oder Geräte mit CPU-Beschränkungen ins Spiel kommen.

CSS-Optimierung erfordert einen mehrdimensionalen Ansatz. Während handgeschriebener Code mit verschiedenen Methoden reduziert werden kann, ist es ineffizient, den Framework-Code von Hand zu iterieren. In diesen Fällen führt die Verwendung des automatischen Minimierers zu besseren Ergebnissen.
Die folgenden Schritte helfen Ihnen, Ihr CSS zu optimieren. Nicht alle von ihnen sind möglicherweise direkt auf Ihr Projekt anwendbar, denken Sie daran.

Verwenden Sie Shortcut-CSS-Vorschläge

CSS-Optimierung für schnelles Laden der Seite.

Der schnellste CSS-Satz ist derjenige, der nie geparst wird. Durch die Verwendung von Kurzformvorschlägen wie der unten gezeigten Felddeklaration wird die Größe Ihrer CSS-Dateien drastisch reduziert. Viele zusätzliche Abkürzungen finden Sie, indem Sie "CSS Shorthand" googeln.

Hier ist ein Beispiel:

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

p { Gewinnspanne: 1px 2px 3px 4px; }

Entfernen Sie nicht verwendeten CSS-Code

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

Gehen Sie einfach zu Ansicht > Entwickler > Entwicklertools, öffnen Sie die Registerkarte Quellen in der neuesten Version und öffnen Sie das Befehlsmenü. Wählen Sie danach „Abdeckung anzeigen“ und bewundern Sie das Abdeckungsanalysefenster, in dem unbenutzter Code auf der aktuellen Webseite hervorgehoben wird.

Bequemer mit CSS arbeiten

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 mit problematischen Elementen angezeigt.

Achten Sie immer auf Probleme im Zusammenhang mit Ihren Stilen

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

Kritisches Inline-CSS

Das Laden externer Stylesheets dauert aufgrund der Latenzzeit - erinnert sich jemand an den "Flash von ungestylten Inhalten"? Auf diese Weise können die wichtigsten Codeteile im Header-Tag platziert werden.

Versuchen Sie jedoch, es nicht zu übertreiben. Denken Sie daran, dass der Code auch von Personen gelesen werden muss, die Wartungsaufgaben ausführen.

Hier ist ein Beispiel:

<html>
  <Kopf>
    <Stil>
      .blau{Farbe:blau;}
    </Stil>
    </Kopf>
  <Karosserie>
    <div Klasse="blau">
      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 geparst werden. Der parallelere Weg verwendet eine Reihe von Tags, die der Browser sofort abrufen kann.

Beispiel:

@importieren URL("a.css");
@importieren URL("b.css");
@importieren URL(c.css);
v <link rel="Stilvorlage" href="a.css"> <link rel="Stilvorlage" href="b.css"> <link rel="Stilvorlage" href=c.css>

 

Ersetzen Sie Ihre Bilder durch CSS

Vor einigen Jahren war eine Reihe von durchscheinenden PNG-Dateien zum Erstellen von durchscheinenden Effekten auf Websites alltäglich. Derzeit sind CSS-Filter eine ressourcenschonende Alternative. Das Snippet, das diesen Schritt begleitet, sorgt beispielsweise dafür, dass das betreffende Bild als Graustufenversion seiner selbst angezeigt wird.

Beispiel:

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

 

Verwenden Sie Farbkombinationen

Der gesunde Menschenverstand schreibt vor, dass sechsstellige Farbdeskriptoren 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.

Ziel { Hintergrundfarbe: #ffffff; }
Ziel { 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. Denken Sie auch daran, dass Null immer Null ist und dass das Hinzufügen einer Dimension den Wert der enthaltenen Informationen nicht erhöht.

Polsterung: 0,2em;
Gewinnspanne: 20.00 Uhr;
Wert: 0px;
Polsterung: .2em;
Gewinnspanne: 20 Uhr;
Wert: 0;

 

Entfernen Sie zusätzliche Semikolons

Diese Optimierung ist etwas kritisch, da sie sich auf Codeänderungen auswirkt. Die CSS-Spezifikation erlaubt 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,33 m
}

 

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 z Texturpacker , vereinfacht den Erstellungsprozess erheblich.

.Download {
  Breite:80px; 
  Höhe:31px; 
  Hintergrundposition: -160px -160px
}
.download:schweben {
  Breite:80px; 
  Höhe:32px; 
  Hintergrundposition: -80px -160px
}

 

Löschen Sie unerwünschte Pixel

Eine raffinierte Möglichkeit, die Leistung zu verbessern, ist ein Feature des CSS-Standards. Einheitenlose numerische Werte werden als Pixel angenommen – das Entfernen von Pixeln spart zwei Bytes für jede Zahl.

h2 {Polsterung:0px; Gewinnspanne:0px;}
h2 {Polsterung:0; Gewinnspanne:0}

 

Vermeiden Sie anspruchsvolle Proportionen

Die Analyse zeigte, dass einige Tags mehr kosten als andere. Die Liste, die diesen Schritt begleitet, gilt als besonders leistungsfordernd – vermeiden Sie sie, wenn Sie die Möglichkeit dazu haben.

Border-Radius-Box-Shadow-Transformation
    Filter
    :n-tes Kind
    Position: Fest;
    usw.

 

Entfernen Sie unnötige Leerzeichen

Leerzeichen – denken Sie an Tabulatoren, Wagenrückläufe und Leerzeichen – erleichtern das Lesen des Codes, tun aber aus der 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. Das spart nicht nur Bandbreite, sondern macht es Angreifern und Klonern auch schwerer 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 wird als JAR-Datei geliefert 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 Kompressor = benötigen('yuikompressor');
 Kompressor.Kompresse('/Pfad/zur/Datei oder Zeichenfolge von JS', {
    //Kompressoroptionen:
    Zeichensatz: 'utf8',
    Typ: 'js',

 

Behalte Sass und andere unter Kontrolle

Während die Leistung des CSS-Selektors nicht mehr so kritisch 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. Haben Sie Ergebnisse, die Sie mit dem Team teilen möchten? Speichern Sie Dateien im öffentlichen Cloud-Speicher.

Caching einrichten

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

Cache leeren

Designer mögen Caching oft nicht, aus Angst vor Problemen mit bevorstehenden Änderungen. Eine nette Möglichkeit, dieses Problem zu lösen, besteht darin, Tags mit dem Dateinamen einzufügen. Leider funktioniert das im Code beschriebene Schema, das diesen Schritt begleitet, nicht überall, da einige Proxys sich weigern, Dateien mit "dynamischen" Pfaden zwischenzuspeichern.

<Verknüpfung 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, der eine .htaccess-Datei verwendet. Wenn Sie sich auf einem anderen System befinden, lesen Sie einfach die Dokumentation des Servers.

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.

Vielen Dank für das Lesen von Nicola Top

Wie nützlich ist der Beitrag?

Zum Bewerten auf den Smiley klicken!

durchschnittliche Bewertung 4.9 / 5. Anzahl Bewertungen: 8

Es liegen noch keine Bewertungen vor. Bewerten Sie zuerst.

Das könnte dich auch interessieren …

Eine Antwort

  1. Илья sagt:

    Ich verfolge dein Projekt schon länger. Ich schaue auf die Genesung, es ist sehr schön, Veränderungen zum Besseren zu sehen. Mir gefällt dein Design und Layout. Man merkt, dass Sie an Qualität arbeiten, vielen Dank für Ihre Bemühungen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

3 + zwölf =