CSS-Optimierung

✔️ Schlagwort: CSS-Optimierung

Unter CSS-Optimierung versteht man den Prozess zur Verbesserung der Leistung und Ladegeschwindigkeit von Webseiten durch Reduzierung der Größe von CSS-Dateien und Vereinfachung ihrer Struktur. Dies ist wichtig, um die Benutzererfahrung zu verbessern und das Suchmaschinenranking zu verbessern.

So optimieren Sie CSS – CSS kürzen

CSS zu kürzen bedeutet, alle unnötigen Zeichen aus dem Code zu entfernen, z. B. Leerzeichen, Zeilenumbrüche und Kommentare. Dadurch wird die Größe der CSS-Datei reduziert und das Laden beschleunigt.

Kombinieren von CSS-Dateien

Auch das Zusammenfassen mehrerer CSS-Dateien zu einer kann das Laden der Seite beschleunigen. Dies liegt daran, dass der Browser weniger Anfragen an den Server stellen muss.

Verwenden von Selektoren nach Klasse und ID

Durch die Verwendung von Klassen- und ID-Selektoren anstelle von Tag-Selektoren kann die Browserverarbeitung von CSS beschleunigt werden. Klassen- und ID-Selektoren sind spezifischer und ermöglichen dem Browser, passende Elemente auf der Seite schnell zu finden.

Optimierung der Stilreihenfolge

Auch die Reihenfolge der Stile in einer CSS-Datei kann sich auf die Rendergeschwindigkeit auswirken. Stile, die auf Elemente oben auf der Seite angewendet werden, sollten oben in der CSS-Datei platziert werden. Dadurch kann der Browser den Seiteninhalt schneller darstellen.

Die CSS-Optimierung ist ein wichtiger Aspekt der Website-Entwicklung. Es trägt dazu bei, die Benutzererfahrung zu verbessern und das Suchmaschinenranking zu verbessern. Es gibt viele CSS-Optimierungstechniken wie das Kürzen von Code, das Verketten von Dateien und die Verwendung von Klassen- und ID-Selektoren.

CSS-Minimierung

Unter CSS-Minimierung versteht man den Prozess der Komprimierung von CSS-Code durch Entfernen aller unnötigen Zeichen wie Leerzeichen, Zeilenumbrüche und Kommentare. Dadurch wird die Größe der CSS-Datei reduziert und das Laden beschleunigt. Es gibt verschiedene CSS-Minifizierungstools wie CSS Minifier und CleanCSS.

Bildoptimierung

Durch die Bildoptimierung kann auch die Seitenleistung verbessert werden. Das bedeutet, Bilder auf die kleinstmögliche Größe zu komprimieren, ohne an Qualität zu verlieren. Es gibt verschiedene Bildoptimierungstools wie TinyPNG und JPEGmini.

Die CSS-Optimierung ist ein wichtiger Aspekt der Website-Entwicklung. Es trägt dazu bei, die Benutzererfahrung zu verbessern und das Suchmaschinenranking zu verbessern. Es gibt viele CSS-Optimierungstechniken wie das Kürzen von Code, das Verketten von Dateien und die Verwendung von Klassen- und ID-Selektoren. Vergessen Sie nicht, auch Bilder zu optimieren, um die Seitenleistung zu verbessern.

Es gibt vier Hauptaspekte der CSS-Optimierung:

1. Download-Leistung – hauptsächlich durch Reduzierung der Dateigröße, Reduzierung der Download-Blockierung und Verbesserung der Parallelität.

2. Selektorleistung.

3. Rendering-Leistung.

4. Wartbarkeit, Zuverlässigkeit.

CSS-Optimierung – Ladeleistung

1. CSS-Komprimierung: Durch das Packen und Komprimieren des geschriebenen CSS kann dessen Größe erheblich reduziert werden.

2. Einheitlicher CSS-Stil: Wenn der untere und linke Rand erforderlich ist,

⟹ Viele Male auswählen: Rand: oben 0 unten 0;

⟹ Aber margin-bottom: unten; margin-left: links; die Ausführung ist effizienter;

3. Reduzieren Sie die Verwendung von @import und verwenden Sie einen Link, da letzterer beim Laden der Seite zusammen geladen wird und ersterer vor dem Laden warten muss, bis die Seite geladen ist.

4. Gestalten Sie Ihr CSS-Layout mit Bedacht, achten Sie auf die Wiederverwendung von Stilen und reduzieren Sie die Renderzeit. Verwenden Sie für die Klassen- und ID-Auswahl einen weniger globalen Matcher wie * und legen Sie Basisstile sinnvoll fest (z. B. durch Festlegen einer Tabelle{}), um die Wiederverwendbarkeit zu verbessern.

