• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Performance optimieren

Marv

Mitglied
Hallo zusammen,

wie prüfe ich am besten, ob mein CSS performant ist?

Ich möchte die Zeit, die der Browser zum rendern(?) der Styles benötigt messen anhand konkreter Zahlen (Milisekunden).

Es gibt zwar viele Best Practices zu CSS optimierung, manche meinen das Wäre aufgabe der Browser etc. ich würde das aber gerne selber nachmessen können, sonst glaub ich das alles nicht.

Beispiel(Was ist am ende Performanter):
HTML:
.navbar { background:gray; }
.navbar > li { display:inline;background:#ffffff; }

<ul class="navbar">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

vs

.navbar { background:gray; }
.navbar-item { display:inline;background:#ffffff; }
<ul class="navbar">
  <li class="navbar-item">Menu 1</li>
  <li class="navbar-item">Menu 2</li>
  <li class="navbar-item">Menu 3</li>
</ul>
 
Werbung:
Variante 2 sollte eigentlich performanter sein. Vergleiche dazu diese Seite: http://stevesouders.com/efws/css-selectors/child.php
Dort wird identischer Markup jeweils über verschiedene CSS-Selektoren angesprochen und die Ladezeit gemessen.

Allerdings: Die Unterschiede bewegen sich (zumindest bei meinem kurzen Test) im einstelligen Millisekundenbereich. Dafür einen Aufwand zu betreiben, lohnt m.E. nicht und bringt evtl. weitere Nachteile mit sich (wartbarer Code, aufgeblählter Markup, etc)
 
Hey, danke für die Antwort.

Habe auchmal damit getestet. Meine Ergebnisse und das, was ich in der zwischenzeit noch gefunden habe sagen eigentlich auch aus was du schon erschlossen hast.

Bei Google Developers wird geraten statt "ul li" dann ".unordered-list-item" zu nehmen, gleicht dem, wie du meintest, dass Variante 2 performanter sei.

Ich frage mich dann warum Google das so empfiehlt, wahrscheinlich dient das aber zur Grundlegenden Performance Info, und wenn ich das richtig gelesen hatte, werden die Browser ja onehin immer besser für CSS Performance optimiert.

Dann werde ich letztendlich doch lieber übersichtlichen Code schreiben, statt für 10 Milisekunden zu optimieren. Grundlegende Best Practices für CSS kann man ja trotzdem einhalten : )
 
Werbung:
Zu Best Practices gehört der Einsatz von Frameworks wie LESS oder SASS. Die nested rules ersparen viel Schreibarbeit und nach dem Kompilieren erhält man eine CSS-Datei mit tief ausdifferenzierten Selektoren.
 
nach dem Kompilieren erhält man eine CSS-Datei mit tief ausdifferenzierten Selektoren.
Aber gerade das ist ja in der Therorie weniger performant als das reine Ansprechen über eine Klasse. Dem Google-Artikel zu Folge wäre es am besten, keinerlei Verschachtelungen zu verwenden, sondern alle zu stylenden Elemente mit einer Klasse zu versehen und direkt anzusprechen. Allerdings betrachtet der Artikel auch nur die reine CSS-Performance und lässt die daraus resultierenden Nachteile (die ja auf der Hand liegen) außer Acht.
 
Werbung:
Hey, mit Best Pracetice habe ich mich aber wiederum nur auf den umgang mit CSS Selektoren bezogen : )

Als kleines Faizt für CSS Performance habe ich durch recherchieren nun folgendes:

  1. CSS-Selektor-Performance ist in heutigen Browser sehr optimiert, spielt keine große Rolle mehr. Auch ineffiziente Selektoren (.wrapper ul li a {}) fallen nichtmehr stark ins Gewicht.
  2. Es lohnt sich erst ab einem Page Speed Score von 90+ (Firefox PageSpeed Plugin), zu versuchen durch CSS-Selektor-Optimierung noch Performance zu steigern. Davor gibt es andere Methoden, die effizienter und schneller Performance-Vorteile bringen. Bsp. Bildkomprimierung, gzip, minifiziertes css / js
 
Zurück
Oben