Geschwindigkeit Geringe Auswirkung Einfach 30–60 Min.

Inline-Styles

Viel style="..." verschlechtert Cache und Wartung.

Was es ist

Inline-Styles sind CSS, das direkt im Attribut style="..." an Elementen geschrieben wird. In großer Menge vergrößern sie das HTML und lassen sich weder cachen noch wiederverwenden.

Warum es wichtig ist

HTML mit vielen Inline-Styles ist größer (wird bei jedem Laden übertragen) und schwerer zu warten. Eine Ausnahme ist bewusstes Inline-„Critical CSS“ im Header zur Beschleunigung.

So geht's

1Verschiebe wiederholte Styles in externes/zusammengefasstes CSS mit Klassen.
2Belasse Inline nur für wirklich einmalige, dynamisch berechnete Werte.
3Bewusstes Critical CSS im <head> ist in Ordnung, das ist nicht dasselbe.

Fazit

Niedrige Priorität, eher eine Frage von Sauberkeit und Cachebarkeit. Verschiebe massenhafte Inline-Styles in Klassen; eine Ausnahme ist bewusstes Critical CSS. Gehe es nicht vor dem Bildgewicht und blockierenden Ressourcen an.

Verwandte Themen