Wenn es darum geht, die Leistung einer Website zu verbessern, ist Google PageSpeed Insight ein unverzichtbares Tool. Aber wie sieht es aus, wenn Sie Ihre Website mit Google Ads monetarisieren möchten? Kann man das Beste aus beiden Welten haben: eine schnelle Website und Werbeeinnahmen? Glücklicherweise, die Antwort ist ja. In diesem Artikel werden wir bewährte Techniken zur Optimierung Ihrer Website besprechen, während Sie Google Ads nutzen, ohne die Leistung zu opfern.
Das Geschwindigkeitsproblem mit Google Ads
Die Hinzufügung von Google Ads auf Ihrer Website kann oft zu einer Verlangsamung der Ladegeschwindigkeit führen. Diese Verzögerung ist in der Regel darauf zurückzuführen, dass die Werbeskripte in JavaScript geladen werden, bevor Ihre Inhalte vollständig geladen sind. Daher kann Ihre Website langsam werden, was sich negativ auf die Benutzererfahrung und letztendlich auf Ihr Ranking in Suchmaschinen auswirken kann.
Die Lösung? Es ist entscheidend, die Skripte und Dateien, die mit Google Ads verbunden sind, zu optimieren. Dies verbessert nicht nur die Benutzererfahrung, sondern erhöht auch Ihre Chancen auf ein besseres Ranking bei Google.
Um dies zu erreichen, stehen Ihnen mehrere Optionen zur Verfügung, einschließlich der Verwendung von Plugins und Anpassungen auf Code-Ebene. Autoptimize ist eines dieser Plugins, das Ihnen helfen kann, die Dinge zu beschleunigen, indem es Ihr JavaScript optimiert.
Wie verwendet man das Plugin Autoptimize?
Die Einrichtung von Autoptimize ist ein erster entscheidender Schritt zur Verbesserung der Leistung Ihrer Website. Nachdem Sie das Plugin aktiviert und das JavaScript optimiert haben, können Sie zum nächsten Schritt für eine noch bessere Leistung übergehen.
CSS-Optimierung für eine höhere Geschwindigkeit
Sobald die Option „JavaScript optimieren“ aktiviert ist, ist es an der Zeit, sich um Ihre CSS-Dateien zu kümmern. Aktivieren Sie in den Autoptimize-Einstellungen auch die Option „CSS optimieren“. Diese Aktion reduziert die Größe der CSS-Dateien auf ähnliche Weise, wie Sie es für JavaScript getan haben, indem unnötige Leerzeichen, Kommentare entfernt und mehrere Dateien zu einer einzigen zusammengeführt werden. Diese Konsolidierung verringert die Anzahl der benötigten HTTP-Anfragen zum Laden Ihrer Website, was die Ladezeit der Seiten erheblich reduzieren kann.
- Reduzierung der HTTP-Anfragen: Jede zusätzliche CSS- oder JavaScript-Datei, die ein Browser herunterladen muss, kann die Ladezeit Ihrer Website erhöhen. Durch das Kombinieren dieser Dateien reduziert Autoptimize diese Anfragen und beschleunigt so die Anzeige Ihrer Website.
- Komprimierung der Dateien: Neben der Kombination der Dateien komprimiert Autoptimize diese, wodurch ihre Größe ohne Verlust von Qualität oder Funktionalität reduziert wird.
- Handhabung von Schriftarten: Eine weitere interessante Option ist die Optimierung von Schriftarten. Wenn Sie „Schriftarten optimieren“ auswählen, werden die Schriftarten effizienter geladen, was die Rendering-blockierungen verringert.
- Lazy Load von Bildern: Der Lazy Load von Bildern ist eine Funktion, die Bilder nur lädt, wenn sie ins Sichtfeld des Benutzers kommen. Dies beschleunigt die anfängliche Ladezeit der Seite.
Bildoptimierung
Ein weiterer wichtiger Schritt zur Verbesserung der Geschwindigkeit Ihrer Website ist die Bildoptimierung. Obwohl Autoptimize keine direkte Option zur Bildoptimierung bietet, wird dringend empfohlen, ein zusätzliches Plugin dafür zu verwenden. Optimierte Bilder bedeuten kleinere Dateien zum Laden, was erheblich zur Geschwindigkeit der Website beiträgt.
- Auswahl des richtigen Formats: Verwenden Sie moderne Bildformate wie WebP, die eine ähnliche Qualität wie traditionelle Formate bieten, jedoch mit einer erheblich reduzierten Dateigröße.
- Intelligente Kompression: Tools wie Imagify oder ShortPixel können Ihre Bilder ohne signifikanten Qualitätsverlust komprimieren, was das Laden Ihrer Website schneller macht, ohne das visuelle Erlebnis zu beeinträchtigen.
- Größenänderung der Bilder: Stellen Sie sicher, dass Ihre Bilder nicht größer sind, als sie sein müssen. Bilder, die für den zugewiesenen Raum genau in der Größe angepasst sind, reduzieren das Gewicht der Seite.
Cache und CDN
Schließlich kann die Nutzung von Cache und Content Delivery Networks (CDN) die Ladezeit Ihrer Website weiter reduzieren. Autoptimize lässt sich gut mit Cache-Plugins wie WP Rocket oder W3 Total Cache integrieren, die eine statische Version Ihrer Seiten speichern, um sie schnell an wiederkehrende Besucher zu liefern. Die Verwendung eines CDNs kann auch dazu beitragen, Ihre Inhalte von Servern aus bereitzustellen, die sich in der Nähe Ihrer Besucher befinden, wodurch die Ladezeiten verringert werden.
- Cache-Konfiguration: Eine gute Cache-Konfiguration ermöglicht es, vorab geladene Seiten schnell an Ihre Besucher zu liefern, wodurch die zur Generierung jeder Seite erforderliche Verarbeitung verringert wird.
- CDN-Integration: Ein CDN speichert Kopien Ihrer Website auf mehreren Servern weltweit und stellt sicher, dass die Benutzer immer in der Nähe einer Quelle für Ihre Inhalte sind.
Durch das Befolgen dieser Schritte und die vollständige Nutzung der Funktionen von Autoptimize können Sie die Leistung Ihrer Website erheblich verbessern, was zu einer besseren Benutzererfahrung führt und gleichzeitig Ihr SEO verbessert.
Codeanpassung: Ein zusätzlicher Schritt
Wenn Sie mit dem Programmieren vertraut sind, können Sie einen weiteren Schritt unternehmen, indem Sie benutzerdefinierte Skripte hinzufügen, um das Laden Ihrer Google Ads weiter zu optimieren. Indem Sie einen bestimmten JavaScript-Code direkt über dem Tag </body> platzieren, können Sie das Laden der Anzeigen verzögern, bis eine Interaktion des Benutzers auf der Seite erkannt wird.
Um zu beginnen, wenn Sie den Code Ihrer Display-Anzeigen verwenden (oder andere, alles außer AUTO), sieht der von Google bereitgestellte Code, den Sie auf Ihrer Website platzieren sollen, folgendermaßen aus:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Um zu beginnen, werden Sie diesen Teil entfernen:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>Um nur den folgenden Code an den Stellen zu behalten, an denen Sie Ihre Anzeigen sehen möchten:
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Der entfernte JavaScript-Teil ist wichtig, aber es macht keinen Sinn, ihn bei mehreren Anzeigen mehrmals zu verwenden. Es ist auch deutlich besser, ihn am Ende der Seite, in der footer.php Ihrer Vorlage, direkt über dem Tag </body> zu platzieren. Damit gewinnen Sie erheblich an Leistung, aber das ist nicht genug. Anstatt den Code direkt am Ende der Seite zu kopieren, schlage ich eine noch leistungsfähigere Alternative vor. Hier ist der Code, den Sie kopieren sollten:
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
<script data-ad-client="ca-pub-3xxxxxxxxxx" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-type="lazy"></script>Code für das Lazy Loading
Das hinzuzufügende Skript ist recht einfach. Es verwendet eine Reihe von Benutzerinteraktionsereignissen, um das Laden der Google Ads-Skripte auszulösen. Diese Methode stellt sicher, dass die Anzeigen die anfängliche Ladezeit der Seite nicht verlangsamen.
Die Rolle von `data-type=“lazy“`
Das Skript verwendet das Attribut data-type="lazy", um die Skripte und iframes zu identifizieren, die verzögert geladen werden sollen. Wenn ein Interaktionsevent erkannt wird, ersetzt das Skript das Attribut data-src durch src und löst somit das Laden des Skripts oder des iframes aus.
Zusammenfassung der Schritte
| Schritt | Aktion | Verwendetes Tool/Code |
|---|---|---|
| 1 | JavaScript-Optimierung | Autoptimize |
| 2 | Aggregation von JS-Dateien | Autoptimize |
| 3 | Hinzufügen des Codes für das Lazy Loading | Benutzerdefiniertes Skript |
Nicht vergessen: Testen, testen, testen
Bevor Sie diese Änderungen auf Ihrer Live-Website bereitstellen, stellen Sie sicher, dass Sie deren Wirksamkeit mit Google PageSpeed Insight testen. Ein guter Score ist ein Indikator dafür, dass Sie auf dem richtigen Weg sind, aber vergessen Sie nicht, wichtige Kennzahlen wie die Ladezeit und die Konversionsrate zu überwachen.
Überlegungen zur Leistungsüberwachung
Die regelmäßige Überwachung der Leistung Ihrer Website gibt Ihnen einen klaren Überblick über die Wirksamkeit dieser Optimierungen. Nutzen Sie Tools wie Google Analytics zusätzlich zu Google PageSpeed Insights für eine umfassende Bewertung.
Kompatibilitätsprobleme vermeiden
Seien Sie sich der möglichen Komplikationen bewusst, wenn Sie neue Plugins oder Skripte hinzufügen. Testen Sie diese Elemente immer in einer Entwicklungsumgebung, bevor Sie sie auf der Produktionsseite bereitstellen.
Konstante Überwachung ist der Schlüssel
Schließlich ist die Optimierung einer Website ein fortlaufender Prozess. Die Methoden, die Sie heute anwenden, sind möglicherweise morgen aufgrund ständiger Änderungen der Suchmaschinenalgorithmen und Webtechnologien nicht mehr so effektiv.
Behalten Sie die Leistung Ihrer Website im Auge und zögern Sie nicht, Ihre Strategie entsprechend anzupassen. Eine bessere Website-Geschwindigkeit ist nicht nur vorteilhaft für das SEO-Ranking, sondern trägt auch zu einer besseren Benutzererfahrung bei, was zu höheren Konversionsraten und letztendlich zu mehr Einnahmen führen kann.
Eine Website für Geschwindigkeit zu optimieren, während Sie Google Ads verwenden, mag wie eine herausfordernde Aufgabe erscheinen, aber mit den richtigen Techniken und Tools ist es durchaus machbar. Die in diesem Artikel angesprochenen Schritte sollten Sie auf den richtigen Weg zu einer schnellen und rentablen Website bringen.
