Was ist AJAX und wie wird es in WordPress verwendet (Eine Schritt-für-Schritt-Anleitung)

AJAX ist eine beliebte Technologie, die in der Website-Entwicklung verwendet wird und es Ihnen ermöglicht, Daten aus dem Backend abzurufen und die Ansicht zu aktualisieren, ohne die Webseite neu laden zu müssen. Daher hilft es Ihnen, die Interaktivität, Geschwindigkeit und Benutzerfreundlichkeit Ihrer Website zu verbessern. AJAX ist jedes Mal funktionsfähig, wenn Sie Aktionen wie das Hinterlassen eines Kommentars oder das Posten eines Tweets ausführen.

In diesem Artikel werde ich Ihnen sagen, was AJAX ist und wie Sie AJAX in WordPress verwenden (auch bekannt als WP AJAX). Lesen wir weiter!

Was ist AJAX?

AJAX steht für Asynchronous JavaScript And XML, eine Technologie, die es Ihnen ermöglicht, Anfragen an den Server asynchron zu stellen und Änderungen an unseren Seiten vorzunehmen, ohne sie neu laden zu müssen. Das AJAX-Skript fordert den Server auf, einige Daten zurückzugeben, und modifiziert dann die Webseiten mit den erhaltenen Daten.

Stellen Sie sich zum Beispiel ein Drop-down-Menü vor, in dem Sie Ihr Termindatum auswählen, und eine andere Drop-down-Liste zeigt Ihnen dynamisch die verfügbaren Stunden zum Reservieren an. Über ein Skript wurde der Server nach den Stunden gefragt, die für die Auswahl des Behandlungs-Dropdowns zur Verfügung stehen.

Wie funktioniert AJAX?

Die Mission von AJAX ist es, als Brücke zwischen Ihrer Website und dem Server zu dienen. Der Kern dieser asynchronen Technologie ist das XMLHttpRequest-Objekt, das den Datenaustausch ermöglicht. Dies sind die grundlegenden Schritte zum Tätigen eines AJAX-Anrufs:

– Quelle: W3Schools

• Geben Sie die zu sendenden Informationen an
• Stellen Sie den Anruf her
• Verwenden Sie das XMLHttpRequest-Objekt, um die Daten zu senden
• Empfangen und verarbeiten Sie die Antwort vom Server

Das Gute ist, dass dieser Prozess mit der jQuery-Bibliothek vereinfacht werden kann.

Wie verwende ich AJAX in WordPress?

WordPress unterstützt AJAX nativ. Sie können „admin-ajax.php“ im wp-admin-Ordner sehen.

Es wurde ursprünglich für alle Funktionen erstellt, die AJAX-Anfragen vom WordPress-Administrator stellen. Es wird auch für den öffentlichen Teil des Webs verwendet.

Alle WordPress-AJAX-Anfragen müssen ein PHP-Skript durchlaufen. Mit anderen Worten, admin-ajax.php sollte die PHP-Datei sein, über die eine Aktion aufgerufen wird, die Inhalte zurückgibt.

Bereits 2013 führte WordPress die WordPress Heartbeat-API ein, die mehrere wichtige Funktionen bereitstellte, wie z. B. die automatische Speicherfunktion, den Anmeldeablauf und die Post-Lock-Warnung, während ein anderer Benutzer einen WordPress-Beitrag schreibt oder bearbeitet.

Zwei sehr herausragende Merkmale der Heartbeat-API sind:

1. Automatisch speichern

Wenn Sie einen Entwurf eines Beitrags speichern oder weiter daran arbeiten, speichert WordPress automatisch die Änderungen. Es gibt einen klaren Unterschied zwischen dem automatischen Speichern und dem manuellen Speichern des Entwurfs. Sehen Sie sich den folgenden Screenshot an, der beide Speicherarten zeigt:

– Automatisches Speichern in WordPress

2. Pfostensperre

Wenn Sie versuchen, einen Beitrag zu bearbeiten, an dem bereits ein anderer Benutzer arbeitet, wird eine Popup-Warnung über die Situation angezeigt. Es gibt drei Aktionen, die für Sie sichtbar sind.

– Post-Sperre in WordPress

Die oben genannten Funktionen werden durch die WordPress Heartbeat-API ermöglicht, die eine Verbindung zwischen dem Server und dem Browser für entsprechende Kommunikation und Antworten herstellt.

