Bestehen Sie jeden CWV- und PageSpeed ​​Insights-Test mit diesen WordPress-Entwicklungstechniken

Im Jahr 2021 haben wir uns bei StrategiQ, einer Full-Stack-Digitalagentur mit Sitz in Großbritannien, zum Ziel gesetzt, mit der Entwicklung jeder einzelnen Website, die wir entwickeln und starten, zu beginnen, um die Leistung von Googles Core Web Vitals (CWV) und PageSpeed ​​Insights (PSI) zu bestehen Prüfbericht.

Core Web Vitals zeigen auf vielfältige Weise, wie Ihre Website abschneidet. Dazu gehören die Ladegeschwindigkeit des ersten Inhalts auf einer Seite (First and Largest Contentful Paint), die Geschwindigkeit, wie lange ein Benutzer warten muss, bevor er damit interagieren kann (Time to Interactive) und Layoutverschiebungen (Cumulative Layout Shift). .

Das Testen Ihres CWV ist kinderleicht – gehen Sie einfach zu https://pagespeed.web.dev/ und geben Sie Ihre Adresse ein. Der obere Bereich zeigt die neuesten realen Daten der letzten 28 Tage, während der untere Bereich (eine Punktzahl von 100, sowohl für Mobilgeräte als auch für Desktops) aus im Labor generierten Daten besteht.

Warum ist das wichtig? Nun, weil Google es sagt.

Im Juli 2018 gab Google bekannt, dass Geschwindigkeit ein Faktor dafür ist, wie eine Website in den Suchergebnissen angezeigt wird, insbesondere auf Mobilgeräten. Quelle.

Im Jahr 2020 gaben sie außerdem bekannt, dass die Metriken zur Benutzererfahrung (die die Core Web Vitals / CVW bilden) jetzt für das Ranking von Websites verwendet werden. Quelle.

Es ist ganz einfach: Je schneller und leistungsfähiger eine Website ist, desto besser wird sie wahrscheinlich ranken.

Also entschied das Entwicklungsteam von StrategiQ, dass wir an der Reihe waren, der SEO-Abteilung auszuhelfen. Die SEO-Experten können ihre kleinen Hintern so hart wie möglich abarbeiten, aber eine Website, die eine schreckliche Leistung erbringt, kann viel mehr schaden als nützen. Eine Website, die CWV und PSI besteht, wird jedoch sicherstellen, dass ihre hervorragende Arbeit ein brillantes Sprungbrett hat.

Bemerkenswert ist, dass CWV und PSI notorisch schwer zu bestehen sind. Die überwiegende Mehrheit der Websites tut dies nicht, selbst viele der bekanntesten Websites der Welt . Denken Sie an YouTube, BBC und sogar WP Engine selbst, die Schwierigkeiten haben, sowohl auf dem Handy als auch auf dem Desktop einen Pass zu bekommen ( sorry Leute ).

Was haben wir also getan, um sicherzustellen, dass wir diese entzückenden Green Pass Donuts der Freude sehen?

Wir haben alles zurückgenommen und nach einem einfachen Mantra gearbeitet:

Laden Sie so wenig wie möglich, so schnell wie möglich.

Ich werde zwar nicht auf die kleinsten Einzelheiten eingehen, aber ich werde unsere wichtigsten Methoden durchgehen, um unsere maßgeschneiderten WordPress-Themes so rationalisiert wie möglich zu halten.

Lassen Sie uns zunächst über Hardware sprechen. Wir können nicht fortfahren, ohne zuerst über WP Engine zu sprechen. Ohne Zweifel sind sie einer der besten WordPress-spezifischen Hosting-Anbieter da draußen. Wir waren begeistert von dem beeindruckenden Support, der Betriebszeit, den Umgebungen für jede Installation, den Backups und der einfachen Verwaltung von SSL-Zertifikaten und Domains neben vielen anderen Funktionen. Darüber hinaus stellen ihre Caching- und hartnäckige Geschwindigkeitsoptimierung sicher, dass die Website auf Serverebene so schnell wie möglich funktioniert.

Mit einem leistungsstarken Server im Kern wissen wir, dass es jetzt an uns liegt, eine Website so schnell wie möglich zum Laufen zu bringen.

Wie die meisten Agenturen haben wir unsere eigene handgefertigte Basisvorlage, die wir als Ausgangspunkt für alle unsere maßgeschneiderten Websites verwenden. Jede Website, die wir erstellen, wird intern entworfen und codiert – kein vorgefertigtes Thema in Sicht.

Unsere Basisvorlage hat unsere Geschwindigkeitsoptimierungsmethoden fest eingebaut, sowie eine Reihe von cleveren Funktionen und wiederverwendbaren Komponenten, die wir für jedes Projekt benötigen. Dieser Ausgangspunkt spart uns auf lange Sicht Zeit und stellt sicher, dass jede Website mit wenig Aufwand für den Entwickler die bestmögliche Leistung erbringt.

Ich weiß, was Sie denken – kommen Sie zu den guten Sachen!

