Inline-Styles

Was wir prüfen

Wir zählen auf der Startseite die Elemente mit einem style-Attribut, also Gestaltung direkt im HTML wie:

<p style="color: #333; font-size: 18px; margin-top: 20px;">…</p>

• Mehr als 10 Elemente: Hinweis.
• Mehr als 50 Elemente: Warnung.

Erkennen wir einen Page-Builder, nennen wir ihn im Bericht als wahrscheinliche Ursache.

Warum das wichtig ist

Bei sauber gebauten Websites stehen Inhalt und Gestaltung getrennt: Das HTML enthält den Text und seine Struktur, eine CSS-Datei legt fest, wie es aussieht. Inline-Styles mischen beides.

• Mehr Code: Dieselben Stilangaben stehen bei jedem Element erneut im HTML. Die Seite wird grösser und lädt langsamer.
• Kein Zwischenspeichern: Eine CSS-Datei lädt der Browser einmal und verwendet sie auf allen Seiten wieder. Inline-Styles werden mit jeder Seite neu übertragen.
• Aufwendige Anpassungen: Soll die Schriftfarbe geändert werden, muss man sie an jedem Element einzeln ändern statt an einer Stelle.
• Uneinheitliches Design: Wenn jedes Element seine eigenen Werte hat, entstehen leicht kleine Unterschiede in Abständen, Grössen und Farben.
• Schwer überschreibbar: Inline-Styles haben Vorrang vor der CSS-Datei. Anpassungen für Smartphones oder Barrierefreiheit greifen dann nicht.

So behebst Du es

Page-Builder

Die meisten Inline-Styles stammen aus Page-Buildern. Typische Einstellungen:

• Elementor: Unter «Einstellungen › Leistung» bzw. «Erweitert» die «CSS-Ausgabemethode» auf «Externe Datei» stellen.
• Divi: In den Theme-Optionen unter «Leistung» die statische CSS-Generierung aktivieren.
• WPBakery, Beaver Builder & Co.: Ähnliche Optionen finden sich meist unter «Leistung» oder «Performance».

Texte im Editor

Texte, die aus Word oder E-Mails kopiert wurden, bringen oft Inline-Styles mit. Entferne die Formatierung und formatiere neu mit den Mitteln des Editors. Füge künftig mit Ctrl+Shift+V als reinen Text ein.

Eigener Code

Verschiebe wiederkehrende Stilangaben in eine Klasse:

<p class="einleitung">…</p>

.einleitung { color: #333; font-size: 1.125rem; margin-top: 1.25rem; }

Was bleiben darf

Dynamische Werte, etwa ein Hintergrundbild, das im CMS pro Abschnitt gewählt wird, oder die Breite eines Fortschrittsbalkens, dürfen inline bleiben.

So prüfst Du es selbst

Öffne die Entwicklertools (F12), Reiter «Konsole», und gib document.querySelectorAll('[style]').length ein. Die Zahl zeigt, wie viele Elemente Inline-Styles tragen.

Häufige Fragen

Sind Inline-Styles grundsätzlich falsch?

Nein. Einzelne, etwa für ein Hintergrundbild aus dem CMS, sind normal. Problematisch wird es, wenn Dutzende oder Hunderte Elemente ihre ganze Gestaltung im HTML tragen.

Der Page-Builder erzeugt das automatisch. Muss er gewechselt werden?

Meist nicht. Die gängigen Builder haben Einstellungen, die Stile in eine eigene Datei schreiben. Erst wenn das nicht reicht, lohnt sich ein Blick auf schlankere Alternativen.