Notifications
Clear all

CSS Optimierung  

  RSS
Christian Erdtmann
Mitglieder Admin

Bei der Optimierung einer Website spielt die Ladezeit immer eine große Rolle. Die CSS Dateien können dabei auf verschiede Art und weiße optimiert werden.

 

1. CSS Aufräumen:

Alle genutzten CSS-Dateien auf nicht vorhandene Elemente zu prüfen. Wenn man das manuel macht ist es ein großer Zeitaufwand und man kommt auch schnell an seine Grenzen. Das Firefox-Plugin Dust-Me findet ungenutztes CSS.

In CSS werden häufig aber auch Angaben für bestimmte Browser hinterlegt, weshalb nicht alle gefundenen Elemente blind gelöscht werden sollten

 

2. Leeräume in den CSS Dateien entfernen (CSS Minify):

Jedes Zeichen belegt Speicherplatz, auch wenn es sich dabei nur um Leerzeichen handelt. Um eine CSS Datei so klein wie möglich zu machen, ist es also wichtig dies sinnlosen Zeichen zu entfernen um den Speicherbedarf zu reduzieren.

Auch hier wäre eine manuelle durchführung sehr zeitaufwändig und auch fehleranfällig. Daher gibt es auch dafür wieder verschiedene Plugins und Tools die einem die Arbeit abnehmen.

 

3. CSS Kurzschreibweise verwenden:

Man kann ein Element beispielsweise wie folgt formatieren:

margin-top: 50px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 30px;

besser wäre aber die Kurzschreibweise:

margin: 50px 10px 15px 30px;

Auch hier kann in speziellen fällen noch weitere reduziert werden, falls sich links und rechts gleichen

margin: 50px 10px 40px;

und ggf. auch oben und unten gleichen sind:

margin: 50px 10px;

Das führt zu deutlich weniger Speicheraufwand und kann schneller verarbeitet werden.

 

4. Komprimieren der CSS Datieen:

Die Komprimierung von CSS-Datein kann bereits im Vorfeld erfolgen, sodass die Dateien komprimiert ausgeliefert werden oder über Plugins in Beipielsweise WordPress umgesetzt werden.

 

5. CSS Dateien zusammenfassen:

Jede einzelne CSS-Datei stellt einen HTTP-Request dar. Ebenso wie Javascript-Dateien und Bilder. Je weniger HTTP-Requests benötigt werden, desto schneller wird die Webseite an den Besucher ausgeliefert und vollständig angezeigt. Für das zusammfassen der CSS-Dateien gibt es ebenfalls wieder verschiedene Plugins und Tools die einem die Arbeit abnehmen.

 

6. Schnelle Selektoren verwenen:

Während CSS-Selektoren keinerlei Auswirkungen auf die Ladezeiten haben, kommen Kombinatoren im CSS-Code durchaus in der Performance zu tragen. Gerade die Nachfahren-Kombinatorenstellen je nach Tiefe eine Performancebremse dar. Verzichtet man auf die Verwendung vion „Kind-Kombinatoren“ beeinträchtigt dies positiv die Performance.

Dazu ein Beispiel:

a (schnell)
.ein_link (ebenfalls schnell)
div > span > a.ein_link (eher langsam)
div span a.ein_link (sehr langsam)

 

7. Links zu extern gehosteten Fonts

Anstelle Links zu extern gehosteten Fonts zu nutzen lieber die Fonts auf dem eigenem Webspace ablegen und von dort laden.

 

8. Überqualifizierung vermeiden

figure figcaption a <-Falsche
figcaption a <- Richtig

figure ist hier überflüssig, wenn das figcaption-Tag sowieso nur in den figure-Elementen vorkommt.
Zitat
Veröffentlicht : 11/02/2020 3:29 pm
Patrick Schulze
Mitglied Admin

Danke für das ausführliche Beschreiben der Optimierung im CSS Bereich auf einer eigenen Website.

Hierzu möchte ich gerne eine kleine Warnung ausgeben:

Bitte Punkt 1 und Punkt 2 NICHT durchführen wenn Ihr nicht wisst was Ihr tut.
Damit könnt Ihr euch eure Website dermaßen zerschießen und diese dann (Fachmännisch) zu reparieren kann folglich teuer werden.
Oder Ihr gebt euer Projekt auf bzw. müsst es komplett neu machen, was schade wäre.

Gerade bei dem beliebten CMS/Blogging Software WordPress, gibt es einige (Wie von Christian beschrieben) gute Plugins welche diese Arbeit übernehmen.

Zum Punk 3:

Ist dies wirklich merkbar in der Website Performance?
Ich weiß nicht ob man das merkt, wurden hier schon einmal tests durchgeführt?

Zum Punkt 7:

Ich persönlich empfehle hier immer die Fonts auf den eigenen Webspace zu laden, schon aus EU-DSGVO gründen.
Oder man verwendet die Standard Fonts wie z.B. Arial

Zum Punkt 8:

@cerdtmann
Kannst du das weiter ausführen?
Selbst ich verstehe bei diesem Punkt leider nur Bahnhof.

Was ist eine Überqualifizierung?
Wie wird so etwas in CSS Praktiziert und für was ist es gut?

Wieso sollte man das nicht anwenden?

Dankeschön 😉

LG Patrick

Gründer und Administrator von Seo-Rec.net

Bei Fragen oder Problemen könnt Ihr mich gerne anschreiben im Community Chat oder per E-Mail.

Meine Firmen Website: https://webster-it.de
Viel Spaß bei SEO-Rec!

AntwortZitat
Veröffentlicht : 11/02/2020 8:22 pm