Viele Optimierungsartikel konzentrieren sich darauf, wie du deine WordPress-Seite beschleunigen kannst, wie z.B. die Optimierung deiner Bilder oder den Wechsel zu einem schnelleren Host. Während diese alle wichtig sind, möchten wir heute mit dir die Auswirkungen der Leistung von Drittanbietern und die Auswirkungen auf deine WordPress-Seite besprechen. Grundsätzlich hat alles, was du von deiner Website aus extern anrufst, Ladezeitfolgen. Was dieses Problem noch verschlimmert, ist, dass einige von ihnen nur sporadisch langsam sind, was die Identifizierung des Problems noch schwieriger macht. Heute werden wir Möglichkeiten untersuchen, wie wir Services und Performance-Probleme von Drittanbietern identifizieren und analysieren können.

Was sind externe Dienstleistungen von Drittanbietern?

Ein externer Dienst eines Drittanbieters könnte als alles angesehen werden, was mit deiner WordPress-Seite von außerhalb deines eigenen Servers kommuniziert. Hier sind einige häufige Beispiele, die uns regelmäßig begegnen:

  • Social Media Plattformen wie Twitter, Facebook und Instagram (Widgets oder Konvertierungspixel)
  • Drittwerbenetzwerke wie Google Adsense, Media.net, BuySellAds, Amazon Associates, etc.
  • Website-Analysen wie Google Analytics, Crazy Egg, Hotjar, etc.
  • A/B-Testwerkzeuge wie Optimizely, VWO, Unbounce, etc.
  • WordPress Kommentarsysteme wie Disqus, Jetpack, Facebook Kommentare
  • Backup- und Sicherheitstools wie VaultPress, Sucuri, CodeGuard, etc.
  • Tools für den sozialen Austausch wie SumoMe, HelloBar und HelloBar
  • CDN-Netzwerke wie KeyCDN, Amazon CloudFront, CDN77 und StackPath
  • Extern gehostetes Javascript

Wie externe Dienste Probleme verursachen

Externe Dienstleistungen bringen typischerweise zwei Probleme mit sich. Der eine wird durch das schiere Volumen hervorgerufen, der andere hat damit zu tun, dass man wartet, bis sie geladen sind.

  • Wenn du viele externe Dienste hast, musst du alle laden und auf Informationen von ihnen bei jedem Seitenaufruf warten. Je mehr Anrufe du hast, desto mehr wartest du, desto höher ist die Last auf deinem eigenen Server und desto höher ist deine Chance, auf das zweite Problem zu stoßen.
  • In einigen Fällen wartet das Laden der Seite, bis der Datentransfer zwischen deiner Website und dem externen Dienst abgeschlossen ist. Wenn der Dienst in der Kopfzeile aufgerufen wird und es eine Dienstunterbrechung gibt, wird sich deine Seite einfach weigern zu laden.

Natürlich gibt es Dinge, die getan werden können, um die Dinge zu beschleunigen, wie das asynchrone Laden von Skripten, aber wir werden später auf seine eingehen. In den meisten Fällen ist das schiere Volumen eines der größten Probleme, mit denen du dich befassen musst, wenn du Performance-Probleme von Drittanbietern debuggst.

Identifizierung von Fremdleistungen

Die Identifizierung dieser Dienstleistungen ist nicht allzu schwierig. Eine der einfachsten Möglichkeiten ist es, ein Website-Geschwindigkeitstestwerkzeug zu öffnen, sei es Pingdom, GTmetrix, WebPageTest oder Chrome Devtools, und deine Website damit zu durchlaufen. Du solltest eine Liste der Ressourcen sehen, die geladen wurden. Bewege den Mauszeiger über eine Ressource und wenn sie am Anfang nicht deinen Domainnamen enthält, ist das entweder ein externer Dienst oder ein externes Asset, das du aufrufst.

