21 Möglichkeiten, Ihre CSS zu optimieren und Ihre Website zu beschleunigen

Sep 12, 2025

wie man

CSS müssen eine relativ komplexe Pipeline, genau wie HTML und JavaScript, durchlaufen. Der Browser muss die Dateien vom Server herunterladen und fortfahren, um sie anzunehmen und an den DOM anzuwenden. Aufgrund des extremen Optimierungsgrades ist dieser Prozess in der Regel ziemlich schnell - für kleinere Web-Projekte, die nicht auf Frameworks basieren, sind CSS in der Regel nur einen kleinen Teil des gesamten Ressourcenverbrauchs aus.

Frameworks stören dieses Gleichgewicht. Fügen Sie einen JavaScript-GUI-Stapel wie Jquery UI ein, und schauen Sie sich CSS, JS und HTML-Größen an, in der Skyrocket. Häufig fühlen sich Entwickler in der Regel die Prise -, wenn Sie hinter einer leistungsstarken achtkernigen Arbeitsstation mit T3-Internet sitzen, kümmert sich niemand um die Geschwindigkeit. Diese Änderungen wie Latenz- oder CPU-eingeschränkten Geräte spielen.

19 coole CSS-Animationsbeispiele zum Erstellen

Die Optimierung von CSS erfordert einen mehrdimensionalen Ansatz. Während der handgeschriebene Code mit verschiedenen Techniken heruntergeschlitzt werden kann, ist ineffizient ein Framework-Code mit der Hand ineffizient. In diesen Fällen ergibt sich mit einem automatisierten Minimierer bessere Ergebnisse.

Die folgenden Schritte bringen uns auf eine Reise durch die Welt der CSS-Optimierung. Nicht jeder einzelne kann direkt auf Ihr Projekt anwendbar sein, aber behalten Sie sie daran. Willst du etwas einfacher? Versuchen Sie A. Webseitenersteller .

01. Kurzhandel verwenden

Die schnellste CSS-Klausel ist eine, die niemals analysiert wird. Verwenden von Kurzschlussklauseln, wie z. B. die unten gezeigte Margin-Deklaration, verringert die Größe Ihrer CSS-Dateien radikal. Viele zusätzliche Kurzformformen finden Sie durch Googling 'CSS-Kurzhändler'.

 P {Margin-Top: 1Px;
    Margin-Right: 2px;
    Margin-Bottom: 3px;
    Margin-Links: 4px; }

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

02. Suchen und entfernen Sie ungenutzte CSS

Die Beseitigung nicht benötigter Teile Ihrer Markierung verursacht offensichtlich immense Geschwindigkeitsgewinne. Der Chrome-Browser von Google hat diese Funktionalität aus der Box. Geh einfach zu sehen & gt; Entwickler & GT; Entwicklertools und öffnen Sie die Registerkarte "Quellen" in einer aktuellen Version und öffnen Sie das Befehlsmenü. Wählen Sie danach die Berichterstattung anzeigen und fälschen Sie Ihre Augen auf das Deckungsanalysefenster, das nicht verwendete Code auf der aktuellen Webseite hervorhebt.

03. Mach es in einer angenehmeren Mode

Die Navigation durch die Zeilen-by-line-Analyse ist nicht unbedingt angenehm. Chrome Web Performance Audit gibt ähnliche Informationen zurück - Öffnen Sie es einfach aus der Symbolleiste, Sehenswürdigkeit & GT; Entwickler & GT; Entwickler-Tools & GT; Audits und lassen Sie es laufen. Wenn fertig ist, wird eine Liste mit problematischen Elementen angezeigt.

04. Seien Sie sich der Probleme bewusst

Beachten Sie, dass eine automatisierte Analyse eines CSS immer zu Fehlern führen kann. Führen Sie einen gründlichen Test der gesamten Website durch, nachdem Sie Ihre CSS-Dateien mit den dekatifizierten Austausch ersetzt haben. - Man weiß nie, was der Optimierer verursacht hat. Und vorwärts bewegen, anständig Web-Hosting kann Ihnen helfen, die Falten in Ihrer Website auszurüsten.

05. Inline kritische CSS

Leading externe Stylesheets kostet die Zeit aufgrund der Latenzzeit - Jeder erinnert sich an den "Flash des unfreien Inhalts"? Die wichtigsten Codebits können daher in das Header-Tag gehen. Stellen Sie jedoch sicher, dass es nicht übertrieben wird. Beachten Sie, dass der Code auch von Menschen gelesen werden muss, die Wartungsaufgaben ausführen.

 & lt; HTML & GT;
  & lt; head & gt;
    & lt; style & gt;
      .Blue {Farbe: blau;}
    & lt; / style & gt;
    & lt; / head & gt;
  & lt; body & gt;
    & lt; div class = "blue" & gt;
      Hallo Welt!
    & lt; / div & gt;

06. Erlaubnis antiparalleler Analyse