Die WordPress Heartbeat-API generiert Anfragen zur Kommunikation mit dem Server und löst Ereignisse beim Empfang von Daten/Antworten aus. Dies erhöht normalerweise die Last auf dem Server und verlangsamt schließlich den WordPress-Admin.

Ein lebendiges Beispiel

Ich logge mich in mein WordPress-Dashboard ein und beginne mit dem Verfassen eines Beitrags. Als nächstes lasse ich die Registerkarte einige Minuten geöffnet und beginne, andere Registerkarten zu durchsuchen. Das Dashboard ist immer noch angemeldet und Sie können sehen, dass admin-ajax kontinuierlich Anfragen sendet.

– admin-ajax.php Senden von Anfragen an den Server

Laut dem oben genannten Ticket generiert admin-ajax.php in WordPress alle 15 Sekunden Anfragen. Die Anforderung kann jede Kommunikation mit dem Server sein.

Wie überlasten Plugins admin-ajax.php?

Die meisten Probleme in der admin-ajax.php in WordPress können auf die Anfragen installierter Plugins zurückgeführt werden. Diese Plugins verlangsamen den WordPress-Administrator, indem sie Anfragen senden, um eine bestimmte Funktionalität zu erreichen, wie z. B. das Starten eines Pop-ups oder das Aktualisieren eines Social-Sharing-Zählers.

Allerdings werden Anfragen nicht unbedingt die Datei admin-ajax.php aufpeppen. Wenn die Anfragen richtig behandelt werden und Plugin-Entwickler die Best Practices bei der Verwendung der AJAX-Aufrufe in ihren Plugins befolgen, ist die Datei admin-ajax.php in Ordnung. Daher ist es auch wichtig, jedes Plugin zu diagnostizieren, bevor Sie es deaktivieren.

Wie diagnostiziert man ein Plugin in WordPress?

Es ist wichtig, das Plugin richtig zu diagnostizieren, um seine Auswirkungen auf die Datei admin-ajax.php zu identifizieren, die möglicherweise die WordPress-Administration verlangsamen kann. Dazu verwenden wir zwei Tools: GTmetrix und WebPageTest.

Navigieren Sie im Fall von GTmetrix zum Wasserfall-Tab, um eine vollständige Liste der Anfragen zu erhalten. Wenn Sie sich die Liste genau ansehen, können Sie die POST-Anforderungen sehen, die von der Datei admin-ajax.php gestellt wurden.

– Plugin-Diagnose in WordPress

In meinem Fall wurden diese Anfragen hauptsächlich von einem Social-Sharing-Plugin gestellt. Dieses spezielle Plugin sendet alle 15 Sekunden eine Ajax-Anfrage an Social-Media-Konten über die API, um eine aktualisierte Freigabezahl abzurufen.

Erweitern Sie die Registerkarte für detaillierte Informationen. Die Registerkarte „Response“ zeigt die genaue Stelle, die diese Anfragen auslöst.

Chrome wird mit Entwicklertools geliefert, die bei der Analyse der Anfragen verschiedener Plugins helfen können. Um dies zu überprüfen, öffnen Sie die Website in Chrome, klicken Sie auf STRG + Umschalt + I und dann auf die Registerkarte Netzwerk.

– admix-ajax.php Anfragen in Chrome

Laden Sie die Seite neu und sehen Sie, wie die Liste mit aktualisierten Anfragen gefüllt wird. Geben Sie im Filterfeld ajax oder admin-ajax ein, um die erforderlichen Dateien zu filtern. Dadurch erhalten Sie Einblick in die Anzahl der Anfragen sowie deren Häufigkeit und die Quelle der Anfrage.

Klicken Sie anschließend auf die Datei, um weitere Informationen anzuzeigen. Auf der Registerkarte "Antwort" erhalten Sie einen Hinweis auf das Plugin, das diese Anfrage verursacht. In meinem Fall wurde es diesmal durch das Plugin WP Popular (WPP) ausgelöst, ein Plugin, das den beliebtesten Beitrag über einen bestimmten Zeitraum hervorhebt.

Um dies zu vermeiden, stellen Sie sicher, dass das von Ihnen verwendete Plugin aktualisiert ist. Wenn dies nicht der Fall ist, versuchen Sie, ein Support-Ticket zu öffnen, damit die Entwickler das Problem beheben können. Wenn möglich, können Sie es auch durch ein anderes Plugin ersetzen, das aktualisiert ist und die Datei admin-ajax.php nicht überlastet.

