Wie ich an CLS und einem springenden Header verzweifelt war

Von monatelanger Frustration, schlaflosen Nächten und dem Gefühl „Ich kann WordPress nicht mehr sehen“ bis hin zu einer stabilen Seite mit grünen Core Web Vitals danke eine Pizza

Hallo,

Wenn du gerade diesen Artikel liest, dann wahrscheinlich nicht, weil du zufällig nach einem technischen WordPress-Thema gesucht hast. Wahrscheinlicher ist: Du bist genervt. Vielleicht sogar erschöpft. Deine Website fühlt sich nicht mehr sauber an. Irgendetwas stimmt nicht. Google Search Console zeigt dir plötzlich Warnungen zu Cumulative Layout Shift (CLS), auf dem Handy verschiebt sich der Inhalt, Elemente springen sichtbar hin und her, und dein Header – eigentlich das saubere Aushängeschild deiner Seite – wirkt bei jedem Reload instabil.

Genau so ging es mir.

Und ich meine nicht für ein paar Tage.
Ich meine: über Monate.

Meine Seite lud scheinbar normal. PageSpeed war oft zu gut. Die Inhalte waren online. Besucher kamen. Von außen sah alles in Ordnung aus. Aber sobald man genauer hinsah, merkte man: Irgendetwas war faul. Vor allem mobil. Vor allem im echten Nutzerverhalten. Und vor allem beim Header.

Dieses kleine, aber extrem nervige Springen beim Laden hat mich irgendwann wirklich an den Rand meiner Geduld gebracht. Das Logo schoss beim Seitenaufruf erst nach oben, das Menü zuckte hinterher, und erst ein oder zwei Sekunden später saß alles da, wo es eigentlich von Anfang an hätte sein sollen.

Vielleicht kennst du genau dieses Gefühl:
Man schaut dieselbe Seite zehnmal an, testet im Browser, am Handy, im Inkognito-Modus, leert Caches, deaktiviert Plugins, aktiviert sie wieder – und am Ende weiß man nur eines sicher: Es macht einen verrückt.

Ich weiß, wie sich das anfühlt.
Weil ich genau da war.

Die Lösung dabei ist einfacher als man denkt. Lese in dem Beitrag wie eine große Pizza mir den Tag gerettet hat.

Der Anfang: Eigentlich lief doch alles ganz ordentlich

Meine Website alexander-patzer.de läuft mit WordPress, Kadence Theme, Gutenberg und Rank Math. Ein Setup, das grundsätzlich sauber, modern und performant sein kann. Zusätzlich läuft Google AdSense, weil die Seite natürlich nicht nur Arbeit machen, sondern auch etwas einspielen soll.

Die Werte in PageSpeed Insights lagen in vielen Fällen zwischen 90 und 100. Also eigentlich mehr als ordentlich. Die Website war erreichbar, die Inhalte wurden gelesen, die Struktur war nicht chaotisch. Oberflächlich betrachtet hätte man sagen können: läuft doch.

Bis irgendwann im Herbst 2025 die ersten Warnungen in der Google Search Console auftauchten.

Erst ein paar URLs. Dann mehr. Dann immer mehr.

„Schlechte URLs“ wegen CLS.
Später dann „Optimierungsbedürftig“.
Und irgendwann betraf es nicht mehr nur einzelne Unterseiten, sondern Dutzende. Später fast 70 Seiten. Besonders betroffen: Mobilgeräte.

Mein erster Gedanke war typisch SEO-getrieben:
Vielleicht liegt es an älteren Artikeln. Vielleicht an schwachen Beiträgen mit wenig Struktur. Vielleicht an Seiten, die ohnehin bereinigt werden sollten.

Also habe ich angefangen, an anderen Stellen aufzuräumen:

• schwache Artikel auf noindex gesetzt,
• Kategorien gesäubert,
• Inhalte neu strukturiert,
• Pillar-Cluster aufgebaut,
• SEO-technisch insgesamt aufgeräumt.

Alles davon war nicht falsch. Im Gegenteil: Es war in vielen Punkten sinnvoll.

Nur hatte das mit dem eigentlichen Problem fast nichts zu tun.