CSS-Optimierung – Selektorleistung

1. CSS-Selektoren werden von rechts nach links abgeglichen. Bei Verwendung von untergeordneten Selektoren prüft der Browser alle untergeordneten Elemente, um festzustellen, ob es sich um das angegebene Element handelt usw.;

2. Vermeiden Sie die Verwendung von Platzhaltern. Zum Beispiel *{} die Anzahl der Berechnungen ist erstaunlich! Wählen Sie nur die Artikel aus, die Sie benötigen.

3. Wählen Sie so wenige Tags wie möglich, aber verwenden Sie eine Klasse. Beispiel: #nav li{}, Sie können den Klassennamen nav_item zu li hinzufügen und .nav_item{} wie folgt auswählen.

4. Verwenden Sie keine Tags zur Qualifizierung von Bezeichnern oder Klassenselektoren. Beispiel: ul#nav sollte zu #nav vereinfacht werden.

5. Benutzen Sie den Kinderselektor so wenig wie möglich und reduzieren Sie das Gewicht des Selektors. Der Overhead für nachkommende Selektoren ist am höchsten. Versuchen Sie, die Tiefe der Selektoren auf ein Minimum zu beschränken. Die höchste Ebene umfasst nicht mehr als drei Ebenen und mehr verwenden Klassen, um jedes Beschriftungselement zu binden.

6. Denken Sie über die Vererbung nach. Informieren Sie sich darüber, welche Eigenschaften vererbt werden können, und vermeiden Sie die Wiederholung der Regeln für diese Eigenschaften.

CSS-Optimierung – Rendering-Leistung

1. Verwenden Sie Hochleistungsattribute sorgfältig: Floating, Positionierung;

2. Seitenwechsel und Neuzeichnen minimieren;

3. Ordnen Sie es entsprechend der Reihenfolge des CSS-Schreibens neu an:

⟹ Position: Position, oben, links, Z-Index, Float, Anzeige.

⟹ Größe: Breite, Höhe, Ränder, Polsterung.

⟹ Textreihe: Schriftart, Zeilenhöhe, Farbe, Buchstabenabstand.

⟹ Hintergrundrand: Hintergrund, Rand.

⟹ Sonstiges: Animation, Übergang.

4. Neu zeichnen: Rahmen, Umriss, Hintergrund, Boxschatten. Wenn Sie Hintergrundfarbe verwenden können, versuchen Sie, keinen Hintergrund zu verwenden.

5. Leere Regeln entfernen: {};

6. Wenn der Attributwert 0 ist, werden keine Einheiten hinzugefügt;

7. Der Attributwert ist eine Gleitkommazahl 0.**, und die 0 vor dem Dezimalpunkt kann weggelassen werden;

8. Standardisieren Sie verschiedene Browser-Präfixe: diejenigen mit Browser-Präfixen stehen an erster Stelle. Es folgen die Standardattribute;

9. Verwenden Sie nicht das Präfix @import, da dies die CSS-Ladegeschwindigkeit beeinträchtigt.

10. Nutzen Sie die CSS-Vererbungseigenschaften voll aus, um die Codemenge zu reduzieren.

11. Extrahieren Sie öffentliche Stile abstrakt und reduzieren Sie die Codemenge.

12. Der Selektor optimiert die Verschachtelung und versucht, zu tiefe Ebenen zu vermeiden;

13. CSS-Sprite-Bild, ein kleines Symbol desselben Teils derselben Seite, bequem zu verwenden und die Anzahl der Anforderungen auf der Seite zu reduzieren, aber das Bild selbst wird größer. Berücksichtigen Sie bei der Verwendung die Vor- und Nachteile klar. und dann verwenden;

14. Platzieren Sie die CSS-Datei oben auf der Seite.

Wartbarkeit und Zuverlässigkeit

1. Extrahieren Sie Stile mit denselben Attributen, integrieren Sie sie und verwenden Sie sie über Klassen auf Seiten, um die Wartbarkeit von CSS zu verbessern.

2. Nach dem vorherigen ist oocss auch eine Möglichkeit, die CSS-Leistung zu verbessern. Durch die Definition wiederverwendbarer und semantisch guter Basisklassen und deren anschließendes Hinzufügen zum HTML wird diese Technik auch von vielen UI-Frameworks wie :class=“btn btn-active btn-blue“;

3. Trennung von Stil und Inhalt: CSS-Code wird in externem CSS definiert;

4. Trennung von Container und Stil;

⟹ Im Folgenden finden Sie Materialien zu diesem Thema: