Verbessern Sie Google Page Speed und SEO mit Tag Manager und verzögerten Triggern

Wir werden in diesem Beitrag einige Tools verwenden, also werde ich sie alle für Sie auflisten, damit Sie die Links abrufen können, wenn Sie sie benötigen. Wenn Sie ein Webflow-Experte sind, verwenden Sie diese höchstwahrscheinlich täglich, benötigen jedoch:

• Google PageSpeed-Einblicke
• Google Lighthouse (Kein Link für diesen, öffnen Sie Chrome und klicken Sie dann auf Ansicht, Entwickler und dann auf Entwicklertools. Sie benötigen den Lighthouse-Tab in den Dev-Tools. Im Grunde das Gleiche wie PageSpeed, aber es gibt noch andere nette Einblicke. Mehr Infos hier.
• Pingdom
• GT Metrix
• Denke mit Google
• Experten.com Aktualisieren Janis aus experte.com habe den Beitrag gelesen und uns mit einem großartigen kostenlosen Tool kontaktiert, mit dem Sie Ihre gesamte Website crawlen und auf jeder Seite einen Massengeschwindigkeitstest durchführen können. In der Tat sehr nett, und das spart Ihnen eine Menge Zeit, wenn Sie viele Seiten überprüfen müssen. Es ermöglicht Ihnen auch, eine bestimmte Liste von URLs zu überprüfen und die offiziellen Pagespeed-Ergebnisse anzuklicken, wenn Sie Empfehlungen und so weiter sehen möchten.

Alle diese Tools machen ziemlich ähnliche Dinge und messen Ihre Seitengeschwindigkeit, aber es ist gut, die Ergebnisse verschiedener Tools zu vergleichen.

Bevor wir beginnen, Haftungsausschluss, du brauchst dieses Tutorial nicht, wenn du keine Probleme hast und du nicht wie wir eine Reihe von Ad-Tracking-Tags usw. im Tag Manager hast. Wir verwenden diese Methode häufig auf unserer Webflow Projekte zur Verzögerung von Tags und zur Verbesserung der Geschwindigkeit der Webflow-Website, da Sie in Webflow nicht wirklich viel Kontrolle haben, wenn es darum geht, Code hinzuzufügen und wann was zur Verbesserung der Seitengeschwindigkeit ausgelöst wird. Das heißt nicht, dass Sie diese Methode nicht auf Websites verwenden sollten, auf denen eine Reihe von Tags bei Seitenaufrufen ausgelöst werden oder die einfach in Ihren Code eingebettet sind. Lassen Sie uns zunächst beantworten, warum Sie dies benötigen, wenn Sie den Tag Manager und Conversion-Tracking, Remarketing-Tags usw. von Werbenetzwerken wie Facebook, Google Ads, LinkedIn, Twitter, Pinterest usw. und anderen Tools wie Heatmaps von verwenden Hotjar oder Microsoft Clarity usw. (Übrigens, falls Sie es nicht haben und möchten, scrollen, erhitzen und klicken Sie auf Karten; fahren Sie fort und installieren Sie Microsoft Clarity. Es ist ein großartiges kostenloses Heatmap-Tool. Wir haben hier einen Beitrag mit Anleitungen dazu erstellt.)

Ein weiterer Hinweis: Wenn Sie Code von Plattformen wie Facebook, Google Ads usw. auf Ihrer Website verwenden und den Google Tag Manager nicht verwenden, sollten Sie ernsthaft erwägen, ihn herauszunehmen und den Tag Manager zur Implementierung des Codes zu verwenden. Wir sind ein kleines Webflow-Studio und als Webflow-Designer wollen wir immer, dass alles sauber, aufgeräumt und einfach ist, und genau das kann Tag Manager hervorragend bieten. Du kannst dir die Grundlagen aneignen Tag Manager installieren, Hinzufügen Ihres Google Analytics über den Tag Manager und das Einrichten grundlegender Konvertierungen in den verlinkten Beiträgen. Mit dem Tag Manager ist das Hinzufügen von Tracking-Codes usw. zu Ihrer Website sehr einfach und leicht zu verwalten. Wir werden in späteren Beiträgen weitere Anleitungen zum Hinzufügen von mehr Anzeigen-Tracking und Konversionen geben. Wenn es etwas Spezielles gibt, das wir behandeln sollen, poste es in den Kommentaren.

Also, warum machen wir das? Anleitung und die folgenden Schritte, um die Dinge zu beschleunigen? Okay, mach weiter, öffne die Links in der Liste, gib die Seiten ein, die du scannen möchtest, und führe die Geschwindigkeitstests durch. Versuchen Sie, in Chrome im Inkognito-Modus zu arbeiten, damit Ihre Plugins Dinge wie Lighthouse nicht stören. Wenn Sie eine Reihe von Tracking-Codes haben, werden Ihnen möglicherweise einige Warnungen zu LCP, FID, CLS usw. sowie Vorschläge zur Zurückstellung einiger Codes angezeigt, um die Dinge zu beschleunigen. Sobald Sie diese Tests ausgeführt haben, lassen Sie diese Tabs geöffnet. Wir werden zurückkommen und sehen, ob sich die Dinge verbessert haben und ob es weniger zu meckern gibt, Dinge aufzuschieben und so weiter, und ob sich Ihre Ergebnisse verbessert haben, wenn wir fertig sind und wir die Tests erneut ausführen.

Zunächst einmal, was ist LCP? Nun, es steht für Largest Contentful Paint. Erledigt. Mist, nicht wirklich, ich meine, was zur Hölle ist das. Im Grunde genommen ist es, wenn du sehen kannst, was auf deiner Seite ist, also wann etwas aufgehört hat zu laden und wann ist es im Viewport sichtbar.

Normalerweise willst du, dass das schnell geht, nun, du willst, dass alles schnell ist, aber warum sollten Tracking-Codes das verlangsamen? Es kommt darauf an, wie diese Codefragmente geladen werden. Sie haben im Grunde zwei Möglichkeiten: synchron und asynchron. In der ersten Instanz wird ein Ding nach dem anderen geladen und alles muss warten, bis das Ding vor dem Laden geladen ist, bevor es anfängt zu laden. Also wahrscheinlich nicht großartig oder. Sie möchten nicht, dass Ihr Header-Bild und Ihr Text darauf warten, dass ein Tracking-Skript zuerst geladen wird, nur weil es sich im Kopf Ihrer Seite befindet. Hier kommt asynchron ins Spiel, hier werden die Dinge parallel geladen, also wartet nichts auf das, was davor passiert. Das Problem ist, dass die Dinge jetzt zwar geladen werden können, wenn sie wollen, aber es erhöht die benötigte Bandbreite, da Sie eine Menge Dinge gleichzeitig laden und die Belastung des Browsers des Benutzers erhöhen, weil er rendert und eine Menge Dinge gleichzeitig erledigt.

Tag Manager ist zwar großartig, wird aber asynchron geladen, sodass die Elemente auf Ihrer Seite und alle von Ihnen hinzugefügten Tags gleichzeitig geladen werden und um Ressourcen konkurrieren, was nicht so toll ist. Aber wie können wir das beheben, ohne einfach alle Tags herauszunehmen. Wir verzögern, was nicht unbedingt sofort geladen werden muss. Und genau das werden wir tun. Mit dem guten alten All-Page-Trigger feuern Sie sofort ab, was wichtig ist, und den Rest, die Dinge, die für Sie wichtig sind, die Sie aber etwas später nicht sofort benötigen, damit die anderen wichtigen Dinge auf der Seite zuerst geladen werden können. Wir werden das tun, indem wir einen Trigger, etwas benutzerdefinierten Code in einem Tag und einen weiteren benutzerdefinierten Trigger hinzufügen, um die „nicht so wichtig, zuerst zu laden“ -Tags auszulösen.

Also lass uns reingehen und loslegen:

Schritt 1 — Entscheide, was am wichtigsten ist und was nicht.

Das ist wahrscheinlich der Kopfzerbrechen. Normalerweise werfen wir einen Blick auf den Tag Manager und schauen, was wir da drin haben und was wirklich zuerst geladen werden muss und was wir „verzögern“ können. Wir neigen immer noch dazu, unsere Google Analytics 4-Tags zuerst auf einen normalen All-Page-Trigger zu laden. Dinge wie Facebook-Tags, Google Ads Remarketing-Tags usw. sind wichtig, aber ein oder zwei zusätzliche Sekunden werden das Budget nicht wirklich sprengen. Wenn Sie eine ganze Reihe davon haben, sind es normalerweise die Dinge, über die diese Tools, insbesondere Google PageSpeed Insights und Lighthouse, stöhnen.

Schritt 2 — Dein vollständig geladenes Tag erstellen

Jetzt erstellen wir ein benutzerdefiniertes Code-Tag und einen Trigger, die ein Ereignis erzeugen, das der Seite Zeit zum Laden gibt, bevor wir die Tags auslösen, von denen wir entschieden haben, dass sie in Schritt 1 etwas warten könnten.

Öffnen Sie den Tag Manager, gehen Sie zu Tags und klicken Sie auf Neu.

Geben Sie dem Tag einen Namen, wählen Sie Benutzerdefiniertes HTML als Tag-Typ und fügen Sie den folgenden Code ein:

<iframe height="300" style="width: 100%;" scrolling="no" title="Google Delayed Triggers - Create Event - AfterLoad" src="https://codepen.io/milkmoonstudio/embed/GRBPvrP?default-tab=js&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/GRBPvrP">
</a><a href="https://codepen.io/milkmoonstudio">Google Delayed Triggers — Ereignis erstellen — AfterLoad von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Wenn Sie dieses Tag auslösen, wird der benutzerdefinierte Code, den Sie gerade eingefügt haben, ausgeführt und ein Ereignis im DataLayer der Seite erstellt, das 1,5 Sekunden lang wartet. Sie können das auch länger machen, wenn Sie möchten, aber 1.5 sollte in Ordnung sein und dieses Tag wird erst ausgelöst, wenn das Window Loaded-Trigger-Ereignis ausgelöst wird.

Wählen Sie nun den Trigger aus. Sie möchten hier einen neuen Tigger erstellen, anstatt nur den üblichen All Pages Trigger zu verwenden. Wir versuchen, der Seite zuerst Zeit zum Laden zu geben, also wählen Sie Page View — Window Loaded. Dann gib dein Tag und deinen Namen ein und speichere alles.

Jetzt haben Sie ein Tag, das ein DataLayer-Ereignis erzeugt, wenn es ausgelöst wird, und das nur beim Window Loaded-Ereignis ausgelöst wird.

Schritt 3 — Erstellen Sie den benutzerdefinierten Event-Trigger, den Sie für alle Tags verwenden, die Sie verzögern möchten.

Gehe zu Trigger und tippe auf Neu.

Geben Sie dem Trigger einen Namen, wählen Sie Benutzerdefiniertes Ereignis als Triggertyp und AfterLoad als Eventnamen. Bei afterLoad wird zwischen Groß- und Kleinschreibung unterschieden. Speichern und fertig.

Jetzt können Sie diesen benutzerdefinierten Event-Trigger als ausgewählten Trigger für alle Tags verwenden, die etwas verzögert werden müssen.

Aber was passiert, lassen Sie uns noch einmal zusammenfassen.

Im Gegensatz zu den meisten All-Page-Triggern wartet das Tag, das Sie am Anfang erstellt haben, jetzt darauf, dass der Window Loaded-Trigger ausgelöst wird. Sobald das passiert, wartet es 1,5 Sekunden, bevor es ein Ereignis namens afterLoad an den DataLayer überträgt. In diesem Fall wird Ihr Fully Loaded Trigger ausgelöst und löst alle Tags aus, zu denen Sie ihn hinzugefügt haben. Das gibt allem anderen Zeit zum Laden und hält viele der Scripts zurück, über die Google PageSpeed normalerweise stöhnt. Es hilft also nicht nur, Ihre Ergebnisse zu verbessern, sondern bietet auch eine bessere Benutzererfahrung und ermöglicht weniger Strafen durch Tools, die solche Dinge überwachen.

Du musst nicht dem Weg folgen, den wir eingeschlagen haben, indem du unseren GA-Tag auf allen Seiten auslösen lässt, das kann sich verzögern, es hängt nur davon ab, wie genau du die Analysen haben möchtest, es liegt ganz bei dir. Du kannst übrigens alle Tags, die du nicht benötigst, sofort mithilfe des benutzerdefinierten Events auslösen, wenn du mit der Verzögerung zufrieden bist

Veröffentlichen Sie als letztes den Container, überprüfen Sie, ob alles einwandfrei funktioniert, indem Sie eine Vorschau der Site im Tag Manager anzeigen, um sicherzustellen, dass alles immer noch funktioniert, und gehen Sie dann zu den Tabs, die Sie beim Ausführen des Tests geöffnet hatten. Führen Sie die Tests erneut aus. Es sollte jetzt eine kleine Verbesserung geben, je nachdem, wie viele Tags Sie verzögert haben. Tun Sie dies jedoch nicht nur, weil Sie ein besseres Ergebnis erzielen möchten, es ist auch gut für Ihre Benutzererfahrung und denken Sie daran www.experte.com für Massentests.

Wenn Sie Fragen oder Kommentare zur Verbesserung der Seitengeschwindigkeit haben, schreiben Sie uns in den Kommentaren und denken Sie daran, wenn Sie die Tests durchführen, insbesondere in Lighthouse, sowohl Mobile als auch Desktop mehrmals auszuführen, nur um zu überprüfen, ob es einen Unterschied gibt.

Denken Sie daran, sich das anzusehen Abschnitt „Anleitungen“ unseres Blogs für weitere Tutorials. Wir haben kürzlich auch einen Beitrag zur Erhöhung der Seitengeschwindigkeit verfasst, indem Verwenden Sie Webflow mit Cloudflare, um Ihr Webflow-Projekt zwischenzuspeichern und zu beschleunigen, also sieh dir das an.