CSS Performance optimieren

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

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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>
 

Banana_Jones

Aktives Mitglied
22 Juli 2012
603
50
28
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)
 

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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 : )
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
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.
 

Banana_Jones

Aktives Mitglied
22 Juli 2012
603
50
28
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.
 

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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
 
Werbung: