Kürzlich fragte uns ein Benutzer nach Tipps zur Optimierung der Leistung seiner WordPress-Website. Einer unserer Vorschläge war, das standardmäßige WordPress jQuery-Skript durch jQuery von Google Hosted Libraries zu ersetzen.
WordPress enthält standardmäßig jQuery in der Kernsoftware. Wir haben jedoch festgestellt, dass der Austausch durch die neueste jQuery-Version aus der Google-Bibliothek die Leistung verbessern kann.
In diesem Artikel zeigen wir Ihnen, wie Sie das standardmäßige WordPress jQuery-Skript einfach durch die Google-Bibliothek ersetzen können, um Leistung und Geschwindigkeit zu verbessern.
Warum & wann Sie das Standard-WordPress-jQuery ersetzen sollten
jQuery ist eine beliebte JavaScript-Bibliothek, die von Entwicklern verwendet wird, um schöne Webanwendungen zu erstellen. Sie wird in WordPress häufig verwendet, um Funktionen wie Slider, Popups und vieles mehr hinzuzufügen.
WordPress enthält eine jQuery-Bibliothek, die mit der Kernsoftware von WordPress gebündelt ist. Viele der besten WordPress-Plugins und die beliebtesten WordPress-Themes verlassen sich für wesentliche Funktionalitäten und Features auf diese Bibliothek.
Das Laden von jQuery auf einem Shared-Hosting-Server kann jedoch ressourcenintensiv sein und Ihre Website verlangsamen, insbesondere wenn Sie schlecht programmierte WordPress-Themes oder -Plugins verwenden, die nicht den WordPress-Best-Practiken folgen.
Ein weiteres Problem bei der Verwendung der von WordPress enthaltenen jQuery-Version ist, dass sie nicht aktualisiert wird, es sei denn, WordPress aktualisiert sie. Es könnte neuere Versionen von jQuery mit Leistungs- oder Sicherheitskorrekturen geben, aber Sie erhalten keinen Zugriff darauf, bis sie in einem WordPress-Update enthalten sind.
Es gibt ein paar Workarounds, um dies zu beheben. Sie können beispielsweise jQuery über Google-Server oder das offizielle CDN von jQuery laden.
Google Hosted Libraries ist eine gute Wahl, da ihre Server stabil, aktuell und für Geschwindigkeit optimiert sind, wodurch jQuery auf Ihrer WordPress-Website viel schneller geladen werden kann.
Das gesagt, schauen wir uns an, wie Sie das Standard-WordPress-jQuery einfach durch die Google-Bibliothek ersetzen können.
Ersetzen Sie das Standard-WordPress-jQuery durch die Google-Bibliothek
WordPress verfügt über eine integrierte Methode, um Skripte und Stylesheets einfach hinzuzufügen. Dies ermöglicht es Ihnen auch, alle Skripte oder Stylesheets, die mit der integrierten Methode geladen werden, sicher zu entfernen.
Wir werden diese Methode verwenden, um zuerst das Standard-jQuery von WordPress zu deaktivieren. Danach werden wir WordPress anweisen, jQuery über die Google-Bibliothek zu laden.
Sie müssen den folgenden Code zu Ihrer Theme-Datei functions.php, einem standortspezifischen Plugin oder einem Code-Snippet-Plugin hinzufügen.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Wir empfehlen die Verwendung des WPCode Code-Snippet-Plugins, um diesen Code in WordPress hinzuzufügen. Es ist kostenlos, einfach zu bedienen und bricht Ihre Website nicht, falls etwas schiefgeht.
Hinweis: Es gibt auch eine Premium-Version von WPCode, die erweiterte Funktionen wie Code-Revisionen, automatische Conversion-Pixel, geplante Snippets, eine private Cloud-Bibliothek und mehr bietet.
Um zu beginnen, müssen Sie WPCode installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zum Thema Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, navigieren Sie in Ihrem WordPress-Dashboard zu Code Snippets » Snippet hinzufügen .
Suchen Sie dort nach der Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ und klicken Sie darunter auf die Schaltfläche „+ Benutzerdefinierten Snippet hinzufügen“.
Dann müssen Sie einen Code-Typ aus der Liste der angezeigten Optionen auswählen.
Wählen Sie für dieses Tutorial „PHP-Snippet“.
Als Nächstes können Sie einen Titel für Ihren Code-Snippet hinzufügen. Dies kann alles sein, damit Sie sich erinnern, wofür der Code ist.
Fügen Sie danach einfach den obigen Code in das Feld 'Code-Vorschau' ein.
Schalten Sie schließlich den Schalter von 'Inaktiv' auf 'Aktiv' und klicken Sie auf die Schaltfläche 'Snippet speichern'.
Das ist alles! WordPress ersetzt nun das Standard-jQuery und lädt es stattdessen über die Google-Bibliothek.
Hinweis: Diese Methode lädt weiterhin die im URL genannte jQuery-Version. In Zukunft müssen Sie möglicherweise die Google-Bibliotheks-URL ändern, um eine neuere jQuery-Version zu verwenden.
Google wird die Versionsnummer nicht automatisch für Sie aktualisieren, da dies zu Kompatibilitätsproblemen führen könnte, wenn Ihr Theme oder Ihre Plugins auf einer anderen Version basieren.
Die neueste URL finden Sie auf der Website der von Google gehosteten Bibliotheken.
Von dort aus können Sie auch die URLs für ältere Versionen von jQuery finden, die Sie bei Bedarf zur Fehlerbehebung verwenden können.
Ersetzen anderer Standard-jQuery-Bibliotheken
Neben der Kern-jQuery-Bibliothek enthält WordPress auch eine Reihe anderer jQuery-Skripte. Einige dieser Skripte, wie jQuery Mobile und jQuery UI, werden von der Google-Bibliothek gehostet.
Für andere Bibliotheken können Sie die eigenen CDN-Server von jQuery verwenden, um sie viel schneller zu laden. Im folgenden Beispiel haben wir das WordPress-Skript jquery-ui-core durch die offizielle jquery-ui-Version ersetzt.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Genau wie bei Google-Bibliotheken müssen Sie die URL nach einer Weile ersetzen, um die neueste Version des Skripts zu verwenden.
jQuery in WordPress vollständig deaktivieren
Aufgrund seiner weiten Verbreitung empfehlen wir nicht, jQuery auf Ihrer WordPress-Website vollständig zu deaktivieren. Selbst wenn Ihr WordPress-Theme jQuery nicht verwendet, benötigen viele beliebte WordPress-Plugins es immer noch.
Wenn Sie jedoch sicher sind, dass Ihre Website kein jQuery benötigt, können Sie es sicher deaktivieren.
Fügen Sie einfach den folgenden Code in die Funktionen-Datei Ihres Themes, ein standortspezifisches Plugin oder ein Code-Snippet-Plugin wie WPCode ein.
if ( !is_admin() ) wp_deregister_script('jquery');
Das ist alles. Dieser Code deaktiviert einfach das Laden des jQuery-Skripts im Frontend Ihrer WordPress-Website.
Fehlerbehebung bei jQuery-bezogenen Problemen in WordPress
Neue Versionen von jQuery können manchmal alte Methoden und Funktionen veralten lassen oder entfernen. Wenn ein WordPress-Plugin auf Ihrer Website eine ältere Methode verwendet, könnte dies potenziell Probleme verursachen.
Möglicherweise bemerken Sie Warnungen im Bereich Konsole des Inspect-Tools, oder Sie stellen fest, dass einige Funktionen einfach nicht mehr funktionieren.
WordPress verwendete früher ein Skript namens jQuery-migrate, um die Abwärtskompatibilität mit älteren Versionen von jQuery zu gewährleisten. Seit WordPress 5.5 wurde dieses Skript jedoch aus WordPress entfernt.
Wenn Sie das jQuery-Migrate-Skript wieder hinzufügen oder zwischen verschiedenen jQuery-Versionen Fehler beheben möchten, können Sie die folgende Methode ausprobieren.
Installieren und aktivieren Sie einfach das Plugin Version Control for jQuery. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen » jQuery Version Control besuchen. Von hier aus können Sie die jQuery-Version auswählen, die Sie verwenden möchten.
Das Plugin lädt diese Version automatisch von der offiziellen jQuery CDN.
Das Plugin lädt auch das jQuery-Migrate-Skript. Wenn Sie möchten, können Sie es während der Fehlerbehebung deaktivieren.
Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Änderungen zu speichern.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie das Standard-WordPress-jQuery durch die Google-Bibliothek ersetzen. Möglicherweise möchten Sie auch diese nützlichen jQuery-Tutorials für WordPress-Benutzer sehen oder unseren vollständigen Leitfaden zur WordPress-Leistungsoptimierung einsehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Mrteesurez
Wenn Sie es manuell ersetzen, wenn WordPress neue Updates für die WordPress-Version veröffentlichen könnte, und ich denke, alle notwendigen Updates sollten vor der Veröffentlichung durchgeführt worden sein, oder gibt es dazu Fakten?
Außerdem, muss ich jQuery vollständig deaktivieren, wie Sie in diesem Artikel angewiesen haben, bevor ich das von der Google-Bibliothek verwende, da Sie gesagt haben, dass das integrierte jQuery die Website verlangsamen könnte, insbesondere auf einem Shared Hosting?
WPBeginner Support
WordPress könnte ebenfalls ein Update veröffentlichen, aber es hängt von den individuellen Bedürfnissen ab, ob sie eine neuere Version von jQuery haben möchten.
Wenn Sie die Schritte in diesem Artikel befolgen, empfehlen wir, die alte Version zu deaktivieren, um zu verhindern, dass mehrere Versionen von jQuery gleichzeitig ausgeführt werden und einen Konflikt verursachen.
Admin
Mrteesurez
Danke. Ich schätze Ihre Antwort und Anleitung. Ich habe nicht einmal an Konflikte gedacht, ich habe darüber nachgedacht, ob die beiden gleichzeitig eine Website total verlangsamen würden. Ich werde mich bei der Ausführung an Ihre Anweisungen halten. Danke, dass Sie sich die Zeit genommen haben zu antworten.
ALEX
Hallo,
Wir haben einen Server in China, und alle Ressourcen von Google werden von der chinesischen Regierung durch die Firewall blockiert.
Aber die Jquery- und Schriftressourcen werden jetzt standardmäßig von Google auf WordPress geladen, und die Website verursacht ernsthafte Verzögerungen.
Gibt es also eine Möglichkeit, Js- oder CSS-Ressourcen vom lokalen Server laden zu lassen, bitte?
Danke
WPBeginner Support
Wenn Sie eine Webadresse für die jQuery-Dateien auf einem lokalen Server haben, dann würden Sie die URL im Snippet ändern, um dorthin zu zeigen, wo sich jQuery befindet.
Admin
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Danke
Jorge
Hallo,
Hier ist eine fortgeschrittenere Implementierung:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Wo „cdn.yourdomain.com“ durch den Dateipfad ersetzt werden sollte, um bessere Ergebnisse mit einem CDN zu erzielen.
Mit freundlichen Grüßen,
Jorge Ortiz
Simon
Sowohl die Lösung des Beitrags als auch diese hier zerstören meine Website.
Plato39
Jorges Code hat für mich funktioniert – aber die Anführungszeichen müssen ersetzt werden. Versuchen Sie Folgendes:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – diese Webseite fügt die schicken Anführungszeichen hinzu. Machen Sie einfach eine „Suchen und Ersetzen“-Funktion in Ihrem Texteditor (oder ersetzen Sie die Anführungszeichen manuell durch einfache) und der Code funktioniert in der functions.php-Datei Ihres Themes.
Shaurya
Was gebe ich in die URL ein, wenn ich kein CDN habe?
wird
Hallo
vielen Dank für Ihren Beitrag, ich habe versucht, ihn zu ändern und weiß nicht, ob ich es richtig gemacht habe, da meine Website jetzt 2 Sekunden langsamer ist
Wie überprüfe ich, ob ich es richtig gemacht habe und ob ich die Google-Bibliotheken verwende?
Ihsan
Ich habe den obigen Code getestet und die letzte Zeile ersetzt, um ihn zum Laufen zu bringen und zu verbessern
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Hallo, vielen Dank für deine Tipps. Ich weiß nicht, warum beim Benutzen dieser Funktion das jQuery von Google zweimal geladen wird, ich meine, ich habe zwei HTTP-Anfragen statt einer. Hier ist der Test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Mit jquery.easing passiert dasselbe, aber diesmal mit 3 HTTP-Anfragen für dieselbe Datei.
Irgendwelche Ideen? Ich habe mir den Code angesehen, aber keine Duplizierung von wp_enqueue_script(”); gefunden.
Vielen Dank im Voraus
Alejandro
Mir ist gerade aufgefallen, dass, wenn ich eingeloggt bin, jQuery von Google nur einmal geladen wird.
Mathieu
Danke! Das jQuery, das früher meine Admin-Funktionalität unterbrochen hat, ist jetzt behoben.
Mitch
Vielen Dank, sehr geschätzt.
Joseph Chambers
Was ist, wenn ich entweder HTTP oder HTTPS laden möchte, basierend darauf, worauf der Besucher unsere Seite besucht.
für die meisten Dinge können wir ändern: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js und es funktioniert. Allerdings; etwas in wp_register_script() wirft einen Fehler (weiße Seite mit dem Wort: Error), wenn ich das ändere. Gedanken, Lösungen?
Sajid Iqbal
Danke Syed für diesen großartigen Beitrag. Hat mir viel Zeit gespart.
Matt Ogborne
Sehr hilfreich, danke!
Matt
Riversatile
Hallo,
Hier ist die neueste Version der Googleapi jQuery-Datei.
Wenn Sie den obigen Code kopieren/einfügen, vergessen Sie nicht, die jQuery-URL durch diese zu ersetzen:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Dann ersetzen Sie „1.4.4“ durch „1.6.2“
So:
//jQuery Google API machen function modify_jquery() { if (!is_admin()) { // die nächsten zwei Zeilen auskommentieren, um die lokale Kopie von jQuery zu laden wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); } } add_action(‘init’, ‘modify_jquery’);
vnu
Könnte mir jemand sagen, ob ich (!is_admin) zu „minimum“ Capability ändern muss, wenn ich ein Plugin wie die Tabs und Akkordeons von thethefly verwende? Damit die auf Seiten erstellten Tabs für jeden sichtbar sind?
Danke!
Melissa Cleaver
Vielen Dank für den Code, aber als ich versuchte, ihn in meine functions.php-Datei einzufügen, erhielt ich einen fatalen Fehler, egal wo im Code ich ihn platzierte. Mache ich hier etwas falsch?
Redaktion
Probieren Sie den neuen Code aus, den wir gerade veröffentlicht haben.
Admin
swanie
Frage: Leistet Google Library gute Arbeit beim Abrufen der Alt-Tag-Informationen aus der Mediathek? … Ich habe mehrere professionelle Themes, die einen jQuery-Slider auf der Hauptseite verwenden, aber sie rufen den Alt-Tag nicht ab … somit sieht der Quellcode so aus: alt=““ … was natürlich ein SEO-No-Go ist. Ich habe das Google Library-Skript noch nie verwendet … ich wäre neugierig, wie das funktioniert. Was sind Ihre Erfahrungen?
Redaktion
Alt-Tag wofür? Das ersetzt nur das Javascript...
Admin
swanie
OK … ich spreche speziell von jQuery-Slidern … ich habe mehrere professionelle Themes mit einem Hauptseiten-jQuery-Slider gekauft … hier ist eines davon: http://coloradospringsautomechanics.com … wenn man sich den Quelltext ansieht, werden die Bilder geladen, aber nicht die Alt-Tags … der Alt-Tag ist leer.
Ich schätze, durch das Lesen dieses Beitrags könnte dieser Google Library-Ansatz das möglicherweise lösen.
Eine andere Lösung könnte darin bestehen, die Plugin-Dateien zu öffnen und zum Alt-Tag hinzuzufügen, sodass ich Folgendes haben sollte:
img src="file.jpg" alt="" title=""
Frage mich nur, warum diese jQuery-Slider die Alt-Tags nicht ziehen. Macht das Sinn? Bin ich vom Thema abgekommen?
Ihr seid spitze, übrigens.
Aamir Rizwan
Ihre Website wurde von Google als „Malware“ markiert.
Geraldo
//Offtopic
@Swanie
Geh und schau hier: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Sicherheitsbericht (Warnungen gefunden):
Fehler Gelistet: Ja
Fehler Wahrscheinlich kompromittiert: Ja
//Ontopic
Wir können nicht: „bündeln“ alle unsere JQuery-Skripte? Müssen wir für jedes Skript separat einen Aufruf machen?
WPBeginner Support
@Geraldo: Sie können Abhängigkeiten auflösen. Wenn Sie beispielsweise ein jQuery-Skript laden, benötigt es offensichtlich jQuery, also fügen Sie dies als Abhängigkeit hinzu und WordPress wird es für Sie in die Warteschlange stellen.