WordPress Logo responsive machen ohne Cumulative Layout Shifts (CLS)

Ich zeige dir, wie du das WordPress Logo responsive machst und Cumulative Layout Shifts (CLS) im Logobereich verhinderst, damit deine Webseite von Suchmaschinen besser bewertet wird.

So machst du das WordPress Logo responsive und verhinderst Cumulative Layout Shifts im Logobereich

Gehe im WordPress-Backend auf Design > Theme-Datei-Editor.
Im Theme-Datei-Editor klickst am rechten Bildrand auf Theme-Funktionen.
In diesem Beispiel ist das Logo eine PNG-Datei mit 241 x 41 Pixel. Kopiere folgende Zeilen in den Theme-Datei-Editor und passe den Code auf deine Bedürfnisse an:

add_filter('avf_logo_final_output', 'avf_text_logo_final_output');
function avf_text_logo_final_output($logo) {
    $link = apply_filters('avf_logo_link', home_url('/'));
    $logoImage = '<img src="https://www.deinedomain.de/wp-content/uploads/deineLogoDatei.png" srcset="https://www.deinedomain.de/wp-content/uploads/deineLogoDatei.png 241w" sizes="(max-width: 241px) 100vw, 241px" data-no-lazy="1" width="241" height="41" alt="DeinAltText">';
    $logo = sprintf('<div class="av-logo-container"><div id="logo" class="logo"><a href="%s">%s</a></div></div>', $link, $logoImage);
    return $logo;
}

In diesem Beispiel ist das Logo so klein, dass eine Bildgröße für alle Bildschirmgrößen ausreicht. Dennoch ist es wichtig, das srcset-Attribut, das width-Attribut und das height-Attribut zu verwenden, damit der Image-Container auf allen Bildschirmgrößen genau den Platz in Größe des Logos reserviert. Dadurch entstehen keine Leerräume im Image-Container, die zu Cumulative Layout Shifts des Logos führen.

Logo nicht responsive bei zahreichen WordPress Themes

Viele WordPress Themes fügen das Logobild nicht responsive in die Webseite ein, das heißt, dass sie in das Image-Tag für das Logo kein srcset-Attribut einfügen. Mit dem srcset-Attribut weist man den Browser an, eine kleinere Version des Bildes zu benutzen, wenn die Webseite auf einem kleineren Bildschirm dargestellt wird. Auch, wenn das Logo so klein ist, dass auf allen Bildschirmgrößen nur eine Logo-Größe benötigt wird, so ist das srcet-Attribut doch hilfreich, um Cumulative Layout Shifts während des Seitenaufbaus im Logo-Container zu verhindern.

Das „normale“ Einfügen des Logos führt bei vielen WordPress Themes zu Cumulative Layout Shifts

Ein weiteres Problem vieler Themes ist, dass sie eine Mindestgröße des Logos vorraussetzen, wie z.B. 300 x 100 Pixel. Wenn das Logobild kleiner ist, entsteht ein Leerraum im Logobereich. Dieser Leerraum führt beim Aufruf der Webseite zu einem sogenannten Cumulative Layout Shift (CLS), also einer unerwarteten Verschiebung des Logos beim Seitenaufbau. In den Core Web Vitals von Google wirken sich Cumulative Layout Shifts negativ auf die Bewertung der Webseite aus, da unerwartete Verschiebung von Elementen während des Seitenaufbaus zu einer schlechteren Nutzererfahrung führen. Da Google sehr viel Wert auf eine gute Nutzererfahrung von Webseiten legt, können Cumulative Layout Shifts negative Auswirkungen auf das Suchmaschinenranking haben.

Unnötig großes Logobild steht im Widerspruch zu einer bestmöglichen Ladegeschwindigkeit

Man könnte das Logobild natürlich auch größer einfügen und mit CSS auf die jeweilige Bildschirmgröße anpassen. Allerdings steht dieses Vorgehen im Widerspruch zu einer bestmöglichen Ladegeschwindigkeit der Webseite, weil das Logo mehr Dateigröße hat als nötig. Wir wollen also das Logobild responsive und nicht größer als nötig in die Webseite einfügen.

So findest du alle Cumulative Layout Shifts auf deiner Webseite

Mit der Google Chrome Erweiterung CLS Visualizer kannst du alle Cumulative Layout Shifts auf deiner Webseite visuell darstellen. Der CLS Visualizer summiert den Score aller Cumulative Layout Shifts zu einem Gesamt-Score und sagt dir, ob das Ergebnis gut oder schlecht ist. Ein guter Score liegt unter 0.1, ein schlechter Score liegt bei 0.1 oder höher.