Eine gründliche Diagnose ist wichtig, bevor Sie ein Plugin entfernen, da einige Plugins für Ihre WordPress-Site von entscheidender Bedeutung sind. Diese Tools können Ihnen dabei helfen, die Grundursache zu finden und die bestmögliche Lösung zu ihrer Behebung auszuwählen.

Im nächsten Abschnitt werden wir sehen, wie wir diese Anfragen reduzieren und verhindern können, dass die Datei admin-ajax.php überlastet wird.

Beschleunigen Sie das WordPress-Dashboard

Um das WordPress-Backend zu beschleunigen, empfiehlt es sich, die Heartbeat-API zu deaktivieren oder zumindest ein längeres Zeitintervall festzulegen, damit sie nicht alle paar Sekunden auf den Server trifft.

Installieren Sie das Heartbeat-API-Plugin

Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an. Navigieren Sie zu Plugins → Neu hinzufügen → suchen Sie nach Breeze → Installieren und aktivieren Sie es.

– Installieren Sie Breeze in WordPress

Konfigurieren Sie das Breeze-Plugin

Navigieren Sie zu Einstellungen → Breeze → Heartbeat-API. Dort finden Sie 4 verschiedene Möglichkeiten, den Heartbeat zu konfigurieren.

1. Heartbeat steuern: Sie können die Schaltfläche umschalten, um die Heartbeat-API für Ihr Backend, Ihren Post-Editor und Ihr Frontend ein- oder auszuschalten.
2. Heartbeat Frontend: Damit können Sie das Verhalten Ihres Frontends ändern oder es vollständig deaktivieren.
3. Heartbeat Post Editor: Damit können Sie das Verhalten Ihres WP Post Editors ändern oder vollständig deaktivieren.
4. Heartbeat Backend: Damit können Sie das Verhalten Ihres Backends ändern oder es vollständig deaktivieren.

– Heartbeat-API-Einstellungen in Breeze

Erstellen Sie mehrere Regeln

Standardmäßig erhalten Sie die Standardfrequenz der WordPress Heartbeat-API, aber Sie können basierend auf Ihren Anforderungen mehrere Regeln erstellen. Beispielsweise möchten Sie möglicherweise, dass das WordPress-Backend (Dashboard) in 2 Minuten (120 Sekunden) ausgelöst wird, der Post-Editor jedoch in 3 Minuten (180 Sekunden). Dazu müssen Sie zwei Regeln erstellen: eine für das WordPress-Dashboard und die andere für den Post-Editor. Stellen Sie ihre Frequenzen auf 2 bzw. 3 Minuten ein.

Plugins erkennen, die die Heartbeat-API verwenden

Nachdem Sie nun alles eingerichtet haben, ist es an der Zeit zu überprüfen, welche Plugins die Datei admin-ajax.php verwenden und die Website verlangsamen.

Gehen Sie zu GTmetrix und geben Sie die URL Ihrer Website ein. Die Analyse der Website dauert einige Augenblicke. Wenn Sie fertig sind, navigieren Sie zur Registerkarte Wasserfall und Sie sehen, wie viel Zeit eine Datei benötigt, um eine Verbindung herzustellen und zu antworten. Scrollen Sie etwas nach unten und sehen Sie nach, ob es einen Eintrag für POST admin-ajax.php gibt. Wenn ja, erweitern Sie es und navigieren Sie zum Post-Tab. Von hier aus können Sie das Täter-Plugin identifizieren.

In meinem Fall verwendet das Plugin „Desktop Switch“ die Datei admin-ajax.php und sendet kontinuierlich Anfragen an den Server. Dies ist die Zeit, eine Entscheidung zu treffen; Ersetzen Sie es entweder durch ein anderes Plugin oder drücken Sie die Daumen.

– POST admin-ajax.php

Zusammenfassung

In Anbetracht ihres Funktionsumfangs ist die Heartbeat-API auf Ihrer WordPress-Website sehr nützlich. Wenn es jedoch nicht richtig verwendet wird, kann es die Ladezeit eines WordPress-Backends und des Frontends erhöhen, indem WordPress Ajax-Anfragen hin und her gesendet werden.

Es gibt nur zwei Lösungen für dieses Problem. Sie können die Heartbeat-API nur an wenigen Stellen deaktivieren/aktivieren – oder – auf ein verwaltetes Hosting upgraden, das die Last der Anfragen bewältigen und auch die Antwortzeit des Servers verkürzen kann.

Häufig gestellte Fragen