Denn das CLS-Problem blieb.
Unverändert.
Hartnäckig.
Als würde mich die Seite auslachen.

Die ersten echten Alarmzeichen: horizontales Scrollen und abgeschnittene Werbeblöcke

Irgendwann habe ich aufgehört, mich nur auf Tools zu verlassen, und begonnen, einzelne Seiten ganz bewusst live auf dem Handy zu prüfen. Nicht nur kurz. Sondern mehrfach. Mit Reloads. Mit verschiedenen Seiten. Mit echten Blicken auf das Verhalten beim Laden.

Und da sah ich es.

Auf einigen Artikeln – unter anderem auf Seiten wie „Firma gründen Zypern“ oder „Beste Solar-Powerbanks 2025“ – tauchte plötzlich eine horizontale Scrollleiste auf. Die Seite war seitlich scrollbar. Nicht stark, aber genug, um sofort zu merken: Hier stimmt etwas mit der Breite eines Elements nicht.

Im Kadence Customizer in der Mobile-Vorschau wurde es dann noch deutlicher. Ein Google-Ad-Block war sichtbar abgeschnitten. Der Container wirkte breiter als der eigentliche Viewport. Unten erschien die Scrollbar. Oben verschob sich der Inhalt. Alles fühlte sich instabil an.

In diesem Moment war mein erster klarer Verdacht:

Die Ads sind schuld.

Also begann ich zu testen.

Zuerst habe ich die Auto Ads in AdSense ausgeschaltet.
Keine echte Verbesserung.

Dann habe ich das komplette adsbygoogle-Skript, das ich über HFCM eingebunden hatte, deaktiviert.

Und siehe da:
Die horizontale Scrollleiste war auf manchen Seiten weg.

Das war wichtig, weil ich damit zum ersten Mal nicht nur ein Gefühl, sondern einen klaren Zusammenhang hatte. Wenn das Werbeskript weg war, verschwand zumindest ein Teil des Problems. Aber komplett gelöst war es noch nicht.

Denn der Header sprang trotzdem noch.

Der Punkt, an dem ich wirklich fast aufgegeben hätte

Und dann begann die Phase, die mich mental am meisten zermürbt hat.

Ich lud die Seite immer wieder neu. Zehnmal. Zwanzigmal. Verschiedene Browser. Verschiedene Geräte. Immer dasselbe Bild:
Logo und Menü sitzen beim ersten Moment des Ladens nicht stabil. Der Header rutscht. Es gibt ein kleines Zucken. Dann erst stabilisiert sich alles in der endgültigen Position.

Es klingt nach einer Kleinigkeit. Aber wenn man es einmal sieht, sieht man es immer. Und wenn es auf der eigenen Website passiert, fühlt es sich an, als würde die ganze Seite technisch „unsauber“ wirken.

Das eigentlich Verrückte daran war aber etwas anderes:

In PageSpeed Insights und Lighthouse stand sehr oft CLS 0,00.
Also theoretisch alles gut.

Aber in der Google Search Console, also in den Field Data mit echten Nutzerdaten, sah das Bild anders aus. Dort war CLS weiterhin problematisch. Und genau das hat mich fast wahnsinnig gemacht.

Denn auf einmal hatte ich zwei Realitäten:

• Google-Tests sagten: „Kein Problem.“
• Echte Nutzer und echte Geräte sagten: „Doch, hier stimmt etwas nicht.“

Dazu kamen Rückmeldungen wie:

• „Die Seite scrollt seitlich.“
• „Das Logo springt.“
• „Irgendwas lädt komisch.“

Und irgendwann saß ich tatsächlich nachts vor dem Laptop und dachte:

Ich habe keine Lust mehr.
Ich schmeiß AdSense raus.
Ich wechsle das Theme.
Ich setze die Seite neu auf.
Oder ich lasse das Ganze einfach bleiben.

So ehrlich muss man an der Stelle sein: Technische Probleme sind nicht nur technische Probleme. Wenn du über Wochen oder Monate an etwas herumdokterst, ohne den eigentlichen Auslöser zu finden, dann wird daraus irgendwann ein emotionales Thema. Man zweifelt an der eigenen Kompetenz. Man zweifelt an der Seite. Und irgendwann zweifelt man daran, ob sich der Aufwand überhaupt noch lohnt.