@Import fügt Ihrem CSS-Code Struktur hinzu. Leider sind die Vorteile nicht kostenlos: Da Importe Nest nisten können, ist nicht möglich, dass sie parallel pariert. Eine parallelierbare Weise verwendet eine Reihe von & lt; link & gt; Tags, die der Browser sofort abrufen kann.

@Import-URL ("a.css");
@Import-URL ("b.css");
@Import-URL ("c.css");
v & lt; link rel = "stylesheet" href = "a.css" & gt;
& lt; link rel = "stylesheet" href = "b.css" & gt;
& lt; link rel = "stylesheet" href = "c.css" & gt;

07. Ersetzen Sie Bilder mit CSS

Vor Jahren war ein Satz halbtransparenter PNGs, um transluzente Effekte auf Websites zu erstellen, üblich. Heutzutage liefern CSS-Filter eine ressourcensparende Alternative. Als Beispiel sorgt der in diesen Schritt begleitende Snippet sicher, dass das fragliche Bild als Graustufenversion von sich selbst erscheint.

 IMG {
    -webkit-Filter: Graustufen (100%); /* alt
Safari * /
    Filter: Graustufen (100%);
}

08. Verwenden Sie Farbverknüpfungen

Gemeinsame Weisheit lehrt, dass sechsstellige Farbbeschreibungen der effizienteste Weg sind, um Farben auszudrücken. Dies ist nicht der Fall - in einigen Fällen können Kurzbeschreibungen oder Farbnamen kürzer sein.

 Ziel {Hintergrundfarbe: #ffffff; }
Ziel {Hintergrund: #FFF; }

09. Beseitigen Sie nicht benötigte Nullen und Einheiten

CSS unterstützt eine Vielzahl von Einheiten und Zahlenformaten. Sie sind ein dankbares Ziel für die Optimierung - sowohl nachlaufend als auch folgende Nullen können entfernt werden, wie dies im Snippet darunter demonstriert wird. Denken Sie außerdem daran, dass ein Null immer eine Null ist, und dass das Hinzufügen einer Dimension nicht den Wert für die enthaltenen Informationen hinzufügen.

 Polsterung: 0.2EM;
Marge: 20.0 Uhr;
Avalue: 0px;
Polsterung: .2EM;
Marge: 20em;
Avalue: 0;

10. Beseitigen Sie übermäßige Semikolons

Diese Optimierung ist etwas kritisch, da er Änderungen des Codes beeinflusst. Mit CSS 'Spezifikation können Sie das letzte Semikolon in einer Eigenschaftsgruppe weglassen. Da die Einsparungen dieser Optimierungsmethode minimal sind, erwähnen wir dies hauptsächlich für diejenigen, die an einem automatisierten Optimierer arbeiten.

 p {
. . .
Schriftgröße: 1.33em
}

11. Verwenden Sie einen Texturatlas

Das Laden mehrerer kleiner Sprites ist aufgrund von Protokollkeulen ineffizient. CSS-Sprites kombinieren eine Reihe kleiner Bilder in eine große PNG-Datei, die dann über CSS-Regeln unterteilt wird. Programme wie z Texturpacker. Vereinfachen Sie den Erstellungsvorgang stark.

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

12. jagen Sie den PX herunter

Eine ordentliche Möglichkeit, die Leistung zu erhöhen, verwendet eine Spezialität des CSS-Standards. Numerische Werte ohne Einheit werden angenommen, dass es Pixel sind - Entfernen des PX speichert für jede Zahl zwei Bytes.

 H2 {Polsterung: 0px; Marge: 0px;}
H2 {Polsterung: 0; Marge: 0}

13. Vermeiden Sie teure Eigenschaften

Die Analyse hat einige Tags gezeigt, um teurer als andere zu sein. Die Liste, die diesen Schritt begleitet, wird als besonders leistungshungrig angesehen - vermeiden Sie sie, wenn Sie die Gelegenheit dazu haben.

 Borderradius
    Box Schatten
    verwandeln
    Filter
    : NTH-Kind
    Position: Fixiert;
    usw.

14. Whitespace entfernen.

Whitespace - Think tabs, Carriage-Renditen und Leerzeichen - Macht den Code einfacher zu lesen, dient jedoch wenig Zweck aus dem Sicht eines Parsers. Beseitigen Sie sie vor dem Versand. Ein noch besserer Weg beinhaltet das Delegieren dieses Jobs an ein Shell-Skript oder ein ähnliches Gerät.

15. Beseitigen Sie Kommentare

Kommentare dienen dem Compiler auch keinen Zweck. Erstellen Sie einen benutzerdefinierten Parser, um sie vor der Lieferung zu entfernen. Das spürt nicht nur Bandbreite, sondern stellt auch sicher, dass Angreifer und Kloner eine schwierige Zeit haben, das Denken hinter dem Code zu verstehen.

16. Automatische Komprimierung verwenden

Yahoo's User Experience-Team erstellte eine Anwendung, die viele Kompressionsaufgaben behandelt. Es wird als Jar-Datei geliefert, hier verfügbar und kann mit einem JVM der Wahl laufen.

 java -jar yuicompressor-x.y.z.jar
Verwendung: Java -jar Yuicompressor-X.Y.Z.jar
 [Optionen] [Eingabedatei]
Globale Optionen
    -h, --help zeigt dies an
 Information
    --Type & lt; JS | CSS & GT; Gibt das an
 Typ der Eingabedatei

17. Führen Sie es von NPM aus

Sollten Sie lieber das Produkt in Node.js integrieren, besuchen Sie npmjs.com/package/yuicompressor. . Das schlecht gepflegte Repository enthält eine Reihe von Wrapper-Dateien und eine JavaScript-API.

 VAR-Kompressor = erfordern ('yuicompressor');
komprimor.comdrücken ('/ path / to /
Datei oder Zeichenfolge von JS ', {
// Kompressoroptionen:
Charset: 'utf8',
Typ: 'js',

18. Halten Sie Sass et al in Check

Während CSS Selector-Performance nicht fast so kritisch ist, wie es vor einigen Jahren (siehe Ressource), emittieren Frameworks wie SASS manchmal äußerst komplexer Code. Schauen Sie sich die Ausgabedateien von Zeit zu Zeit an und denken Sie über Möglichkeiten, die Ergebnisse zu optimieren. Erhielt Ergebnisse, um mit einem Team zu teilen? Halten Sie Dateien in gemeinsam genommen Cloud-Speicherung. .

Was ist sass?

19. Caching einrichten

Ein alter Sprichwort behauptet, dass die schnellste Datei einer ist, die niemals über die Drähte gesendet wird. Wenn Sie die Browser-Cache-Anforderungen erstellen, erreicht dies effizient. Leider muss das Setup der Caching-Header auf dem Server erfolgen. Nutzen Sie die beiden in den Screenshots gezeigten Tools, die in den Screenshots angezeigt werden - sie bieten einen schnellen Weg, um die Ergebnisse Ihrer Änderungen analysieren.

20. Bust den Cache

Designer mögen oft die Zwischenspeicherung aufgrund von Problemen mit anstehenden Änderungen. Eine ordentliche Weise um das Problem geht darum, einschließlich Tags mit dem Dateinamen einzubußen. Leider funktioniert das in diesem Schritt integrierte Schema, der in diesem Schritt begleitet, nicht überall funktioniert, da einige Proxies nicht ablehnen, Dateien mit "dynamischen" Pfaden zu speichern.

 & lt; link rel = "stylesheet" href = "style.css? V = 1.2.3" & gt;

21. Vergiss nicht die Grundlagen

Die Optimierung von CSS ist nur ein Teil des Spiels. Wenn Ihr Server keine HTTP / 2- und GZIP-Komprimierung verwendet, geht während der Datenübertragung viel Zeit verloren. Glücklicherweise ist das Fixieren dieser beiden Probleme in der Regel einfach. Unser Beispiel zeigt ein paar Tweaks an den allgemein verwendeten Apache-Server. Wenn Sie sich auf einem anderen System befinden, konsultieren Sie einfach die Serverdokumentation.

 Pico /etc/httpd/conf/httpd.conf
AddoutputFilterByType defrat Text / HTML
AddoutputFilterByType defratieren Text / CSS

Dieser Artikel wurde ursprünglich in Ausgabe 282 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Kaufen Sie das Thema 282 hier oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

10 Erstaunliche neue CSS-Techniken
Welches ist der beste CSS-Präprozessor?
Eine Einführung in CSS-Eigenschaften

21 Möglichkeiten, Ihre CSS zu optimieren und Ihre Website zu beschleunigen

01. Kurzhandel verwenden

02. Suchen und entfernen Sie ungenutzte CSS

03. Mach es in einer angenehmeren Mode

04. Seien Sie sich der Probleme bewusst

05. Inline kritische CSS

06. Erlaubnis antiparalleler Analyse

07. Ersetzen Sie Bilder mit CSS

08. Verwenden Sie Farbverknüpfungen

09. Beseitigen Sie nicht benötigte Nullen und Einheiten

10. Beseitigen Sie übermäßige Semikolons

11. Verwenden Sie einen Texturatlas

12. jagen Sie den PX herunter

13. Vermeiden Sie teure Eigenschaften

14. Whitespace entfernen.

15. Beseitigen Sie Kommentare

16. Automatische Komprimierung verwenden

17. Führen Sie es von NPM aus

18. Halten Sie Sass et al in Check

19. Caching einrichten

20. Bust den Cache

21. Vergiss nicht die Grundlagen

wie man - Die beliebtesten Artikel

Machen Sie Ihren eigenen Stift mit nur 4 Haushaltsgegenständen (ernsthaft)

So codieren Sie Smart Text-Effekte mit CSS

Wie zeichnet man eine Katze

So strukturieren Sie Medienabfragen in SASS

Streubäume mit V-Ray

Master-Großumgebungen in 3DS max

So erstellen Sie erstaunliche Effekte mit CSS-Formen

Erstellen Sie einen gießenden Wassereffekt in Realflow

Kategorien