Die erforderliche Zeit für das Rendering im Browser lässt sich durch eine Optimierung der Auszeichnungen in den Stylesheets verbessern. Die Angabe einzelner CSS-Dateien im <head>-Element des HTML-Dokumentes oder das Zusammenführen im Stylesheet mittels @import wirkt sich, bedingt durch zusätzliche HTTP-Anfragen, nachteilig auf die Ladezeit der Webseite aus und sollte vermieden werden. Stattdessen bietet es sich an alle CSS-Definitionen in einer einzigen CSS-Datei zusammenzufassen, um die Anfragen an den Webserver zu reduzieren. Das media-Attribut bei der Auszeichnung von Stylesheets verhindert nicht, dass die CSS-Dateien immer geladen werden [Zil13].
Einfluss auf die Geschwindigkeit des Renderings im Browser hat außerdem die Verwendung der CSS-Selektoren. Über diese erfolgt der Zugriff auf Elemente des DOM. Eine möglichst effiziente Schreibweise verringert die vom Browser benötigte Zeit, um die CSS-Selektoren mit den Elementen des HTML-Dokumentes abzugleichen [Sou09].
„Je einfacher und exakter die CSS-Selektoren geschrieben sind, desto besser ist der Interpretationsvorgang im Browser“ [KR13].
Zur Auszeichnung der Eigenschaften in einer CSS-Datei dienen Element-Selektoren, Klassen-Selektoren und ID-Selektoren [Koc12]. Die Definition von Eigenschaften über Element-Selektoren erfordert einen Abgleich aller Elemente des Selektors im DOM, um anschließend die festgelegten Eigenschaften auf spezifische Elemente anzuwenden. Bei einer Auszeichnung durch Klassen- oder ID-Selektoren hingegen werden ausschließlich die spezifischen Elemente berücksichtigt. Eindeutige ID-Selektoren ermöglichen dem Browser, aufgrund ihrer Einmaligkeit im HTML-Dokument, die schnellste Zuordnung und Interpretation. Bei der Auszeichnung ist zu beachten, dass die CSS-Selektoren von rechts nach links interpretiert werden [Sou09].
Durch die Definition einer eigenen Klasse für das zu gestaltende Element kann auf verschachtelte Kombinationen der Selektoren, die zu einer längeren Interpretationszeit führen, verzichtet werden. Wird zur Auszeichnung einer Verlinkung in einem Listen-Element kein Klassen-Selektor definiert, sondern eine Kombination aus den Element-Selektoren ul li a, muss der Browser zur Anwendung der Gestaltungsvorgabe erst alle <a>-Elemente des Dokumentes in dem DOM identifizieren und nachfolgend die Elemente herausfiltern, die von den Elementen <li> und <ul> umgeben sind [Koc12].
margin-top: 20px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
Um die Dateigröße der CSS-Datei gering zu halten und Wiederholungen zu vermeiden, können ähnliche Definitionen für unterschiedliche Elemente in den Stylesheets zusammengefasst werden. Die Wartbarkeit des Quellcodes lässt sich so verbessern und damit der Aufwand für Anpassungen reduzieren. Außerdem kann eine Komprimierung des Quellcodes durch die Nutzung einer verkürzten Schreibweise erreicht werden.
Während bei der ausführlichen Schreibweise jede Eigenschaft einzeln angegeben wird, wie in dem oberen Quellcode gezeigt, lassen sich die Eigenschaften in der folgenden verkürzten Schreibweise zusammenfassen. Durch die geringere Zeichenanzahl wird eine Reduzierung der Dateigröße erreicht [Koc12].
margin: 20px 0 5px;
Verkürzte Schreibweisen existieren unter anderem für die Eigenschaften background, border, font, margin, padding und transition.
Mit dem Webstandard CSS3 wurden neue Gestaltungsmöglichkeiten eingeführt, die es ermöglichen auf den Einsatz von Grafiken für bestimmte Effekte, wie Schatten, Farbverläufe oder abgerundete Ecken, zu verzichten. Daher sollte bei der Umsetzung von optischen Gestaltungseffekten geprüft werden, ob sich diese durch Definitionen in dem Stylesheet erzeugen lassen [KR13]. Animationseffekte erforderten bisher den Einsatz von JavaScript, mit der CSS3-Eigenschaft transition lassen sich diese nun durch Definitionen im Stylesheet realisieren [KR13].
