Ein Pagespeed Badge auf Ihrer Website zeigt Besuchern auf den ersten Blick, dass Sie Wert auf schnelle Ladezeiten legen. Diese visuellen Auszeichnungen dokumentieren die Geschwindigkeit Ihrer Website und schaffen Vertrauen durch messbare Transparenz. In diesem Artikel erfahren Sie konkret, wie Sie ein solches Badge technisch korrekt einbinden und wo Sie es optimal platzieren.
Ein Pagespeed Badge ist eine grafische Kennzeichnung, die die Performance-Bewertung Ihrer Website visualisiert. Es zeigt typischerweise einen Score-Wert oder eine Einstufung, die auf Messungen der Ladegeschwindigkeit basiert. Das Badge funktioniert ähnlich wie ein Qualitätssiegel und kommuniziert gegenüber Besuchern, dass Ihre Website technisch gut aufgestellt ist.
Der praktische Nutzen liegt in mehreren Bereichen: Besucher erkennen sofort, dass sie auf einer performanten Website unterwegs sind. Für Betreiber von Online-Shops, Dienstleistungsportalen oder Unternehmenswebsites stellt dies einen Wettbewerbsvorteil dar. Zudem motiviert ein öffentlich sichtbares Badge dazu, die Performance kontinuierlich zu überwachen und aufrechtzuerhalten.
Bevor Sie ein Pagespeed Badge einbinden, sollten Sie zunächst die Geschwindigkeit Ihrer Website messen und sicherstellen, dass die Werte präsentabel sind. Ein Badge macht nur dann Sinn, wenn die dahinterstehenden Performance-Daten tatsächlich gut ausfallen.
Zur Einbindung benötigen Sie Zugriff auf den HTML-Code Ihrer Website. Dies kann je nach verwendetem System unterschiedlich erfolgen:
Zunächst benötigen Sie den Einbettungscode für Ihr Pagespeed Badge. Dieser wird in der Regel von dem Tool bereitgestellt, mit dem Sie Ihre Performance messen. Der Code besteht typischerweise aus einem Image-Tag oder einem Iframe, der das Badge dynamisch lädt.
Ein typisches Code-Beispiel für ein statisches Badge sieht folgendermaßen aus:
<a href="https://www.pagespeed-plus.de/score/ihre-domain.de" target="_blank"><img src="https://www.pagespeed-plus.de/badge/ihre-domain.de.svg" alt="PageSpeed Score Badge"></a>
Für dynamische Badges, die sich automatisch aktualisieren, wird häufig ein ähnlicher Code verwendet, der auf eine API-Schnittstelle verweist.
Kopieren Sie den bereitgestellten Code vollständig. Achten Sie darauf, dass alle Parameter korrekt übernommen werden, insbesondere Ihre Domain oder Website-URL. Viele Badge-Generatoren erstellen den Code bereits personalisiert mit Ihrer Domain.
Prüfen Sie folgende Elemente im Code:
Fügen Sie den Code an der gewünschten Stelle Ihrer Website ein. Bei WordPress können Sie dafür verschiedene Methoden nutzen:
Bei anderen Systemen fügen Sie den Code entsprechend in die Template-Dateien oder über die vorgesehenen Bearbeitungsfunktionen ein.
Nach der Einbindung sollten Sie die Darstellung auf verschiedenen Geräten prüfen. Öffnen Sie Ihre Website auf Desktop, Tablet und Smartphone, um sicherzustellen, dass das Badge korrekt angezeigt wird und responsive funktioniert.
Testen Sie außerdem:
Der Footer ist die häufigste und meist empfohlene Position für ein Pagespeed Badge. Hier stört es nicht den Hauptinhalt, ist aber dennoch für interessierte Besucher sichtbar. Zudem befindet es sich oft in der Nähe anderer Vertrauenselemente wie Impressum, Datenschutzerklärung oder Qualitätssiegeln.
Ein Badge im Footer sollte idealerweise:
Bei Websites mit Sidebar-Struktur kann das Badge auch dort platziert werden. Dies eignet sich besonders für Blogs, Nachrichtenseiten oder Portale, bei denen Besucher längere Zeit auf einzelnen Seiten verweilen. Das Badge bleibt beim Scrollen sichtbar und unterstreicht kontinuierlich die Performance-Orientierung.
Manche Website-Betreiber integrieren Performance-Badges bewusst in dedizierte Bereiche, die sich mit Qualität, Transparenz oder technischen Standards befassen. Auf einer "Über uns"-Seite oder einem speziellen Qualitätsbereich kann das Badge im Kontext weiterer Auszeichnungen oder Zertifikate präsentiert werden.
Nicht empfehlenswert ist die Platzierung im unmittelbaren Sichtbereich oberhalb des Folds (above the fold), wo wichtiger Inhalt stehen sollte. Ein Badge im Header kann ablenken und wirkt häufig aufdringlich. Ebenso sollten Sie es nicht mitten im Fließtext platzieren, wo es den Lesefluss unterbricht.
SVG-Badges skalieren verlustfrei und sind besonders für responsive Designs geeignet:
<div class="pagespeed-badge"><a href="https://www.pagespeed-plus.de/score/ihre-domain.de" target="_blank" rel="noopener"><img src="https://www.pagespeed-plus.de/badge/ihre-domain.de.svg" alt="PageSpeed Performance Score" width="150" height="50"></a></div>
Das Festlegen von width und height verhindert Layout-Verschiebungen beim Laden und verbessert die Core Web Vitals, insbesondere den Cumulative Layout Shift.
Für ältere Browser oder spezielle Anforderungen kann ein PNG-Format sinnvoller sein:
<a href="https://www.pagespeed-plus.de/score/ihre-domain.de" target="_blank"><img src="https://www.pagespeed-plus.de/badge/ihre-domain.de.png" alt="Website Performance Badge" loading="lazy" width="150" height="50"></a>
Das Attribut loading="lazy" sorgt dafür, dass das Badge erst geladen wird, wenn es im Viewport erscheint, was die initiale Ladezeit verbessert.
Für mehr Kontext können Sie das Badge mit einer kurzen Beschriftung versehen:
<div class="performance-badge"><p>Unsere Website-Performance:</p><a href="https://www.pagespeed-plus.de/score/ihre-domain.de" target="_blank"><img src="https://www.pagespeed-plus.de/badge/ihre-domain.de.svg" alt="PageSpeed Score"></a></div>
Dieser Ansatz ist besonders hilfreich, wenn Besucher möglicherweise nicht sofort verstehen, wofür das Badge steht.
Ironischerweise kann ein schlecht implementiertes Pagespeed Badge selbst die Performance beeinträchtigen. Achten Sie darauf, dass das Badge-Bild optimiert ist. Nutzen Sie nach Möglichkeit SVG-Format, das in der Regel deutlich kleiner als PNG ausfällt. Falls Sie PNG verwenden, sollte die Datei komprimiert sein.
Verwenden Sie außerdem lazy loading für Badges im Footer, da diese ohnehin erst beim Scrollen sichtbar werden. Vermeiden Sie zusätzliche JavaScript-Bibliotheken nur für die Badge-Darstellung.
Ihr Badge sollte auf allen Bildschirmgrößen gut aussehen. Nutzen Sie relative Größenangaben oder CSS-Media-Queries, um das Badge auf mobilen Geräten gegebenenfalls kleiner darzustellen:
<style>.pagespeed-badge img { max-width: 150px; height: auto; } @media (max-width: 768px) { .pagespeed-badge img { max-width: 120px; } }</style>
Ein seriöses Pagespeed Badge sollte immer auf die Detailergebnisse verlinken. Dies schafft Transparenz und ermöglicht es interessierten Besuchern, die zugrundeliegenden Daten einzusehen. Nutzen Sie dabei target="_blank" in Kombination mit rel="noopener" für Sicherheit:
<a href="[Detailseite]" target="_blank" rel="noopener">
Ein statisches Badge zeigt immer denselben Wert an, auch wenn sich Ihre tatsächliche Performance ändert. Dynamische Badges aktualisieren sich automatisch basierend auf regelmäßigen Messungen. Prüfen Sie regelmäßig, ob Ihr Badge noch aktuell ist und Ihre Website tatsächlich die angezeigten Werte erreicht.
Wenn Sie Ihre Website grundlegend überarbeiten oder technische Änderungen vornehmen, sollten Sie eine erneute Performance-Messung durchführen, um sicherzustellen, dass das Badge weiterhin korrekte Werte anzeigt.
Achten Sie darauf, dass Sie nur Badges verwenden, die auf tatsächlich gemessenen Werten basieren. Die Darstellung falscher oder manipulierter Performance-Werte könnte als irreführende Werbung angesehen werden. Nutzen Sie ausschließlich Badges von seriösen Anbietern, die transparent dokumentieren, wie die angezeigten Werte zustande kommen.
Wenn Sie ein Badge von einem Drittanbieter einbinden, prüfen Sie die Nutzungsbedingungen. Manche Anbieter verlangen eine Verlinkung oder haben spezifische Vorgaben zur Darstellung.
Ein Pagespeed Badge entfaltet seine volle Wirkung oft in Kombination mit anderen Transparenz-Elementen. Sie können es beispielsweise gemeinsam mit anderen Performance-Badges präsentieren, die unterschiedliche Aspekte Ihrer Website-Qualität dokumentieren.
Viele Betreiber kombinieren Pagespeed Badges mit Uptime-Badges, Sicherheitssiegeln oder anderen Qualitätskennzeichnungen. Achten Sie dabei auf eine übersichtliche Gestaltung, damit die einzelnen Elemente nicht miteinander konkurrieren.
Die Einbindung eines Pagespeed Badge ist technisch unkompliziert, wenn Sie die beschriebenen Schritte befolgen. Entscheidend für den Erfolg sind die korrekte Code-Integration, die durchdachte Platzierung und die kontinuierliche Pflege. Ein gut platziertes Badge kommuniziert Qualitätsbewusstsein und technische Kompetenz, ohne aufdringlich zu wirken. Nutzen Sie die vorgestellten Code-Beispiele als Grundlage und passen Sie diese an Ihre spezifischen Anforderungen an, um Ihre Website-Performance transparent und vertrauenswürdig zu präsentieren.