Der Wendepunkt: Wenn zwei fast identische Websites sich plötzlich komplett unterschiedlich verhalten

Der entscheidende Gedanke kam bei mir nicht aus einem Forum und auch nicht aus einem Testbericht, sondern aus einem einfachen Vergleich. Während ich mir von Frust eine große Pizza bestellt und gegessen habe. 🙂

Ich habe noch andere Websites, die ebenfalls mit Kadence und AdSense laufen.
Ähnliches Setup. Ähnliche Technik. Kein massiver Unterschied in der Grundstruktur.

Und trotzdem:

• Dort kein springender Header.
• Dort keine auffälligen CLS-Probleme.
• Dort keine seitliche Scroll-Leiste wegen Ads.

Also musste ich mich fragen:
Was ist auf alexander-patzer.de anders?

Nach vielen Vergleichen blieb am Ende ein Unterschied besonders auffällig:

Auf dieser Website hatte ich das adsbygoogle.js-Skript direkt über HFCM im Header eingebunden.

Also folgte Test Nummer gefühlt 237:

• HFCM komplett deaktivieren
• Header-Code rausnehmen
• Seite neu laden

Und plötzlich war da: Ruhe.

Kein Springen.
Kein Ruckeln.
Der Header stand.

Ich habe die Seite nicht nur einmal neu geladen, sondern immer wieder. Und jedes Mal blieb sie stabil. In solchen Momenten ist man gleichzeitig erleichtert und fassungslos. Erleichtert, weil man endlich eine konkrete Ursache gefunden hat. Fassungslos, weil man sich fragt, warum einen genau so ein Detail monatelang beschäftigen musste.

Nur war damit ein neues Problem da:

Ich wollte die Ads ja weiterhin behalten.

Einfach alles ausbauen und auf Werbeeinnahmen verzichten, war für mich keine echte Dauerlösung. Ich brauchte also eine Variante, die beides schafft:

• Ads bzw. den nötigen Header-Code ermöglichen
• aber ohne Reflow im Header-Bereich
• und ohne neue mobile Probleme

Die Lösung, die meine Seite am Ende gerettet hat: Advanced Ads

Irgendwann erinnerte ich mich an Empfehlungen aus Foren und installierte Advanced Ads – in meinem Fall zunächst die kostenlose Version.

Und genau da kam die Wende.

Schritt 1: Plugin installieren und aktivieren

Zuerst habe ich Advanced Ads installiert und aktiviert.

Schritt 2: AdSense in Advanced Ads verbinden

Dann bin ich in:

Advanced Ads → Einstellungen → AdSense

Dort habe ich meinen AdSense-Account verbunden:

pub-xxx460688241xxxxx

Schritt 3: Den entscheidenden Haken setzen

Danach kam die wichtigste Option:

☑ Den Header-Code von AdSense einfügen, um automatische Anzeigen zu aktivieren…

Das war der Moment der Wahrheit.

Ich habe gespeichert.
Danach alle Caches geleert – Browser-Cache und Server-Cache.
Dann die Seite neu geladen.

Und nichts sprang.

Nochmal neu geladen.
Immer noch stabil.
Nochmal.
Nochmal.

Es blieb ruhig.

Nach all den Monaten war das einer dieser seltenen Momente, in denen man wirklich körperlich spürt, wie Anspannung abfällt. Denn plötzlich war das da, was ich so lange gesucht hatte: eine Seite, die sich wieder normal verhält.

Warum Advanced Ads bei mir besser funktioniert hat als HFCM

Ich kann an dieser Stelle nicht behaupten, dass ich den internen Mechanismus von Advanced Ads bis ins letzte technische Detail reverse-engineert habe. Aber nach meinen vielen Tests ist meine Arbeitsthese ziemlich klar:

Advanced Ads behandelt die Einbindung intelligenter als ein reiner Snippet-Manager wie HFCM.

Meine Theorie nach vielen Tests:

