Vor ein paar Tagen wurde auf ShopTalk eine Frage gestellt, die uns zu einem kurzen Exkurs über WordPress-Plugins, die von ihnen geladenen Ressourcen und wie das in einer perfekten Welt aussehen würde, führte. Ich habe mir dann einige Gedanken dazu aufgeschrieben und Feedback erhalten. Ich glaube, es kam zu einem einigermaßen zufriedenstellenden Ergebnis, also dachte ich, ich schreibe es auf.
So funktionieren einige Plugins jetzt
Nehmen wir ein reales Beispiel. Das WP-Polls Plugin. Ich denke, es ist ein schönes Plugin. Macht gute Arbeit mit Umfragen. Ich benutze es hier auf CSS-Tricks.
Um diese Umfragen auf Ihrer Website zu platzieren, benötigt es etwas JavaScript, um die Funktionalität zu verwalten (d. h. Abstimmen und Anzeigen von Ergebnissen ohne Seitenaktualisierung) und CSS, um das Umfrage-Widget zu gestalten (die Ergebnisbalken und Ähnliches).
Die Art und Weise, wie es dieses CSS hinzufügt, ist durch das Einfügen eines Stylesheets über den wp_head() Hook, wobei dies in den <head> eingefügt wird.
<link rel='stylesheet' id='wp-polls-css' href='http://example.com/wp-content/plugins/wp-polls/polls-css.css?ver=2.67' type='text/css' media='all' />Die Art und Weise, wie es dieses JavaScript hinzufügt, ist durch das Einfügen eines Skripts über den wp_footer() Hook, wobei dies am Ende des Dokuments eingefügt wird.
<script type='text/javascript' src='//example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.67'></script>Das ergibt Sinn. Das ist, was sie tun müssen, damit dieses Plugin funktioniert. Plugin-Autoren müssen sicherstellen, dass ihre Plugins einfach zu bedienen sind und *funktionieren*.
Als performancebewusster Entwickler möchte ich Skripte und Styles zusammenfügen.
Jetzt haben wir diese beiden einzelzweckorientierten Ressourcen, die auf der Seite geladen werden. Wenn man sich die Web-Performance ansieht und wie man Websites schneller macht, ist einer der ersten Ratschläge, die man hört, Ressourcen zu verbinden. Sehr gute Faustregel: Je weniger Ressourcen eine Website laden muss, desto schneller wird sie sein.
Das Zusammenfügen von Ressourcen ist keine obskure Sache, um die sich nur die elitästen Websites kümmern müssen. Es ist ein Problem für jede Website. Leute haben dieses Problem auf tausend Arten gelöst. CSS-Sprites befassten sich mit dem Zusammenfügen von Bildressourcen. Icon-Schriften und SVG-Sprites lösen dasselbe Problem. CSS-Präprozessoren helfen Ihnen, Ihre Stylesheets zusammenzufügen. Die Rails Asset Pipeline hilft Ihnen, Ressourcen zusammenzufügen. Es gibt Grunt- und Gulp-Plugins im Überfluss, die dafür entwickelt wurden.
Aber wir sind hier in WordPress-Land, also gibt es Lösungen dafür.
Sollen Plugins selbst helfen?
Der erste Gedanke, der mir kam, war, dass Plugins uns erlauben sollten, alles zu deregistrieren, was sie aus der UI heraus registrieren, die sie zum Plugin selbst hinzufügen. Man könnte sogar so weit gehen, die Ressourcen, die sie geladen hätten, in einem Textfeld zur einfachen Kopie und Einfügung in Ihr eigenes System bereitzustellen.
Ich denke jetzt, dass das ein wenig fehlgeleitet war. Es würde eine große Bewegung in der WordPress-Plugin-Welt erfordern, um dies in Gang zu bringen. Selbst wenn das passieren würde, wäre das viel duplizierte Arbeit, und dieses Problem kann effizienter gelöst werden.
Lösung Nr. 1: Ein Plugin verwenden
Das Plugin MinQueue bietet eine Lösung, die mir gefällt. Es tut nichts automatisch, sondern erlaubt Ihnen zu konfigurieren, welche Ressourcen Sie zusammenfügen möchten und in welcher Reihenfolge.
Mit dem aktiven Plugin sehen Sie in der Admin-Leiste im Frontend einen kleinen Hilfslink, auf den Sie klicken können.
In unserer Demo wissen wir, dass wir das CSS unseres Themes und das WP-Polls CSS zusammenfügen wollen. Also nehme ich diese Namen aus der Hilfe und füge sie in eine neue "Warteschlange" in den Plugin-Einstellungen ein.
Jetzt werden keines dieser CSS-Dateien mehr einzeln geladen. MinQueue erstellt eine kombinierte (und zwischengespeicherte) Version und liefert diese.
<link rel='stylesheet' id='minqueue-117c22aa-ebc80003-css' href='http://example.com/wp-content/uploads/minqueue-cache/minqueue-117c22aa-ebc80003.css' type='text/css' media='all' />Sie können mehrere "Warteschlangen" erstellen, was Ihnen eine gute Kontrolle ermöglicht. Zum Beispiel lädt ein bestimmter Bereich Ihrer Website andere Ressourcen, diese könnten separat kombiniert werden, wenn Sie möchten, es ist nicht erforderlich, sie mit der Hauptgruppe zu kombinieren.
Beachten Sie, dass Sie dafür das Stylesheet Ihres Themes registrieren müssen, aber das ist ziemlich einfach.
Beachten Sie auch, dass das beliebte W3 Total Cache ebenfalls die Zusammenführung übernimmt, aber ich finde es etwas verwirrender. Sie fügen Stylesheets über URLs hinzu, und es scheint etwas grundlegender zu sein und leichter zu brechen.
Lösung Nr. 2: Assets manuell deregistrieren und selbst zusammenfügen
Plugins, die Ressourcen hinzufügen, tun dies über `wp_enqueue_script` und `wp_enqueue_style`. Sie können den Plugin-Code durchsuchen und finden, wo sie dies tun, um zu sehen, welchen Namen sie dabei angewendet haben. Dann deregistrieren Sie diese in der `functions.php`-Datei Ihres eigenen Themes (oder einem benutzerdefinierten Funktionalitäts-Plugin).
Justin Tadlock hat einen Beitrag dazu, den Sie lesen können. Ein einfaches Beispiel für das Deregistrieren eines Stylesheets.
add_action('wp_print_styles', 'my_deregister_styles', 100);
function my_deregister_styles() {
wp_deregister_style('name-of-style');
}Jetzt liegt es an Ihnen, diese Ressource zu finden und sie in das CSS einzufügen, das Sie immer noch auf der Seite laden. Vielleicht verwenden Sie einen CSS-Präprozessor und können ihn importieren. Vielleicht verwenden Sie einen Task-Runner wie Grunt, der ihn zur Liste der zu holenden und zusammenzufügenden Dateien hinzufügen kann. Oder Sie gehen komplett manuell vor und kopieren und fügen den Inhalt einfach in Ihr eigenes Stylesheet ein (beachten Sie jedoch, dass Sie bei dieser Vorgehensweise keine Updates erhalten, wenn das Plugin aktualisiert wird).
Lösung Nr. 3: Ein Plugin zum Deregistrieren von Assets und zum selbständigen Zusammenfügen verwenden
Obwohl ich in der Lage bin, den Code eines Plugins zu durchsuchen, um Instanzen des Registrierens von Ressourcen zu finden, erscheint mir das nicht als eine fantastische Vorgehensweise. Ich würde es lieber programmatisch machen, um es einfacher zu gestalten und menschliche Fehler zu reduzieren.
Während der früheren Diskussionen zu diesem Thema hat Nate Wright von Theme of the Crop ein brandneues Plugin dafür namens Asset Queue Manager entwickelt. Es hat eine Benutzeroberfläche (von der Frontend-Seite), die Sie verwenden können, um Assets einfach zu deregistrieren.
Von der Frontend-Seite der Website aus klicken Sie auf einen Link in der Admin-Leiste, um ein Dropdown mit allen registrierten Assets auf dieser Seite anzuzeigen.
Es gibt eine Schaltfläche zum Deregistrieren dieses Assets. Das Plugin behält dieses Asset deregistriert, bis Sie etwas anderes sagen. Jetzt liegt es wieder an Ihnen, diese Ressource zu finden und sie in Ihre Stylesheets einzufügen, wie Sie möchten. Es gibt eine weitere Schaltfläche, die direkt zur Ressource verlinkt und sie super einfach zu finden macht. Ziemlich cool!
Fazit
Es gibt viele Möglichkeiten, die Kontrolle über das CSS und JavaScript zu erlangen, das WordPress-Plugins laden können. Sie können und sollten dies tun, mit zunehmender Dringlichkeit für jede nicht zusammengefügte Ressource.
Wie viele Ressourcendateien von jedem Typ sind in Ordnung zu laden? Eins, Zwei oder Drei.
Fantastischer Artikel, ich liebe es wirklich, mit CSS zu spielen, und ich nehme auch an einigen Kursen auf YouTube und Udemy teil, aber Ihre Beiträge und Artikel hier auf Css-tricks helfen mir wirklich sehr, meine CSS- und HTML-Kenntnisse zu meistern.
Danke, schreiben Sie weiter und helfen Sie weiter :)
Hallo Chris. Ausgezeichneter Artikel.
Was mich wirklich stört an all diesen "Sie sollten Ihre Website beschleunigen"-Artikeln, und sogar an den offiziellen Ratschlägen von Yslow, Google usw., ist, dass sie niemals die riesige installierte Basis von WordPress berücksichtigen und die Tatsache, dass die meisten von uns einfach nicht tun können, was sie uns sagen, dass wir tun MÜSSEN.
Wir können oft nicht einfach all unsere Plugins nehmen und den Code überarbeiten, um HTTP-Anfragen zu reduzieren; wir können oft nicht einmal verhindern, dass diese Plugins die Hälfte der Dinge tun, die sie tun, es sei denn, wir haben viel mehr Wissen als der durchschnittliche statische Seitendesigner. Doch trotz der riesigen globalen Nutzung von WordPress wird dieses Problem erst seit kurzem angegangen.
Es verwundert mich wirklich, dass es so lange gedauert hat – es bedeutet, dass es riesige Mengen von Websites gibt, die weit langsamer laufen als sie sollten, weil KEINER der Ratschläge und Anleitungen einfach zu befolgen ist. Es stört mich, dass sich nur wenige Leute die Zeit genommen haben, die Bedürfnisse von WordPress-Website-Besitzern zu verstehen.
Also, danke, dass Sie dazu beitragen und diese Plugins einführen. Es ist wirklich hilfreich.
+1 So wahr
Einerseits würde ich mir wünschen, dass PageSpeed Insights den Typ der analysierten Website, z. B. WordPress, berücksichtigt, um seine Vorschläge besser zu machen. Andererseits spielt es keine Rolle, welche Plattform es ist – jeder Vorschlag von PageSpeed sind Faktoren, die die Website verlangsamen und behoben werden sollten.
Einer der Redner auf der letzten WordCamp SF schlug vor, dass WordPress sich stärker auf Frontend-Performance konzentrieren sollte, und ich stimme zu. Out of the box ist WordPress langsam, und es gibt Dutzende von Schritten, die ein Entwickler implementieren könnte, um die Dinge zu beschleunigen. Aber WordPress könnte einige davon selbst im Kern übernehmen, zum Beispiel durch die Bereitstellung integrierter Minifizierungs- und Zusammenführungsoptionen.
Was ich an PageSpeed Insights und Google lustig finde, ist, dass ihre eigenen Produkte (Analytics, Adsense, Google+) die Empfehlungen von PageSpeed nicht befolgen!
Bitte ignorieren Sie meine von Autokorrektur generierten Tippfehler, okay? Ich meinte "einführen" in meiner letzten Zeile, und ich bin zu beschämt, weiter zurückzuschauen. Außerdem bin ich sicher, dass ich den Kommentar in der Vorschau angesehen habe, aber offensichtlich habe ich es nicht getan. Bitte stellen Sie mich nicht für meine Coding-Dienste ein :-)
Netter Artikel. Ich denke, das sind wirklich sinnvolle Ratschläge, besonders für Leute, die eine kleine Anzahl von Websites verwalten, auf die sie sich konzentrieren und viel Zeit für Wartung und Optimierung aufwenden können.
Wenn Sie jedoch eine große Anzahl von Websites verwalten, würde ich Sie vor jeder Situation warnen, in der Sie ein Plugin von Drittanbietern zur Verwaltung anderer Plugins von Drittanbietern verwenden. Bei Updates von Core oder Plugins sind Sie ein wenig weiter oben auf dem Kartenhaus als ich es bevorzugen würde.
Chris, als Sie einen Tweet über dieses Problem gepostet haben, habe ich an einem OOP-Paket gearbeitet, um es zu lösen. Hier eine Erklärung, was es tut und warum.
Anstatt es in PHP zu tun, können Sie es auch auf Apache-Ebene tun, indem Sie mod_pagespeed installieren. Dies wird alle Assets kombinieren und alle Arten von verrückten Dingen tun, die ein performancebewusster Entwickler möchte!
Ich habe nichts als Gutes über mod_pagespeed gehört. Aber ich denke immer noch, dass Sie am besten individuelle zusammengefügte Ressourcen erstellen möchten und es dann machen lassen, was es für das Beste hält.
Zum Beispiel wissen Sie, dass die Homepage benötigt
a.css, b.css, c.css
Aber die Unterseite benötigt
a.css, b.css, c.css, d.css
Der effizienteste Weg, damit umzugehen, ist, a, b und c zusammenzufügen und d nur auf dieser Unterseite zu laden.
Nun, vielleicht. Wenn d klein genug ist, wird es vielleicht in das Hauptpaket aufgenommen. Aber wenn es Dutzende von "d"s gibt, vielleicht nicht. Es sind diese Dinge, die ein Gehirn zum Lösen brauchen.
Was ich versuchen möchte, ist die Aktion `wp_print_scripts` (und/oder `wp_footer`) zu verwenden, manuell durch die globale Variable `$wp_scripts` zu gehen, alle Assets zu erhalten (bereits nach Abhängigkeiten geordnet, damit sie korrekt aufgelöst werden), Skripte natürlich von Stilen zu trennen, einen Hash aller für diese Anfrage benötigten Dateien zu erstellen (basierend auf Dateinamen), dann sie zusammenzufügen/zu minifizieren, falls gewünscht, das Ergebnis zu cachen und das `script`/`link`-Tag zu drucken, das auf diese gecachte Datei verweist. Und natürlich die Dateien aus `$wp_scripts` zu entfernen.
Dies könnte auch "einmalige" oder seitenbezogene Skripte verarbeiten, entweder durch die Erstellung einer komplett neuen kombinierten Datei, in die diese nun einbezogen ist, oder durch das einfache Einbinden einer Datei separat, wenn sie in der ersten gecachten Datei nicht gefunden wurde.
Toller Artikel! Eine weitere Lösung, die ich gesehen habe, ist Rocket Loader von CloudFlare's CDN. Es erfordert ein Pro-Konto, ist also nicht kostenlos, aber es fasst automatisch JS- und CSS-Ressourcen zusammen, wenn es Ihre Website auf dem CDN zwischenspeichert.
Hallo Chris, gute Denkanstöße und ich stimme zu, dass ein pragmatischer Ansatz, um damit umzugehen, jetzt gut ist. Ich frage mich, ob es einen Weg für das WordPress-Core-Team gibt, darüber nachzudenken. Idealerweise möchten wir alle Styles in einer Datei haben UND dass unsere Styles gewinnen, wenn wir das Aussehen eines Plugins anpassen müssen. Wie wäre es also mit einer Methode zum Registrieren von Styles, die sie nicht in den Head einfügt, sondern sie in `style.css` importiert?? Dann hätten wir eine einzelne Datei plus die Macht der Kaskade.
Das würde das Problem, alle Styles immer zu laden, nicht lösen, aber es wäre sicherlich besser als der Status Quo.
Hmmm.
Ich werde Ihre Artikel lieben.
Sicherlich hilft das Zusammenfügen, dies verbessert die YSLOW-Bewertung der Website, was die Website viel schneller lädt.
Ein weiterer toller Artikel! Danke für das Teilen dieses MinQueue-Plugins!
Machen Caching-Plugins wie W3 total cache das nicht schon? Fassen sie nicht alle JS- und CSS-Dateien zusammen und cachen sie? Ich glaube schon...
Ich benutze auch das wp-total cache-Tool. Ich bin relativ neu in der WordPress-Entwicklung und habe mich seit 2011 nicht mehr damit beschäftigt.
Ich war besorgt über die Nutzung, da es eine riesige Ressource ist, aber es ist, was das Unternehmen will und braucht.
Weiß jemand andere Techniken, um WordPress schneller zu machen?
Ich bestätige, dass W3 Total Cache eine Reihe von Möglichkeiten zur Minifizierung und Zusammenführung von Assets bietet. Sie können URLs manuell eingeben – das ist eine schreckliche Art, es zu tun. Wenn Sie jedoch gut genug suchen, gibt es eine HILFE-Schaltfläche, die zu einem Assistenten führt, bei dem Sie einfach auf die gewünschten Dateien klicken können.
Es scheint alle Ihre Theme-Dateien nach JS- oder CSS-Aufrufen zu durchsuchen, sowie nach allem, was registriert wurde. Wenn alles funktioniert, ist es großartig.
Ja, es hat bisher großartig funktioniert.
„Concatenate“ ist ein sehr langes Wort, wenn man seine Bedeutung bedenkt. Und was ist mit dem überflüssigen „ue“ in *enqueue* und *dequeue*?
Guter Artikel! Ich fand W3 Total Cache einfach einzurichten, aber das Zusammenfügen war etwas unintuitiv. Ich habe es geschafft, alle Plugin-CSS- und JS-Dateien damit zusammenzufügen, aber es hat Zeit gedauert, die Einstellungen zu experimentieren.
Toller Artikel. Ich glaube, ich habe gelesen, dass die meisten Browser zu einem bestimmten Zeitpunkt nur 6 HTTP-Anfragen laden können (im Durchschnitt), es sei denn, sie kommen von einem anderen Server. Ich denke also, diese Zahlen wären ein gutes Ziel für die maximale Anzahl von Abhängigkeiten, die pro Seite geladen werden. Richtig/Falsch?
Shoutout an Better WordPress Minify.
https://wordpress.org/plugins/bwp-minify/
Es minifiziert nicht nur CSS/JS. Sie können angeben, wo es minifiziert (Header/Footer) auf Dateiebene.
Sie können auch Dateien deregistrieren (die von Plugins geladen werden). Also macht es wahrscheinlich alles, was im Artikel erwähnt wird.
Definitiv einen Blick wert
Ich stimme Johnny zu. Better WordPress Minify ist einen Blick wert und macht meiner Meinung nach eine bessere Arbeit als W3 Cache.
Vor allem, da W3 Cache manchmal fehlerhaft ist, wenn es um die JS-Minifizierungsfunktion geht, die sich aus unbekannten Gründen ausschaltet und/oder Sie sie nicht einmal eingeschaltet lassen können. Ich habe eine Website, die ich kürzlich fertiggestellt habe, bei der dies immer noch ein Problem ist, und es hat zu größeren Problemen geführt.
Erst neulich dachte ich darüber nach, als ich eine WordPress-Site mit Yslow testete, wie ich sie so weit wie möglich optimieren kann, weil sie 22 externe Skripte und 12 Stylesheets lud. Ich erhielt eine Punktzahl von 66, nicht schlecht für eine bildintensive Website, aber trotzdem... ich habe die CDN-Lösung in Betracht gezogen, aber ich werde mir auch das Plugin ansehen, danke für den Artikel.
Das ist ein Problem, das ich lange Zeit hatte und bis jetzt habe ich alles manuell gemacht. Danke für den Asset Queue Manager. Fantastisch!