Unsere Freunde von WP Engine haben kürzlich eine wunderschöne neue Homepage herausgebracht, die mit Beaver Builder erstellt wurde. Wir haben einen Link zu der Seite in der Facebook-Gruppe von Beaver Builders geteilt und einige Leute haben festgestellt, dass die Gesamtladezeit der Seite recht hoch war. Unser guter Freund und außergewöhnlicher WordPress-Entwickler Jon Brown kam mit einer großartigen Erklärung zur Rettung.

Das Facebook-Gespräch

Lassen Sie mich das Gespräch hier ganz kurz umschreiben:

Besorgter Beaver Builder: Ich habe einen Seitenladetest mit dem XYZ-Testtool durchgeführt und das Laden dauerte fast 10 Sekunden!

Jon: Geschwindigkeit und Leistung sind eine Designentscheidung und entscheidend für die Verkaufsumsätze, aber das bedeutet nicht, dass es keinen Kompromiss mit anderen, wertvolleren Tools gibt.

Ich sehe oft Leute, die sich die Buchstabennoten und die Gesamtladezeit ansehen, ohne den Wasserfall zu verstehen. Das wird Sie in die Irre führen, es sei denn, Sie sehen sich sehr einfache Websites an ...

Diese Testwerkzeugbewertungen sind wirklich grob und ignorieren viele praktische Realitäten. Sie werden sagen, dass Weiterleitungen vermieden werden sollen, wenn es sich dabei um Anzeigen, Tracking-Skripte und andere Dinge handelt, die zwangsläufig auf diese Weise funktionieren. Sie ignorieren häufig HTTP/2 und empfehlen, Anfragen zu reduzieren und Assets zu verketten, die keine Rolle spielen und sogar schaden könnten … Sie konzentrieren sich nicht auf Geschwindigkeitsindex und Rendering über dem Falz …

Der tatsächliche Seitenladevorgang beträgt <1,5 Sekunden

Lassen Sie uns tiefer graben

Ich fragte Jon, ob er noch ein paar Fragen zum Thema Leistung hätte, und er stimmte sehr freundlich zu. Das sind meine (Robbys) Fragen mit Jons Antworten.

Oh, habe ich schon erwähnt, dass Jon einen benutzerdefinierten Entwicklungsshop namens 9seeds betreibt, also kann er gemietet werden, um Ihnen bei der Feinabstimmung der Leistung Ihrer WordPress-Website zu helfen!

1. Sie haben den „Wasserfall“ erwähnt. Können Sie etwas genauer erklären, was der Wasserfall ist?

Es gibt viele Tools zur Bewertung der Website-Leistung. Viele von ihnen enthalten einen Bericht, der eine leicht verständliche Buchstabennote enthält. Diese Buchstabennoten sind jedoch ziemlich langweilige Werkzeuge, und obwohl es schön ist, wenn man alles bekommt, ist es nicht besonders aufschlussreich, geschweige denn hilfreich, wenn man nicht das klare As sieht. Die einzige Buchstabenqualität, die ich hilfreich finde, ist die Bildkomprimierung, die sich leicht beheben lässt. Lassen Sie Ihre Bilder durch einen Optimierer laufen.

Zu oft sehe ich, dass Laien und unerfahrene Entwickler von den Buchstaben geblendet werden. Es gibt viele Faktoren, die die Leistung des Frontend-Webs beeinflussen, und man muss sich wirklich den „Wasserfall“ ansehen, bei dem es sich nur um ein Diagramm handelt, das alle HTTP-Anfragen zeigt, wann sie gestartet und wann sie abgeschlossen wurden. Ich verwende WebPageTest.org, um diese zu generieren.

Im „Wasserfall“ „sehen“ Sie, welches bestimmte Asset zu lange zum Laden braucht und/oder das Laden anderer Dinge blockiert.

Bedenken Sie abschließend, dass eine direkte Einstufung möglicherweise Designentscheidungen (z. B. das Entfernen von Schiebereglern) und die Eliminierung von Assets von Drittanbietern (wie Google Analytics, HotJar usw.) erfordert, die für den Websitebesitzer wertvoller sind als eine Eins. Nicht jede Website kann entsprechend angepasst werden Werde gerade wie ohne schmerzhafte Opfer.

2. Sie haben WebPageTest als Testtool Ihrer Wahl empfohlen. Warum bevorzugen Sie es und wie unterscheidet es sich von Tools wie Pingdom, GTmetrix (und/oder Google Page Speed?)?

Persönlich habe ich noch nie etwas Besseres und Flexibleres gefunden als WebPageTest.org. Allerdings habe ich in der Vergangenheit auch GTMetrix, Pingdom, Google Page Speed ​​und andere verwendet und sie sind völlig in Ordnung. Einige der neuen wie Lighthouse sind wirklich cool für progressive Web-Apps (nicht 99 % der WordPress-Sites). Ich fordere die Leute jedoch auf keinen Fall dazu auf, das Werkzeug zu wechseln, sondern das Werkzeug zu verwenden, das Sie kennen und verstehen. Wenn Sie kein Tool kennen, können Sie mit WPT kostenlos lernen. Gehen Sie einfach über die Buchstabennoten hinaus und beginnen Sie zu verstehen, was diese Buchstabennoten verursacht.