• der Code wird günstiger in den Render-Prozess eingebunden,
• bestimmte Ladeabläufe wirken kontrollierter,
• Reflows im oberen Bereich scheinen besser abgefangen zu werden,
• und einige Ad-Bereiche lassen sich sauberer absichern.

Gerade im Zusammenspiel mit einem Sticky Header und mobilen Layouts kann das enorm wichtig sein. Ein Werbeskript, das zu früh, zu aggressiv oder an der falschen Stelle Einfluss auf das Rendering nimmt, kann genau diese kleinen, aber fatal sichtbaren Layout-Sprünge auslösen.

Kurz gesagt:
Advanced Ads war in meinem Fall nicht einfach nur ein anderes Plugin, sondern die stabilere Integrationsmethode.

Meine finale Konfiguration – kannst du so 1:1 nachbauen

Advanced Ads → Einstellungen → AdSense

• AdSense Account: verbunden
• Automatische Anzeigen: aktiviert (Header-Code)
• Automatische Anzeigen auf AMP: deaktiviert
• Responsive Vollbildanzeigen auf mobilen Endgeräten: Nein
• Rest: auf Standard gelassen

Gerade der Punkt mit den responsive Vollbildanzeigen auf mobilen Geräten war bei mir wichtig. Wenn das aktiv bleibt, steigt das Risiko, dass wieder unsaubere mobile Effekte oder Overflow-Probleme auftreten.

Der CSS-Fix, der den Header zusätzlich stabilisiert hat

Zusätzlich habe ich im Kadence Customizer → Additional CSS folgenden Code eingefügt. Nicht zwingend nötig.
Das war für mich der zweite große Baustein, um den Header-Bereich mechanisch zu beruhigen und gleichzeitig Werbeflächen besser abzusichern.

/* === HEADER FIX – KEIN SPRINGEN MEHR === */
.site-header,
.kadence-primary-header,
#site-navigation,
.kadence-sticky-header {
    min-height: 90px;                    /* ← MISS DEINE ECHTE HEADER-HÖHE (Desktop) */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: none !important;
}@media (max-width: 1024px) {
    .site-header {
        min-height: 70px;                /* ← Mobile Höhe anpassen */
    }
}/* Schutz für Content unter transparentem / sticky Header */
.home .site-content,
.page .entry-content,
.archive .site-content {
    padding-top: 100px !important;
}@media (max-width: 1024px) {
    .home .site-content,
    .page .entry-content {
        padding-top: 80px !important;
    }
}/* Ads zusätzlich absichern – verhindert spätere Shifts */
.advads-responsive,
.adsbygoogle,
ins.adsbygoogle {
    min-height: 250px;                   /* z. B. 90px für Leaderboard, 280px für Rectangle */
    min-width: 300px;
    margin: 20px auto;
    display: block !important;
}

Ganz wichtig: Die Header-Höhe nicht schätzen, sondern sauber messen

Ein Punkt ist dabei wirklich entscheidend:

Öffne deine Seite im Browser, mache einen Rechtsklick auf den Header und gehe auf „Untersuchen“.
Dann lies dir in den Entwicklertools die Computed Height aus.

Genau diese Höhe solltest du bei den min-height-Werten verwenden.

Nicht raten.
Nicht ungefähr.
Nicht „wird schon passen“.

Denn wenn du dort falsche Werte einträgst, stabilisierst du den Header nicht sauber, sondern produzierst unter Umständen nur einen neuen optischen Versatz. Gerade bei Sticky Headern und responsiven Layouts ist das ein kritischer Punkt.

Was sich seitdem konkret verändert hat

Seit dieser Umstellung hat sich meine Website spürbar verändert – nicht nur in Tools, sondern im echten Verhalten.

1. Der Header steht sofort stabil

Beim Reload sitzt der Header jetzt direkt an seiner Position.
Kein Hochspringen. Kein Nachrutschen. Kein nervöses Zucken.

2. Die horizontale Scrollleiste ist verschwunden

Zumindest in dem Problemzustand, den ich vorher hatte, ist die seitliche Scrollbarkeit weg. Genau das war ein zentrales Warnsignal dafür, dass irgendwo Elemente breiter als der Viewport geladen wurden.

3. Die Search Console beruhigt sich langsam