Ich werde mich nicht die Mühe machen, die üblichen langweiligen Dinge aufzulisten, die Sie in jedem Blog-Beitrag sehen, wie z. B. „lazy load images“. Aber wenn nicht, ist das in der Tat ein Muss – wir haben eine Bildfunktion, die unsere Bilder faul geladen mit srcset- und Größen-Tags ausdruckt (bekannt als responsive Bilder).

Lassen Sie uns direkt darauf eingehen.

Methode 1: Chunk & Enqueue

Es passiert oft: Ein Projekt hat nur eine CSS-Datei und eine JS-Datei, und sie blähen sich am Ende auf die Größe eines kleinen Planeten auf. Was nun? Google fragt Sie: „Warum laden Sie Stile und Javascript wird auf dieser Seite nicht verwendet?“. Wieso den? Wieso den?!

Es ist ein gültiger Punkt. Warum sollten Sie Unmengen von CSS und Javascript für eine ganze Website laden, wenn Sie nur einen Bruchteil davon pro Seite benötigen?

Alle unsere Seiten sind vollständig mit Gutenberg-Blöcken aufgebaut. Das bedeutet, dass Sie für jeden Block die brillante Leistung nutzen können, Ihre CSS- und JS-Dateien in die Warteschlange einzureihen.

Für jeden Block erstellen wir eine separate CSS- und JS-Datei nur für diese Datei (falls erforderlich). Diese werden dann verkleinert (weitere Informationen finden Sie im nächsten Punkt) und Block für Block in die Warteschlange eingereiht.

Das Ergebnis? Wir laden nur das, was tatsächlich auf jeder Seite vorhanden ist.

Methode 2: Verwenden Sie einen Task-Runner wie Gulp, um Ihre Assets zu kombinieren und zu minimieren

Alle generierten Assets werden durch eine Gulp-Funktion minimiert (andere sind verfügbar, z. B. Grunt). Es ist erwähnenswert, dass Google vor vielen Monden die Verkettung der Minimierung vorgezogen hätte (eine große Anfrage wäre 5 kleinen Anfragen vorgezogen worden), aber seit dem Aufkommen von HTTP/2 (das mehrere Anfragen gleichzeitig multiplext) ist dies nicht mehr der Fall Ausgabe.

Auch hier tun wir dies, um die Dateien so klein wie möglich zu halten. Jetzt laden wir also nicht nur Assets, die sich auf der Seite befinden, sie sind auch winzig klein.

Methode 3: Beenden Sie das Rendern blockierender Assets

Wir stellen sicher, dass sich alle diese eingereihten Assets unten auf der Seite befinden und daher keine Blockierung darstellen.

Wir entfernen sogar die jQuery, die mit WordPress geliefert wird, und fügen eine neue Version (eine, die keine Sicherheitslücken aufweist) ebenfalls unten auf der Seite ein.

Aber was ist mit einem FOUC (Flash of Unstyled Content), höre ich Sie sagen?

Methode 4: „above the fold“-CSS

Ein Flash of Unstyled Content tritt auf, wenn eine Seite zunächst ohne Styles geladen wird, da sich das Stylesheet unten auf der Seite befindet. Sobald das Stylesheet geladen ist, werden die Stile angewendet, die Seite blinkt und sieht endlich richtig aus.

Um dies zu beheben, teilen wir die Stile oberhalb der Faltung auf und fügen sie als Inline-<style>-Tag im Kopf hinzu. Es ist kein Render-Blocking-Asset und wir erhalten kein FOUC.

Methode 5: WP-Rakete

Das letzte Puzzleteil ist das klassenbeste Performance-Plugin WP Rocket. Es wurde in Zusammenarbeit mit WP Engine-Ingenieuren entwickelt und ist das einzige Caching-Plugin, das auf ihrer Hosting-Plattform erlaubt ist.

Die Ergebnisse?

Nun, die Ergebnisse sprechen für sich.

SportsAidEastern ist eine Wohltätigkeitsorganisation, die britische Sportler unterstützt. Laut PSI erreicht die Website, die wir für sie entwickelt haben, satte 97/100 auf Mobilgeräten und 100/100 auf Desktops.

Calligo bietet transformative Datendienste an, und ihre Site-Scores sind sogar besser als SportsAid; mit nahezu perfekten 99/100 auf dem Handy und 100/100 auf dem Desktop.

Fazit

Hoffentlich war dies ein Hauch frischer Luft von all den anderen identischen Posts zum Thema „So beschleunigen Sie Ihre WordPress“-Site, und wenn Sie Schwierigkeiten haben, einen Pass zu bekommen, haben wir es vielleicht hervorgehoben etwas, das Sie ausprobieren können.

StrategiQ ist die strategieorientierte Marketingagentur. Durch die Aufdeckung wertvoller Markteinblicke, die Aufdeckung von Wettbewerbschancen, die Definition und Bereitstellung effektiver Marketingstrategien hilft unser Team ambitionierten Marken, ihre Ziele durch Beratung, Kreativität, Marketing und Technologie zu übertreffen.
Ob Sie Strategie, Beratung, Ressourcen oder Fachwissen benötigen, machen Sie den ersten Schritt. Erzählen Sie uns von sich und wir werden sehen, wie wir Ihnen helfen können.