Unten siehst du, dass die verkleinerte Version von jQuery von einer externen Quelle (https://ajax.googleapis.com) geladen wurde.

Externer Dienst - JavaScript

Externer Dienst – JavaScript

Wenn du nicht weißt, wofür der externe Service gedacht ist, kannst du jederzeit versuchen, die Hauptdomain aufzurufen oder nach ihrem Namen in Google zu suchen, wie es der Entwickler oder das zugehörige Unternehmen tun sollte. Dies ist eine gute Möglichkeit, um festzustellen, ob der Service legal ist. Wie du unten sehen kannst, führt die Suche nach der jQuery-Datei zu einigen bekannten Unternehmen wie jQuery und Google, die das Hosting dieser Datei beschreiben. Also bist du wahrscheinlich sicher.

jQuery externes Skript

jQuery externes Skript

Analyse kontinuierlicher Leistungsprobleme von Drittanbietern

Wenn deine Website immer langsam ist, musst du herausfinden, was sie verlangsamt. Wenn deine Website intermittierende Probleme hat, ist das etwas schwieriger. Beginnen wir mit einer kontinuierlichen Langsamkeit. Wir gehen hier davon aus, dass deine Website aufgrund von externen Diensten langsam ist. Während viele Geschwindigkeitsprobleme durch externe Dienste verursacht werden können, gibt es eine Vielzahl anderer Probleme, so dass dies möglicherweise deine Probleme nicht löst.

Wenn deine #WordPress-Seite immer langsam ist 🐌, solltest du herausfinden, warum, richtig? Click to Tweet

Zuerst musst du feststellen, ob es einen Dienst gibt, der eine lange Zeit zum Laden benötigt und wie er sich auf die Leistung deiner Website auswirkt. Deshalb haben wir eine Testseite eingerichtet, die auf Kinsta gehostet wird und die Folgendes enthält:

  • 2 Google AdSense Anzeigen
  • Facebook Like Box
  • Instagram Widget
  • Disqus Kommentare
  • Facebook-Konvertierung Tracking-Pixel
  • Google Analytics
WordPress Testfeld

WordPress Testfeld

Dies wird es uns ermöglichen, jeden Dienst einzeln zu entfernen und dir zu zeigen, wie sehr jeder einzelne Dienst deine gesamte Website-Last beeinflusst. Wir werden auch einige Strategien für alternative Ladeverfahren vorstellen. Du kannst dann die gleichen Strategien auf deine eigene WordPress-Seite anwenden. Wir haben die Testseite durch Pingdom laufen lassen und eines der ersten Dinge, die du dir ansehen kannst, ist die „Content Size by Domain“ und die „Requests by Domain“. Wenn du Anfragen siehst, nicht von deinem Domänennamen, sind dies höchstwahrscheinlich externe Dienste oder externe Assets. Das ist ein guter Anfang. Wie du unten sehen kannst, hat static.xx.fbcdn.net 37 Anfragen, was nicht gut ist!

Pingdom externe Dienstleistungen

Pingdom externe Dienstleistungen- (Geschwindigkeitstest)

Die Ladezeit der Website betrug ebenfalls 1,94 Sekunden, was wirklich nicht gut ist, denn wie du oben sehen kannst, hat die Testseite keinen Inhalt darauf. Dies ist ein kleinerer Test, der dir hilft, die Leistung von Drittanbietern besser zu analysieren. Je größer die WordPress-Seite, desto größer werden die Probleme. Aber im Grunde genommen können die meisten Probleme auf ähnliche Weise gelöst werden.

Bekämpfung von Google AdSense

Das allererste, was wir in Angriff nehmen wollen, ist Google Adsense. Typischerweise, wenn du einen Geschwindigkeitstest durchführst, kannst du mit der Maus über jeden Balken fahren, um zu sehen, wie lange jeder Teil des Ladevorgangs gedauert hat. Du solltest nach extra langen Stangen (im Vergleich zum Rest) und Orten suchen, an denen die Stangen erst dann geladen werden, wenn eine bestimmte Stange fertig ist – das sind deine Engpässe. Sobald du ein bestimmtes Element gefunden hast, das zu lange dauert oder andere Ressourcen am Laden hindert, musst du herausfinden, warum es da ist und woher es kommt.

Dies kann etwas schwierig sein, der Aufruf des Dienstes könnte innerhalb deines Themas kodiert sein, oder es könnte von einem Plugin kommen. Wie wir bereits erwähnt haben, gibt es jedoch auch die Frage des schieren Volumens. Wenn wir uns die folgenden Anfragen von pagead2.googlesyndication.com und tpc.googlesyndication.com ansehen, können wir sehen, dass die Balken ziemlich kurz sind, was bedeutet, dass sie nicht so viel Verzögerung verursachen. Einige von ihnen haben jedoch eine längere Empfangszeit (grüner Balken), was die Zeit ist, die der Webbrowser benötigt, um Daten vom Server zu empfangen. Das große Problem ist, wenn du alle Anfragen zusammengenommen hast.

Wir nennen Google AdSense gerne einen variablen Drittanbieter-Service. Das liegt daran, dass jedes Mal, wenn eine Seite geladen wird, eine andere Anzahl von Anfragen und Assets geladen werden. Dies macht es sehr schwierig festzustellen, was Leistungsprobleme verursacht, da es bei jedem Geschwindigkeitstest anders sein wird. Nachfolgend findest du einen Auszug aus einigen der Anfragen von Drittanbietern, die die Anzeigen generieren. Sie erzeugen auch Redirects, die ihre eigenen Delays haben.

Google

Google AdSense externe Anfragen

Du denkst vielleicht, dass es verrückt ist, wenn nur zwei Anzeigen so viele Anfragen generieren, aber so funktionieren sie.

Option 1 – Asynchronisation laden

Deine erste Option ist, sicherzustellen, dass sie asynchron geladen werden. Das async-Attribut sagt dem Browser im Grunde genommen, dass er sofort mit dem Herunterladen der Ressource beginnen soll, ohne das HTML-Parsing zu verlangsamen. Sobald die Ressource verfügbar ist, wird das HTML-Parsing angehalten, damit die Ressource geladen werden kann. Neu generierter Code aus Google AdSense hat dieses Attribut standardmäßig, aber wenn du Code hast, der noch ein paar Jahre alt ist, empfehlen wir, ihn zu überprüfen.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- nogluten-top-right-page-300x250 -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="9805695044" data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Schau dir unseren anderen Beitrag über die Beseitigung von Render-Blocking von JavaScript und CSS an. Dies kann dir helfen, besser zu verstehen, wie Skripte auf deiner WordPress-Seite geladen und funktioniert.

Option 2 – Entferne sie

Deine andere Möglichkeit ist es, Google AdSense vollständig zu entfernen. Offensichtlich ist dies bei einigen Websites, die auf Werbeeinnahmen von Drittanbietern angewiesen sind, keine Option. Aber wir haben gesehen, wie E-Commerce-Websites eine AdSense-Anzeige auf ihre Website werfen und nur versuchen, einen schnellen Gewinn zu erzielen. Du solltest dir der Performance-Probleme bewusst sein. Wenn du Produkte oder Dienstleistungen verkaufst, kann eine Google AdSense-Anzeige mehr Schaden als Nutzen anrichten und deiner Haupteinnahmequelle schaden. Für Blogger kannst du auch in Affiliate-Werbung vs. AdSense schauen. Viele Male mit Affiliate-Anzeigen kannst du sie aus deinem CDN laden und es wird nur eine einzige Anfrage geben.

In diesem Beispiel werden wir die Anzeigen entfernen, um dir zu zeigen, wie nur zwei kleine Anzeigen die Gesamtleistung deiner WordPress-Seite beeinflussen können. Also haben wir nach dem Entfernen einen weiteren Geschwindigkeitstest durchgeführt und wie du sehen kannst, sind unsere Ladezeiten von 1,94 Sekunden auf 909 ms gefallen! Unsere Anfragen gingen von 185 auf 138 zurück, und unsere gesamte Seitengröße wurde von 2 MB auf 1,7 MB reduziert.

Nach dem Entfernen von Google AdSense

Nach dem Entfernen von Google AdSense (Geschwindigkeitstest)

Das ist richtig! Zwei kleine Anzeigen haben etwa eine Sekunde zu unserer Gesamtladezeit beigetragen. Aus diesem Grund, es sei denn, dein Einkommensmodell dreht sich um Werbung von Drittanbietern, solltest du sie nicht auf deiner WordPress-Seite platzieren. Wenn du ein Problem mit einem Werbenetzwerk hast und du ein Plugin hast, das das Werbenetzwerk für dich handhabt, besteht die Möglichkeit, dass das Deaktivieren dieses Plugins das Problem beseitigt. Wenn es innerhalb des Themas kodiert ist, musst du deine Themendateien ändern. Wir empfehlen dir, beide der folgenden Schritte durchzuführen, wenn du ein Entwickler bist (wenn du nicht hier bist, kannst du mehr darüber erfahren, wie du einen guten WordPress-Entwickler findest).

Die Facebook Like Box in Angriff nehmen

Das nächste, was man sich ansehen sollte, ist die Facebook-ähnliche Box, die all diese static.xx.fbcdn.net– und scontent.xx.fbcdn.net Anfragen verursacht. Wir können sehen, dass die Balken ziemlich kurz sind, was bedeutet, dass sie nicht zu einer so großen Verzögerung führen. Allerdings, wenn man sie alle zusammen addiert und das ist, wo das Problem ist. Auch hier handelt es sich um ein Problem der schieren Lautstärke.

Facebook Widgets Anfragen

Facebook Widgets Anfragen

Wir empfehlen jedem Seitenbesitzer, sich von der Facebook-ähnlichen Box fernzuhalten! Es generiert nicht nur viele Anfragen an externes JavaScript, sondern lädt auch viele Bilder. Hier sind drei Empfehlungen, um dies besser zu handhaben.

Option 1 – Asynchronisation laden

Um die Facebook-ähnliche Box zu verwenden, hättest du oder ein Entwickler den folgenden Code in den Header deiner WordPress-Seite einfügen müssen. Es gibt auch einige WordPress Widgets, die die Box ebenfalls hinzufügen.

<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Das Problem mit dem obigen Code ist, dass er nicht asynchron geladen wird. Das async-Attribut sagt dem Browser im Grunde genommen, dass er sofort mit dem Herunterladen der Ressource beginnen soll, ohne das HTML-Parsing zu verlangsamen. Sobald die Ressource verfügbar ist, wird das HTML-Parsing angehalten, damit die Ressource geladen werden kann. Wir sind uns nicht sicher, warum Facebook dieses Attribut nicht zum Skript hinzugefügt hat, aber du kannst die modifizierte Version unten sehen, die es asynchron lädt.

<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.async=true; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1697897870426976";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Du wirst wahrscheinlich keinen großen Unterschied in den Ladezeiten bemerken, wenn du es in Pingdom überprüfst, aber deine Besucher werden es definitiv, da es sich darauf auswirkt, wie/wann die Skripte und Assets geladen werden.

Option 2 – Verwende stattdessen ein Bild-Banner

Die nächste Empfehlung ist, die Facebook-ähnliche Box durch ein Bannerbild zu ersetzen, das einfach auf deine Facebook-Seite verlinkt. Dies würde die Anforderungen von 40+ sofort auf 1 reduzieren und du hättest nicht mehr die externen Abhängigkeiten. Auf diese Weise kann man sehr kreativ werden und es ist eine gute Balance zwischen Design und Leistung.

Option 3 – Lass dich davon befreien

Und schließlich wäre die letzte Option, sie ganz loszuwerden. Wir haben das auf unserem Testgelände getan und wie du unten sehen kannst, hat es unsere Ladezeiten von 909 ms auf 786 ms reduziert. Es reduzierte das Gesamtgewicht der Seite von 1,7 MB auf 1,0 MB und die Gesamtzahl der Anfragen von 138 auf 78. Eine Sache, die man hier wirklich hervorheben sollte, ist die Gewichtsreduzierung der Seite. Die Facebook-ähnliche Box hat 700 KB hinzugefügt! Das ist ziemlich schlimm.

Nach dem Entfernen der Facebook-ähnlichen Box

Nach dem Entfernen der Facebook-ähnlichen Box (Geschwindigkeitstest)

Das Instagram Widget in Angriff nehmen

Das nächste, was du dir ansehen solltest, ist das Instagram Widget. In unserem Beispiel verwenden wir das kostenlose Instagram Feed Plugin. Das Plugin ist eigentlich nicht das Problem, sondern die generierten Anfragen von scontent.cdninstagram.com. Wir können sehen, dass die Balken ziemlich kurz sind, was bedeutet, dass sie nicht zu einer so großen Verzögerung führen. Allerdings, wenn man sie alle zusammen addiert und das ist, wo das Problem ist. Auch hier handelt es sich um ein Problem der schieren Lautstärke. Du kannst wahrscheinlich sehen, wie sich hier ein Muster bildet. Viele Performance-Probleme von Drittanbietern auf WordPress-Sites sind nicht auf Verzögerungen bei einzelnen Anfragen zurückzuführen, sondern auf solche, die sich zunächst nicht um die Performance kümmern.

Instagram externe Anfragen

Instagram externe Anfragen

Wir empfehlen auch, sich vom Instagram-Widget fernzuhalten, wenn du es nicht wirklich brauchst, da es viele Anfragen generiert. Hier sind ein paar Empfehlungen, um dies besser zu handhaben.

Option 1 – Verwende stattdessen ein Bild-Banner

Genau wie bei der Facebook-ähnlichen Box, es sei denn, du brauchst wirklich ein dynamisches Instagram-Widget, erstelle stattdessen ein Banner, das auf deine Instagram-Seite verlinkt. Dies würde die 20+ Anfragen sofort auf 1 reduzieren und du hättest nicht mehr die externen Abhängigkeiten. Auf diese Weise kann man sehr kreativ werden und es ist eine gute Balance zwischen Design und Leistung.

Option 2 – Lass dich davon befreien

Und natürlich kannst du es einfach ganz loswerden. Wir haben das auf unserem Testgelände getan und wie du unten sehen kannst, hat es unsere Ladezeiten von 786 ms auf 690 ms reduziert. Es reduzierte das Gesamtgewicht der Seite von 1,0 MB auf 814,3 KB und die Gesamtzahl der Anfragen von 78 auf 57.

Nach dem Entfernen des Instagram Widgets

Nach dem Entfernen des Instagram Widgets (Geschwindigkeitstest)

Umgang mit disqus Kommentaren

Das nächste, was man sich anschauen sollte, sind die Disqus-Kommentare. In unserem Beispiel verwenden wir das kostenlose Disqus Comment System Plugin. Das große Problem mit Disqus ist, dass es viele Anfragen generiert und den Gravatar für jede einzelne kommentierende Person laden muss. Wir haben in unseren Beiträgen ausführlich darauf eingegangen, wie man WordPress-Kommentare beschleunigen kann. Wenn du eine große kommerzielle Website bist, musst du vielleicht auch bezahlen, um Disqus-Anzeigen zu entfernen, und wenn du es nicht tust, würde das dazu führen, dass noch mehr Anfragen auf deiner Website generiert werden. Nachfolgend siehst du einen kleinen Ausschnitt aus nur einigen der Anfragen, die sie erzeugt.

Disqus externe Anfragen

Disqus externe Anfragen

Hier sind ein paar Empfehlungen, wenn es um den Umgang mit Kommentaren geht.

Option 1 – Lazy Load Disqus Kommentare

Lazy loading ist der Prozess des Nicht-Ladens der Assets und Skripte, bis die Person die Seite nach unten gescrollt hat. Dadurch wird sichergestellt, dass das Laden der ersten Seite schneller erfolgt. Du kannst Disqus-Kommentare mit dem kostenlosen Disqus Conditional Load-Plugin von Joel James einfach faul laden. Wir verwenden dies tatsächlich im Kinsta-Blog. Wir haben das Plugin auf unserem Testgelände installiert und wie du unten sehen kannst, hat es unsere Ladezeiten von 690 ms auf 603 ms reduziert. Es reduzierte das gesamte Seitengewicht von 814 KB auf 366,1 KB und die Gesamtzahl der Anfragen von 57 auf 24. Eine Sache, die man hervorheben sollte, ist die massive Gewichtsreduzierung der Seiten!

Nach fauler Belastung Disqus

Nach fauler Belastung Disqus (Geschwindigkeitstest)

Option 2 – Lazy Load Native WordPress Kommentare

Deine andere beste Option wäre, die nativen WordPress-Kommentare faul zu laden. Joel James, der gleiche Entwickler des Lazy Load Disqus Plugins, hat auch ein kostenloses Plugin namens Lazy Load for Comments. Dies funktioniert in einer sehr ähnlichen Weise wie die obige. Wir haben das Plugin auf unserem Testgelände installiert und wie du unten sehen kannst, führte es zu einer fast gleichmäßigen Reduzierung der Ladezeit.

Nach dem langsamen Laden der nativen WordPress-Kommentare

Nach dem langsamen Laden der nativen WordPress-Kommentare (Geschwindigkeitstest)

Auseinandersetzung mit dem Facebook Conversion Tracking Pixel

Und schließlich werfen wir einen Blick auf den Facebook-Konvertierungs-Tracking-Pixel. Offensichtlich verwenden meisten Menschen dies, um Daten über Personen zu sammeln, die ihre Website besuchen, oder um Konvertierungen zu verfolgen, wenn sie Facebook-Anzeigen schalten. Es ist also nicht immer möglich, dies zu entfernen, und es gibt wirklich nichts, was man tun kann, um die Leistung zu verbessern. Wie du unten sehen kannst, ist sie für das Erzeugen von 5 verschiedenen HTTP-Requests verantwortlich, und leider sind sie nicht die schnellsten.

Facebook-Konvertierung Tracking Pixel externe Anfragen

Facebook-Konvertierung Tracking Pixel externe Anfragen

Wir werden dies einfach entfernen, um dir zu zeigen, wie sehr es die Leistung deiner Website beeinflusst. Nachdem wir es von unserer Seite genommen hatten, sank unsere Ladezeit von 611 ms auf 429 ms. Es reduzierte das gesamte Seitengewicht von 367,5 KB auf 343,2 KB und die Gesamtzahl der Anfragen von 27 auf 22.

Nach dem Entfernen von FB-Pixeln

Nach dem Entfernen von FB-Pixeln (Geschwindigkeitstest)

Die obigen Beispiele sind nur einige von Tausenden von externen Diensten, die du auf deiner WordPress-Seite ausführen kannst. Es ist wichtig, sich jeden einzelnen anzusehen und festzustellen, wie sehr er die Leistung deiner Website beeinflusst. Wie du sehen kannst, kann schon ein einziger fauler Apfel große Probleme verursachen!

Externe Dienstleistungen können die Performance verbessern

Während die meisten externen Dienste die Leistung deiner Website beeinträchtigen, gibt es diejenigen, die ihr ebenfalls helfen können. Ein CDN, wie KeyCDN oder Cloudflare, kann deine Website mit minimalem Einrichtungsaufwand drastisch beschleunigen. In unserem Tutorial erfährst du, wie man KeyCDN einrichtet und wie man Cloudflare installiert. In diesem Beispiel unten haben wir KeyCDN zu unserer Testseite hinzugefügt. Wie du sehen kannst, hat es unsere Ladezeit um weitere 100 ms verkürzt.

nach-cd

nach CDN (speed test)

Weitere Optimierungen

Wir haben dann ein paar zusätzliche Optimierungen auf der WordPress-Seite vorgenommen, um uns zu einem Ergebnis von 100 Leistungsstufen und einer Ladezeit von 270 ms zu bringen. Diese Optimierungen umfassten unter anderem:

  • Stelle sicher, dass alles vom CDN-Anbieter geladen wurde. Dies bedeutete, dass Google-Schriften lokal bereitgestellt werden mussten und zu einer einzigen HTTP/2-Anfrage führte.
  • Entfernen zusätzlicher Assets, die unnötige HTTP-Anfragen erzeugen, wie Emojis, Embeds, jQuery-Migration, etc. Wir haben das Perfmatters Plugin verwendet.

Hier sind vertiefende Tutorials für einige der Optimierungen:

Nach Optimierungen

Nach Optimierungen (Geschwindigkeitstest)

Wie du sehen kannst, haben wir von 1,94 Sekunden auf 270 ms Ladezeiten abgesenkt! Natürlich benötigst du vielleicht einige externe Dienste, wie es jedes Unternehmen tut. Aber es ist wichtig, nicht zu vergessen, jeden einzelnen zu analysieren. Wenn du enorme Ladezeiten siehst, wende dich an den Entwickler oder die Firma, die dafür verantwortlich ist, und bringe das Problem zur Sprache.

Verhindern von blockierter Ladung

Das größere Problem ist, wenn ein Skript das Laden verhindert, während es das Laden selbst beendet. Wenn ein solches Skript im Header enthalten ist, kann es deine Website auf unbestimmte Zeit leer halten. Aus diesem Grund sollte alles, was nicht unbedingt in der Kopfzeile notwendig ist, in der Fußzeile platziert werden. Dies ermöglicht es deiner Website, vollständig zu laden, bevor das problematische Skript überhaupt mit dem Laden beginnt. Wenn du die Funktion wp_enqueue_script() verwendest (das solltest du), kannst du mit dem fünften Parameter angeben, dass er in der Fußzeile geladen werden soll.

Wenn du feststellst, dass ein Plugin ein Asset ohne Grund in den Header lädt, kannst du es mit wp_dequeue_script() aus dem Header entfernen und es dann mit wp_enqueue_script() auf die gleiche Weise registrieren, aber in der Fußzeile.

Verwendung von Google Tag Manager

Eine weitere Möglichkeit, bei der Lösung von Performance-Problemen von Drittanbietern zu helfen, ist die Verwendung eines kostenlosen Tools wie Google Tag Manager. So kannst du alle deine Skripte und Tags an einem Ort verwalten. Ein paar Vorteile davon sind, dass sie asynchron geladen werden, die Verwaltung wird einfacher, und du kannst Zündtrigger einrichten, für welche Seiten Skripte geladen werden.

Google Tag Manager Zündauslöser

Google Tag Manager Zündauslöser

Allerdings gibt es auch hier einige Nachteile:

Google Tag Manager reduziert nicht die Anzahl der Tags auf deiner Website oder App, aber es vereinfacht die Verwaltung der Tags. Für Websites wird Google Tag Manager asynchron ausgeführt und kann so konfiguriert werden, dass Tags nur dann ausgelöst werden, wenn sie benötigt werden, wodurch deine Seiten schneller geladen werden können. (Quelle)

Wenn du Google Tag Manager verwendest, hast du auch eine weitere HTTP-Anfrage und eine DNS-Suche bei googletagmanager.com, obwohl sie sehr vernachlässigbar ist.

googletagmanager.com Anfrage

googletagmanager.com Anfrage

Wir empfehlen, Google Tag Manager für große, nicht optimierte Websites mit vielen Diensten und Integrationen von Drittanbietern zu verwenden. Für kleinere Websites mit Entwicklern wirst du höchstwahrscheinlich nicht so viel von einer Leistungssteigerung durch den Einsatz von GTM sehen.

Analyse von zeitweiligen Performance-Problemen von Drittanbietern

Die Art und Weise, wie du intermittierende Probleme löst, ist die gleiche wie die Art und Weise, wie du kontinuierliche Probleme löst, aber die Identifizierung des Schuldigen ist schwieriger. Die Implementierung der oben genannten Lösungen könnte bereits helfen, aber es wäre trotzdem schön zu wissen, was das Problem verursacht. Ein Werkzeug, das wir gerne dafür verwenden, ist New Relic, und wenn du ein Kinsta-Benutzer bist, können wir dies auf deiner Website überwachen oder dir erlauben, deinen eigenen New Relic-Lizenzschlüssel zu verwenden. Nachfolgend siehst du ein Beispiel für einige Werbenetzwerke von Drittanbietern und die damit verbundenen hohen Ladezeiten über einen bestimmten Zeitraum.

New Relic Monitoring - externes Anzeigenetzwerk

New Relic Monitoring – externes Anzeigenetzwerk

Ironischerweise kann New Relic aber auch Performance-Probleme verursachen. In diesem Fall empfehlen wir, es für die Fehlersuche und sporadische Überwachung zu verwenden, nicht für den Dauerbetrieb. Du kannst auch ein Tool wie GTMetrix verwenden, um stündliche Geschwindigkeitsüberprüfungen auf deiner Website zu planen. Nach ein paar Tagen kannst du zurückschauen und die Ergebnisse in einer schönen kleinen Grafik sehen:

GTmetrix-Berichtszeiten

GTmetrix-Berichtszeiten

Dies zeigt dir, wann deine Seite langsamer als der Durchschnitt war. Wir würden zuerst auf die Spitze ganz rechts klicken, um in den zu diesem Zeitpunkt erstellten Bericht zu gelangen. Wir würden dann den Wasserfall betrachten, um zu sehen, welche Ressource das Problem verursacht hat. Schau dir unseren ausführlichen Beitrag an, wie du GTmetrix zur Diagnose von Problemen auf deiner Website verwenden kannst.

GTmetrix Wasserfalldiagramm

GTmetrix Wasserfalldiagramm

Es gibt einen Vorteil darin, der scheinbar nachfolgende blockiert, wirf einen Blick auf den grünen Balken in der Nähe der Mitte. Es stellte sich heraus, dass dies von Google Recaptcha war. 632ms mag wie ein Augenzwinkern erscheinen, aber in Wirklichkeit ist es viel. Eine Seite sollte wirklich in 2 Sekunden geladen werden – etwa. Mehr als ein Drittel davon wird allein von diesem einen Vermögenswert in Anspruch genommen. Die Anlage sollte entweder später geladen werden oder sie sollte zugunsten anderer Überprüfungsmethoden entsorgt werden.

Zusammenfassung

Wie du sehen kannst, können nur wenige externe Dienstleistungen einen großen Einfluss haben. Die Leistung von Drittanbietern ist nicht zu vernachlässigen und geht Hand in Hand mit Onsite- und Backend-Optimierungen. Glücklicherweise gibt es jedoch eine Menge zu tun, vor allem, wenn man einen Entwickler mit einbezieht. Ditching Services, die sie zwicken, um auf verschiedene Arten wie Async zu laden, die gleiche Sache auf eine alternative Art und Weise wie ein Banner bereitzustellen, alle können einen langen Weg gehen, um deine Seite viel schneller zu machen!

81
Mal geteilt