Wichtig ist: Field Data braucht Zeit.
Wer nur wenige Stunden nach der Änderung in die Search Console schaut und sofort perfekte Werte erwartet, wird unnötig nervös. Die Daten dort reagieren nicht in Echtzeit. Aber die Tendenz war bei mir klar positiv.

4. Die Mobile-Werte in PageSpeed sind stabil

Meine Mobile-Werte lagen danach stabil im Bereich von 95 bis 100, was natürlich nicht automatisch alles bedeutet – aber es bestätigt zumindest, dass die Seite technisch wieder sauberer arbeitet.

5. Die Seite wirkt vertrauenswürdiger

Das ist kein offizieller Messwert, sondern ein praktischer Effekt: Eine Seite, die ruhig lädt und visuell stabil bleibt, fühlt sich sofort professioneller an. Gerade bei Blogs, Ratgeberseiten und Content-Seiten kann das einen Unterschied machen – auch bei Werbewirkung und Nutzervertrauen.

6. Ich habe wieder Lust auf meine Website

Das klingt banal, ist aber vielleicht der wichtigste Punkt.
Wenn dich deine eigene Seite bei jedem Test nervt, verlierst du irgendwann die Freude daran, neue Inhalte zu veröffentlichen. Genau deshalb war diese technische Lösung für mich nicht nur eine Performance-Optimierung, sondern auch ein mentaler Befreiungsschlag.

Mein Appell an dich, wenn du gerade im selben Chaos steckst

Wenn du gerade in genau dieser Situation bist –
wenn deine Seite auf dem Papier okay aussieht, aber sich in echt nicht stabil anfühlt,
wenn dein Header springt, Ads verrutschen oder mobil plötzlich horizontales Scrollen auftaucht,
dann gib nicht sofort Theme, Builder oder die ganze Seite auf.

Mach zuerst diesen Test:

• Installiere Advanced Ads
• Verbinde AdSense
• Aktiviere den Header-Code über das Plugin
• Setze Responsive Vollbildanzeigen auf „Nein“
• Füge den CSS-Code ein
• Leere den Cache
• Lade die Seite 20-mal neu

Nicht einmal.
Nicht zwei Mal.
Sondern bewusst oft. Auf Desktop und mobil.

Denn genau solche Probleme zeigen sich oft nicht in einem perfekten Lab-Test, sondern in wiederholten echten Ladevorgängen.

Wenn es bei dir ebenfalls hilft, dann weißt du zwei Dinge:

Erstens: Du bist mit diesem Problem nicht allein.
Und zweitens: Es liegt nicht automatisch daran, dass du etwas „falsch“ gemacht hast. Manchmal ist es schlicht die Art, wie ein Skript eingebunden wird. Eine falsche Lade-Reihenfolge, eine ungünstige Header-Integration, ein Werbeblock ohne saubere Platzreservierung – und schon fühlt sich die ganze Seite instabil an.

Der Moment, den ich dir wirklich wünsche

Ich wünsche dir genau diesen einen Moment.

Den Moment, in dem du deine Seite neu lädst, kurz auf den Header schaust und merkst:

Nichts bewegt sich mehr.
Nichts springt.
Alles bleibt da, wo es sein soll.

Und du denkst nur:

„Es ist stabil. Endlich.“

Wenn du gerade selbst kämpfst, dann bleib dran. Manchmal ist die Lösung absurd klein im Vergleich zu dem Stress, den sie verursacht hat. Aber wenn man sie gefunden hat, fällt plötzlich alles an seinen Platz.

Falls du Fragen hast, schreib mir gerne in die Kommentare oder über mein Kontaktformular. Ich antworte wirklich jedem, der ernsthaft an so einem Problem arbeitet.

Danke, dass du bis hierher gelesen hast.
Und danke an alle, die mir in Foren, per Mail oder mit Denkanstößen geholfen haben. Ohne diese Hilfe hätte ich wahrscheinlich irgendwann wirklich aufgegeben.

Alles Liebe und stabile Ladezeiten,
Alexander

PS. Immer wenn man nicht weiter kommt – Pizza bestellen und in Ruhe nachdenken 🙂