3. Was die „Reduzierung von Anfragen und die Verkettung von Assets“ betrifft: Ist dies nicht länger eine bewährte Vorgehensweise? Warum?

Damals, als die meisten Websites HTTP und nicht HTTPS waren und alle Webserver das HTTP/1.1-Protokoll verwendeten, konnten Webserver nur eine begrenzte Anzahl von Assets parallel senden. Jedes Asset (Bild, Skript, Stylesheet) wurde separat gesendet und jedes hatte seinen eigenen Overhead, der die Arbeit verlangsamte. Die Verkettung aller möglichen Elemente reduzierte die Anzahl der HTTP-Anfragen und hatte enorme Leistungsvorteile.

In den letzten Jahren gab es überall einen großen Aufschwung in Richtung HTTPS, und Webserver haben begonnen, das neue HTTP/2-Protokoll zu unterstützen. HTTP/2 bietet enorme Vorteile wie Pre-Fetch und Pre-Load, kann aber auch alle diese kleinen Assets parallel senden, sodass sie nicht verkettet werden müssen. Tatsächlich kann es besser sein, dies nicht zu tun, sodass jedes kleine Asset unabhängig zwischengespeichert werden kann.

Es ist wichtig zu bedenken, dass dies nur dann ins Spiel kommt, wenn Ihr Webserver HTTP/2 unterstützt und dass dies nur möglich ist, wenn Ihre Website HTTPS ist.

Allerdings sind alle Websites, an denen wir heutzutage arbeiten, HTTPS und laufen auf HTTP/2-fähigen Servern. Ich bin also an dem Punkt angelangt, an dem ich nicht einmal mehr daran denke, Assets zu verketten, und ich vermisse es ganz bestimmt nicht!

4. Gibt es weitere „Mythen“ oder veraltete Leistungsempfehlungen, von denen Sie abraten würden?

Das Größte ist einfach, dass jede Website ohne schmerzhafte Zugeständnisse wie Designänderungen oder die Eliminierung von Drittanbieter-Assets, die Sie nicht kontrollieren, direkt As werden kann. Das ist jedoch wirklich in Ordnung, denn Sie sollten sich mit etwas namens Geschwindigkeitsindex befassen! WPT hat dazu einen guten Artikel geschrieben, aber im Grunde geht es darum, wann „above thefold“ vom Benutzer als vollständig geladen wahrgenommen wird. Es geht um die Geschwindigkeit des Benutzererlebnisses und nicht darum, dass die Seite wirklich vollständig ist. Das war eines der Dinge am neuen Titelseitendesign von WP Engine: Der Geschwindigkeitsindex war großartig. Es waren die verzögerten Skripte, deren Laden und Abschließen lange dauerte.

5. Haben Sie weitere Performance-Tools, Tipps oder Tricks, die Sie jemandem empfehlen würden?

Tools, auf die ich mich im Laufe der Jahre verlassen habe:

• WebPageTest.org – Mein Favorit!
• ImageOptim – Desktop-App zum Komprimieren von JPGs/PNGs
• ImageAlpha – Desktop-App zum Komprimieren von PNGs (hauptsächlich durch Reduzierung der Anzahl der Farben)
• CloudFlare – kostenlos als riesiges globales CDN und Basis-WAF. Plus beeindruckende kostenpflichtige Pro-Funktionen wie Bildoptimierung im Handumdrehen, Routenoptimierung und mehr.

Plugins:

• WP Rocket – Selbst auf der WP Engine verwenden wir WP Rocket, es funktioniert einfach.
• Imagify.io – WordPress/Cloud-basierte Bildoptimierung.
• BeaverBuilder – Ich wurde nicht dafür bezahlt, das zu sagen! Wir werden gebeten, auf vielen Websites Leistungsprüfungen durchzuführen, und sehen häufig große Frontend- und Backend-Probleme bei anderen beliebten Seitenerstellern, die ich nicht namentlich nennen möchte, aber nicht beim Beaver Builder, weshalb wir ihn auf unserer eigenen Website verwenden Also!

Nochmals vielen Dank, Jon, dass Sie sich die Zeit genommen haben, uns durch einen moderneren Leistungsansatz zu führen. Ich wollte Jons Agentur 9seeds einen letzten Plug geben. Wenn Sie Hilfe bei irgendeiner Art von benutzerdefinierter WordPress-Entwicklung suchen, rufen Sie sie an!

Über Jon Brown

Wanderer. WordPress-Entwickler. Fotograf. Leber des Lebens.