Entmystifizierung von Core Web Vitals für WordPress

Core Web Vitals stellt jetzt eine Reihe obligatorischer Metriken zur Optimierung Ihrer Website dar, insbesondere wenn SEO und Website-Performance für Ihre digitale Strategie wichtig sind. Trotzdem kann es schwierig sein, herauszufinden, welche WordPress-Tools und -Strategien am wichtigsten sind, wenn Sie versuchen, die Core Web Vitals auf Ihrer Website zu verbessern.

Sehen Sie sich diese Sitzung an, um einen detaillierten Einblick in die Best Practices und Tools zum Verstehen und Verbessern Ihrer Core Web Vitals-Ergebnisse auf Ihrer WordPress-Site zu erhalten.

Lautsprecher:

• Alex Zuniga, Produktmanager bei WP Engine
• Mark Davoli, Direktor, Webentwicklung bei Amsive Digital
• Matt Chase, Entwicklungsleiter bei Vital Design
• Sanjucta Ghose, Senior Web Developer bei WP Engine
• Mike Crantea, Direktor für Frontend-Engineering bei XWP

Transkript:

ALEX ZUNIGA: Hallo und willkommen bei Demystifying Core Web Vitals für WordPress. Ich bin Alex Zuniga, Produktmanager hier bei WP Engine. Und heute werden wir wirklich die Vor- und Nachteile der wichtigsten Web-Vitals für Ihre WordPress-Website besprechen. Core Web Vitals ist eine obligatorische Metrik zur Optimierung, wenn Sie Ihre Website für SEO und Website-Performance optimieren möchten. Aber es kann schwierig sein zu wissen, welche WordPress-Tools und -Strategien am wirkungsvollsten sind. Nehmen Sie also an dieser Sitzung teil, um einen detaillierten Einblick zu erhalten, wie Best Practices und Tools Ihnen helfen können, Ihre Web Vital Scores für WordPress zu verbessern.

Nun stellen wir ohne weiteres Umschweife unsere Diskussionsteilnehmer für diese Sitzung vor. Und zuerst übergebe ich es an Mike, um sich kurz vorzustellen.

MIKE CRANTEA: Hallo, ich bin Mike Crantea. Ich befinde mich auf den Kanarischen Inseln in Spanien. Ich bin der Director of Frontend Engineering bei XWP, wo ich in den letzten 17 Jahren tätig war. Ich liebe Web-Performance, hauptsächlich im Bereich der Frontend-Technologie. Und ich bin froh, hier zu sein. Hey.

ALEX ZUNIGA: Danke, Mike. Als nächstes haben wir Matt Chase.

MATT CHASE: Ich bin Entwicklungsleiter bei Vital Design in Portsmouth, New Hampshire. Schwerer Frontend-Fokus bei meiner Arbeit. Also machen wir viele Lighthouse- und Core Web Vital-Scores.

ALEX ZUNIGA: Großartig. Danke Matt. Und Markus.

MARK DAVOLI: Hallo, ich bin Mark Davoli, der Direktor für Webentwicklung bei Amsive Digital. Wir haben uns für unser Team auf den Bereich Core Web Vital spezialisiert, da SEO für unser Unternehmen sehr wichtig ist. Und deshalb auch Core Web Vitals. Froh hier zu sein.

ALEX ZUNIGA: Schön, dich zu haben, Mann. Und nicht zuletzt Sanjucta.

SANJUCTA GHOSE: Hallo. Ich bin auch von WP Engine. Ich bin Teil des Teams, das für die Pflege der Websites von WP Engine verantwortlich ist. Und dazu gehören auch die Seiten, die mit Delicious Brains herübergekommen sind, als WP Engine sie erworben hat. Und ich verbrachte einen guten Teil des letzten Jahres damit, die Delicious Brain-Sites für Core Web Vitals zu optimieren. Also ich denke, das sollte ein sehr interessantes Gespräch werden. Froh hier zu sein.

ALEX ZUNIGA: Danke. Danke schön. Willkommen an alle unsere Diskussionsteilnehmer. Und wir können es kaum erwarten zu hören, was Sie zu sagen haben. Wir werden diese Fragen also nach Messung, Management, Tools und Kundenerwartungen in Bezug auf Core Web Vitals aufschlüsseln. Unsere erste Frage, die wir Ihnen allen stellen möchten, warum sollte ich mich überhaupt für Core Web Vitals interessieren? Und inwieweit sollte ich mich auf die Optimierung von Core Web Vital konzentrieren?

MARK DAVOLI: Ich kann darüber sprechen, wenn Sie möchten. Für mich ist es wirklich wichtig sicherzustellen, dass Sie eine schnelle Seitengeschwindigkeit haben. Und der Grund, der wichtig ist, liegt in den Endergebnis-Conversions. Rechts? Wenn also jemand auf eine Website kommt, dauert es länger, bis sie geladen ist, desto wahrscheinlicher ist es, dass er abspringt. Und wenn Sie keine schnelle Seitengeschwindigkeit haben, dann werden Sie Pech haben und möglicherweise viel Geschäft verlieren. Besonders in einem E-Commerce-Shop.

SANJUCTA GHOSE: Also ja. Ich stimme dem zu, was Sie gesagt haben, denn obwohl es für SEO sehr wichtig ist, müssen wir uns auch daran erinnern, dass Core Web Vitals ein Maß für die wahrgenommene Leistung Ihrer Website sind. Wie der Benutzer Ihre Website wahrnimmt. Und ich denke, das ist sehr wichtig, um die Aufmerksamkeit darauf zu lenken, dass der Benutzer Ihre Website als reaktionsschnell, interaktiv und stabil wahrnimmt. Das sind die Dinge, die Core Web Vitals misst. Daher denke ich, dass es noch wichtiger ist als SEO-Ergebnisse, dass die Wahrnehmung Ihrer Leistung durch die Benutzer wichtig ist. Und deshalb sollten wir uns auf Core Web Vitals konzentrieren.

ALEX ZUNIGA: Absolut. Matt, du hattest –

MATT CHASE: Ja, das wollte ich eigentlich sagen, ja, der SEO-Aspekt ist großartig. Aber letztendlich codieren wir diese Seiten für Menschen. Und wir möchten, dass diese Leute die schnellstmögliche und bissigste Website haben. Aber das betrifft beide Welten. Rechts? Also kommen wir zu einer Art – wenn wir uns auf diese Core Web Vitals einstellen, machen wir großartige UX. Aber auf eine Weise, die die SEO-Teams zufriedenstellt, was manchmal nicht immer einfach zu gewinnen ist. Es funktioniert also für alle.

ALEX ZUNIGA: Nach all dem wissen wir, dass es wichtig ist. Aber wie können wir unsere Punktzahl am besten messen?

MARK DAVOLI: Eine der Methoden, mit denen wir messen, ist neben der Verwendung von – nun, das Page Speed ​​Insight Tool von Google, das von entscheidender Bedeutung ist, da dies das Tool ist, mit dem sie es messen. Richtig, wenn Sie also etwas bewirken wollen, ist die Verwendung dieses Tools von entscheidender Bedeutung. Es gibt auch Ihren Leuchtturm im Browser direkt in den Chrome DevTools, was sehr wichtig ist. Und die Search Console verfügt über ein großartiges Tool zur Benutzererfahrung von Seiten zur Überwachung echter Benutzermetriken in den letzten 28 Tagen, was für eine Langzeitüberwachung von entscheidender Bedeutung ist.

SANJUCTA GHOSE: Ja. Ich würde also sagen, dass Page Speed ​​Insights ein sehr gutes Tool ist, da es Ihnen beide Echtzeitdaten in dem Sinne liefert, dass die Core Web Vitals selbst auf echten Benutzerdaten der letzten 28 Tage basieren. Aber dann können Sie auch Ihren Lighthouse-Bericht sehen, der auf Labordaten basiert. Und das können Sie tatsächlich sofort verbessern, denn es dauert einige Zeit, bis Sie tatsächlich Verbesserungen in Core Web Vitals sehen können, da es über einen Zeitraum gemessen wird.

Wenn Sie also versuchen, Ihre Punktzahl zu verbessern, ist Lighthouse meiner Meinung nach ein großartiges Tool, da es Ihnen sagt, welche Verbesserungsmöglichkeiten Sie haben. Sie können also sofort versuchen, diese Möglichkeiten umzusetzen und sehen, wie sich Ihre Punktzahl verbessert.

ALEX ZUNIGA: Großartig. Klingt nach großen Rufen für Lighthouse dort. Exzellent. Exzellent.

MIKE CRANTEA: Ich möchte zu diesem Thema hinzufügen, dass es besser ist, die Leistungsdaten echter Benutzermetriken zu verfolgen, um schneller auf Leistungseinbußen reagieren zu können, die die Produktion erreicht haben. Die Labortests helfen beim Staging. Sagen wir mal, es gibt eine Degradation, die wir nicht propagieren wollen. Aber es wird immer etwas in der Produktion passieren, das Sie überraschen könnte. Und anstatt mehrere Wochen darauf zu warten, dass die Search Console und die tatsächlichen Benutzermetriken in der Crux-Datenbank angezeigt werden, können Sie durch das eigene Tracking mit einer Web Vitals-Bibliothek der Zeit voraus sein.

ALEX ZUNIGA: Großartig. Ja. Ich muss diesen Produktionsüberraschungen, die manchmal auftauchen, immer einen Schritt voraus sein. In Ordnung. Nun, danke für die Beantwortung der Fragen zur Messung. Wenn Sie sich nun die Verwaltung ansehen, was sind ein oder zwei Dinge, die Sie tun können, die die größten Auswirkungen auf Core Web Vitals haben?

MATT CHASE: Ich schätze, eine Sache, die mir auffällt, ist Lazy Load, wie alles, was man nur kann. Und verschieben Sie das Laden von allem, was Sie können. Das ist für mich eine Art schlüsselfertige Lösung, die man einfach machen kann und eine sofortige Verbesserung sieht. WP Rocket hat eine Reihe von wirklich sehr einfachen Kontrollkästchen, die Sie aktivieren können, um so etwas zu aktivieren.

MARK DAVOLI: Ja. Und für mich liegt der Hauptfokus auf dem, was wir „above the fold render“ nennen. Stellen Sie also sicher, dass das so schnell wie möglich gerendert wird. Und wie bereits erwähnt, verzögern und faul laden Sie alles andere, was außerhalb des Bildschirms liegt, um sicherzustellen, dass Sie die bestmögliche Punktzahl erzielen. Abgesehen davon ist WP Rocket hervorragend für seine Verzögerungsskriptfunktion geeignet. Aber wir neigen dazu – so wie ich versuche, das auf GTM oder Google-Werbeskripte oder ähnliches zu beschränken. Und konzentrieren Sie sich wirklich darauf, die eigentliche Kernarchitektur des Themas zu verbessern, das die Website antreibt, um sicherzustellen, dass es so optimiert wie möglich ist. Sie verlassen sich also nicht auf ein Plugin eines Drittanbieters, um diese Art von Leistungseinfluss zu erzielen.

MATT CHASE: Oh, absolut. Ja. Beide Enden.

ALEX ZUNIGA: Erwischt. Erwischt. Und nur um das klarzustellen, Sie sagten WP Rocket. Und das ist die Verzögerungsskriptfunktion?

MARK DAVOLI: Ja.

ALEX ZUNIGA: Großartig.

MIKE CRANTEA: Eine Sache, die nicht genug im Rampenlicht steht, ist das Caching. Eine schnelle Serverantwortzeit garantiert jedoch kein schnelles Erlebnis. Aber wenn Ihr Server langsam antwortet, garantieren Sie eine langsame Erfahrung. Daher ist es ein guter erster Schritt, alle verfügbaren Caching-Ebenen zu nutzen – Browser-Caching, Objekt-Caching, Seiten-Caching – und sie aktiviert und funktionsfähig zu haben. Machen Sie Ihre Grundlagen. Und dann können Sie sich bis zu den Frontend-Optimierungen hocharbeiten. Prüfen, was in Ihrem Kopf vorgeht. Und so weiter und so fort.

ALEX ZUNIGA: Ausgezeichnet

SANJUCTA GHOSE: Ja. Und ich denke, wir sollten auch nicht vergessen, unsere Bilder zu optimieren. Ich denke, es ist sehr wichtig, weil viele Websites heutzutage dazu neigen, bildlastig zu sein. Daher denke ich, dass es wichtig ist, dass Sie Ihre Bilder komprimieren, sie über ein CDN bereitstellen und dann, wie Sie bereits erwähnt haben, Ihre Bilder faul laden. Noch wichtiger ist, responsive Bilder bereitzustellen. So können Sie das source set-Attribut des Bild-Tags oder das Bild-Tag verwenden, um responsive Bilder bereitzustellen. Ich habe gesehen, dass dies wirklich zu einer Menge Verbesserungen führt, da Core Web Vitals erste mobile Messungen sind. Daher ist es sehr wichtig, dass Sie ansprechende Bilder bereitstellen. Es ist etwas, das wir manchmal irgendwie vergessen.

Also Bilder denke ich. Und auch einige sehr einfache Dinge wie das Minimieren Ihres JavaScripts in Ihrem CSS während Ihrer Build-Schritte. Ich denke das hilft auch sehr. Es ist ganz einfach zu tun.

Matt Chase: Ja. Zu diesem Thema vertreibt WordPress eigentlich, da Sie das ansprechen, eine Art gepacktes Webpack-Build-System. Sie nennen es einfach bei WordPress Scripts. Und unsere Agentur hat lange mit dem Versuch gekämpft, unser eigenes Webpack-System zu pflegen. Und dann würde sich etwa alle acht Monate eine Knotenabhängigkeit ändern und unsere gesamte Toolchain zerstören. Aber WordPress behält dies irgendwie für uns bei. Und es war ein großer Vorteil.

Und das Webpack darin haben wir begonnen, dynamische Importe zu verwenden, um unser Haupt-JavaScript-Bundle zu erstellen. Wir importieren also unsere Knotenabhängigkeiten zur Laufzeit, anstatt alles in einem Haupt-JavaScript-Paket zu bündeln, was uns eine wirklich fein abgestimmte Kontrolle über dieselbe Art des verzögerten Ladens von Skripts ermöglicht hat. Nur in bestimmten Fällen. Wie wenn unser Block auf der Seite ist.

MARK DAVOLI: Ja. Außerdem finde ich es sehr wichtig sicherzustellen, dass Sie bei den Plugins, die Sie auf Ihrer Website verwenden, sehr wählerisch sind. Sie können eine Menge unerwarteter Bloatware erhalten, wenn Sie Plugins von Drittanbietern installieren. Versuchen Sie also, sie auf sehr seriöse, gut gebaute Plugins zu beschränken. Und achten Sie darauf, was diese Plugins laden. Es kann wirklich helfen, die Leistung der Website zu kontrollieren. Und leider verlässt sich WordPress immer noch stark auf jQuery für die Backend-Nutzung und so weiter. Aber es ist nicht wirklich notwendig für das Frontend. Wenn es also möglich ist, die jQuery-Unterstützung vom Frontend der Website zu streichen und bei nativem JavaScript zu bleiben, kann die Leistung wirklich verbessert werden.

ALEX ZUNIGA: Großartig. Ich denke, wir tauchen bereits in diesen Bereich ein. Und du hast ein paar erwähnt. Aber lassen Sie uns mit den Werkzeugen ein wenig mehr darauf eingehen. Was sind einige der bevorzugten Tools, die Sie gerne für die Core Web Vital-Optimierung verwenden? Und für welche Anwendungsfälle eignen sie sich am besten? Oder gibt es einige Szenarien, in denen sie nicht gut passen?

MATT CHASE: Ich meine, es kam schon einmal vor. Aber eigentlich ist das Lighthouse-In-Browser-Tool etwas für mich, weil es sofortige Ergebnisse liefert. Rechts. Die Core Web Vitals sind großartig, aber ihre Stärke liegt in der Tatsache, dass es sich um ein Aggregat handelt, das im Laufe der Zeit zusammengestellt wurde. Sie können also nicht wirklich etwas ändern und sehen, wie sich die Nummer ändert. Im Vergleich zu Lighthouse nehmen Sie im Browser ein Update vor. Sie sehen Ihre lokale Entwicklungsumgebung und führen einen Lighthouse-Test durch. Und kann sofort sehen, oh, meine Leistung ist um 15 Punkte gestiegen. Cool. Das war das Richtige. Schieben Sie das in die Produktion.

ALEX ZUNIGA: Großartig. Irgendwelche anderen Tools, die Sie gerne verwenden?

MIKE CRANTEA: Ich möchte der lokalen Override-Funktion in Chrome ein großes Lob aussprechen. Das gibt Ihnen in Kombination mit der Registerkarte Leistung eine chirurgische Möglichkeit, mit der Änderung sogar der Reihenfolge des Ladens der Elemente auf Ihrer Website herumzuspielen. Und wie viel oder wenig das auswirkt. Es gibt Ihnen den nötigen Überblick darüber, ob es sich lohnt, sich die Mühe zu machen, eine bestimmte Änderung vorzunehmen, oder ob Sie es einfach dabei belassen und sich auf andere Dinge konzentrieren, die wirklich etwas bewirken.

MARK DAVOLI: Und eine Sache, die ich auch für entscheidend halte, ist die Überwachung der Serverarchitektur. Rechts. Sie können also die besten Core Web Vitals der Welt haben, aber wenn Ihr Server ungewöhnlich stark belastet wird und Sie sich dessen nicht bewusst sind, können Sie plötzlich feststellen, dass Ihre erste zufriedene Farbe dramatisch abfällt, was sich dann auf so ziemlich alles andere auswirkt. Behalten Sie also Tools wie New Relic oder was auch immer im Auge, um nur die Leistung zu überwachen. Es ist entscheidend, genau darauf zu achten, dass Sie über die richtige Infrastruktur verfügen, um Ihre Website so schnell wie möglich zu rendern.

MIKE CRANTEA: Und hier hilft es, wenn das Caching aktiviert und bereit ist.

MARK DAVOLI: Und CDN.

MIKE CRANTEA: Ja. Vermeiden Sie einige potenzielle Katastrophen.

ALEX ZUNIGA: Ausgezeichnet. Nun, ich schätze diese Klarheit dort. Also eine der Fragen. Es gibt viele Optimierungs-Plugins zur Optimierung von Core Web Vitals. Was sind die Einschränkungen von WordPress-Plugins, um dabei zu helfen? Oder optimieren sie wirklich die Website? Oder täuschen sie möglicherweise nur die Messungen von Google? Und ich schätze, das ist vielleicht eine Frage, ist es besser – wir haben irgendwie erwähnt, ist es besser, Plugins zu verwenden oder die Arbeit zu erledigen, anstatt sich auf ein Plugin zu verlassen?

SANJUCTA GHOSE: Also ich finde Plugins großartig. Wie zum Beispiel WP Rocket zum Beispiel ist großartig. Wir verwenden häufig den EWWW Image Optimizer. Und das finde ich auch super. Aber wie ich denke, es wurde schon gesagt. WP Rocket, Sie müssen es vorsichtig verwenden, denn wenn Sie die Funktion zum Zurückstellen von JavaScript aktivieren, habe ich Fälle gesehen, in denen es seltsame Fehler einführt. Einmalige Fehler. Also würde ich es vorziehen, manchmal vielleicht meine eigene Lösung zu entwickeln, anstatt mit einem Plugin zu gehen. Vorausgesetzt, Sie haben das Entwicklungs-Know-how.

Die meisten Optimierungen, die wir für Delicious Brain-Sites vorgenommen haben, haben wir also selbst durchgeführt, anstatt ein Plugin zu verwenden. Trotzdem denke ich, dass Plugins ein guter Ausgangspunkt sind. Wenn Sie also gerade erst anfangen, möchten Sie vielleicht zum Beispiel WP Rocket auf Ihrer Staging-Site implementieren und herumspielen und sehen, ob es Dinge kaputt macht oder nicht. Oder ob es echte Verbesserungen bringt. Daher denke ich, dass Plugins vorsichtig verwendet werden sollten. Und Sie müssen wissen, was im Hintergrund passiert, was die Plugins tun. Und wie sich dies auf Ihre Website auswirken könnte.

Matt Chase: Ja. Glücklicherweise war WP Rocket meiner Meinung nach in neueren Versionen zumindest gut darin, die gefährlichen Schalter, die sie haben, sehr klar zu kennzeichnen. Weil ich auch oft davon gebrannt habe, wo die verzögerten Skripte – und sogar solche, die Sie nicht erwarten würden, wie die CSS-Optimierung, irgendwie kaputte Modelle haben, bei denen es nicht das Ding gab, dass ein Klassenname sie sichtbar machen würde . Das war also ein aufregender Tag.

Aber ja. WP Rocket ist definitiv mein Ziel, abgesehen von offensichtlich gutem Code in, gutem Code aus. Rechts. Die Arbeit zu erledigen ist immer der beste Weg, sie anzugehen. Plugins können Dinge automatisieren. Aber es gibt keinen Ersatz dafür, dass Ihr Code tatsächlich schlank und gemein ist.

MIKE CRANTEA: Es gibt noch ein weiteres Plugin, das als Labor-Plugin gekennzeichnet ist. Das ist Performance Lab. Es wird vom WordPress Performance Core Team durchgeführt. Und auch wenn es sich anhört, als wäre es etwas beängstigend, bot es in allen meinen bisherigen Tests volle Stabilität. Und das war sehr beeindruckend für das, was es sein sollte, und die Qualität der Arbeit, die in diesem Performance Lab-Plugin endete. Ausprobieren lohnt sich also. Ein paar Kontrollkästchen. Und alles, was darin ist, ist sicher. Nun, ich bin mir nicht so sicher über den Datenbankwechsel. Das ist etwas umstrittener, wenn ich darüber lese. Ja. Berühren Sie einfach nicht diesen Knopf. Als ob sie SQLite-Unterstützung oder ähnliches innerhalb des Plugins hinzugefügt hätten, was definitiv für einige kleinere Websites funktioniert.

ALEX ZUNIGA: Interessant.

MARK DAVOLI: Ja. Und für mich ist WP Rocket fantastisch. Wir schränken die Verwendung auf den meisten unserer Websites ein, da das meiste, was wir tun, nativ erstellt wird. Aber es gibt viele andere Funktionen in Core WordPress, die Ihnen bei richtiger Verwendung wirklich eine gut optimierte Website verschaffen können. Wie die Verwendung des Blockeditors anstelle von Drittanbietern wie Elementor oder et cetera kann einer Website viel Aufblähung hinzufügen. Wenn Sie also wie das neue native Gutenberg-Typ-Blocksystem herumbauen und Dateien wirklich nach Bedarf laden, anstatt beispielsweise alles auf einmal auf jeder einzelnen Seite zu laden. Es gibt jetzt eingebaute Lazy-Loading-Funktionen in WordPress. Überwachen Sie also, wie es verwendet wird, und verwenden Sie es angemessen usw. Und dann fügen Sie ein Tool wie WP Rocket hinzu, um das zu verbessern, was bereits vorhanden ist. Aber nicht nur darauf verlassen.

Es kann hilfreich sein, Sie dorthin zu bringen, besonders wenn Sie eine Website haben, die nicht gut funktioniert. Aber wie bereits erwähnt, können diese Dinge, wie die kritische CSS-Generation, viele Probleme haben, weil sie viele Annahmen treffen, die auf dem basieren, was ihr Bot auf Ihrer Seite sieht. Aber es kann keine Dinge vorhersagen, die keine anfänglichen Ansichten rendern werden. Wenn Sie also, wie erwähnt, Modelle haben, die auftauchen, wird es nicht wissen, dass dies eine Möglichkeit ist. Es wird das CSS dafür nicht generieren und es richtig einbinden. Also zum Beispiel Dinge wie das Vorladen Ihrer wichtigsten Schriftarten oder das Rendern oberhalb der Falte. Auch das ist der Schlüssel. Eigentlich das Wichtigste.

SANJUCTA GHOSE: Zum Thema kritisches CSS wollte ich nur einspringen und erwähnen, dass Addy Osmani dieses großartige Tool namens Critical hat. Sie können dies zu Ihrem Build-Prozess hinzufügen, um Ihr kritisches CSS zu generieren. Es ist toll. Und es ist sehr zuverlässig. Da Sie kritisches CSS erwähnt haben, dachte ich, ich würde das hinzufügen. Tut mir leid, dass ich Sie unterbrochen habe.

MIKE CRANTEA: Das ist in Ordnung. Zum gleichen Thema des kritischen CSS hat das Jetpack-Team einige Anstrengungen unternommen, um etwas mit dem Jetpack Boost-Plugin zu tun. Das ist eine sehr, sehr interessante Art, das kritische CSS zu generieren, indem die Seiten in Iframes oder so ähnlich gerendert werden. Wenn es funktioniert, ist es eine großartige Lösung. Wenn nicht, sagt es dir, hey, es funktioniert hier nicht. Gehen Sie einfach weiter. Sie brauchen etwas anderes. Es ist nicht immer einfach, an das kritische CSS zu gelangen. Andererseits war kritisches CSS vor 4 oder 5 Jahren super groß. Es hat sehr geholfen.

In den letzten zwei oder drei Jahren mit den Fortschritten von HTTP/3 hatte ein kritisches CSS, das blockiert, nur sehr geringe Auswirkungen auf 100 Kilobyte oder etwas Inline-CSS. Eine Website so schnell funktionieren zu lassen wie eine Website, die vor vier oder fünf Jahren noch über kritisches CSS verfügte. Scheuen Sie sich also nicht, ein anständiges CSS auf Ihrer Website zu haben. Du musst es nicht loswerden. Und ich habe Websites gesehen, die wie super optimiert waren.

Wir haben in kritischem CSS etwa 100 Kilobyte Inline-CSS. Und Renderblocking, jQuery und zwei weitere Skripte, die nicht verwendet wurden. Es ist wie, yay. Damit verfehlst du den Zweck. Es kann uns helfen, die letzten 5% des Ansatzes zu verwenden. Aber wenn Sie damit anfangen, schauen Sie sich das erste an.

ALEX ZUNIGA: Großartig. Eindrucksvoll. Ich denke, all diese Tools. Es ist großartig, diese Rufe zu hören. Und schön, diese Vorschläge und Empfehlungen zu hören. Und eine Menge davon wirbelt um unsere nächste Frage herum. Was sind die einzigartigen Aspekte der Arbeit an WordPress speziell mit Core Web Vitals? Ist es, dass Sie dies über Plugins tun müssen, anstatt es mit jedem anderen Tech-Stack zu tun? Geht es mit WordPress einfacher? Gibt es weitere Tools? Wie wir gerade erwähnt haben, haben Sie alle eine Menge Werkzeuge abgeschossen. Geht es mit WordPress einfacher? Ist es mit WordPress schwieriger? Was nehmt ihr?

MATT CHASE: Ich denke, es ist sehr einfach mit WordPress. Also haben wir ein bisschen darüber gesprochen – oder ich habe das WordPress-Skript-Knotenpaket erwähnt, das sie verteilen, das einfach eine großartige Art von Webpack-Build-System in einer Box ist. Sie haben auch einen WordPress Create-Block, der nur eine wirklich schnelle und einfache Möglichkeit ist, einen benutzerdefinierten Block für Ihre WordPress-basierte Website zu erstellen. Aber es ist so aufgebaut, dass ein Großteil des Glue-Codes sozusagen für Sie geschrieben wird. Es ist also schon schlau – Mark, du hast diese Skripte nur als Stichwort erwähnt, wenn du es solltest. Sie wissen also von Anfang an, ob Ihr Block das tut. Sie müssen nicht einmal darüber nachdenken. WordPress macht solche Dinge also wirklich einfach.

MARK DAVOLI: Ja, absolut. Und es ist Open Source. Rechts? Du kannst also so ziemlich alles ändern. Aus diesem Grund ist es viel schwieriger, wenn Sie mit einem geschlossenen System arbeiten, um für Core Web Vitals im Vergleich zu WordPress zu optimieren. Und als Core Web Vitals zum ersten Mal angekündigt wurde, war es noch nicht ganz so weit. Es war viel anspruchsvoller. Sie haben wirklich einen langen Weg zurückgelegt, indem sie viele dieser Funktionen hinzugefügt haben, insbesondere mit dem Blockeditor und dem blockbasierten Erstellen usw., um diese Fähigkeit zum selektiven Laden von Assets, CSS-Dateien, Schriftartdateien usw. wirklich zu optimieren. Also ja. Es war großartig.

ALEX ZUNIGA: Das ist wahrscheinlich der Unterschied zwischen geschlossenem System und Open Source. Mach weiter, Sanjucta.

SANJUCTA GHOSE: Ja. Ja. Und ich denke, weil es viele Hosting-Provider gibt, die sich WordPress widmen. Und wie du gesagt hast. WordPress ist Open-Source. Es gibt also viele Optimierungen rund um das Hosten von WordPress-Sites. Und daher denke ich, dass es dort bereits eine Menge Unterstützung gibt, wenn Sie auf WordPress aufbauen, was bedeutet, dass Sie das Rad nicht neu erfinden müssen. Daher denke ich, dass es definitiv einfacher ist, wenn Sie auf WordPress aufbauen, um Ihre Core Web Vitals zu optimieren.

ALEX ZUNIGA: Wunderschön. Wir haben also darüber gesprochen, wie wir diese Tools messen, was wir verwenden, um unsere Core Web Vitals, einige der Tools, tatsächlich zu verbessern. Wenn wir jetzt über Kundenerwartungen sprechen, in welcher Phase eines neuen Projekts beginnen Sie, Core Web Vitals als Teil Ihres Aufbaus oder Ihrer Strategie zu betrachten? Ist das richtig, wenn Sie wie Ihre Basis-Boilerplate-Vorlage beginnen? Oder ist es etwas, das Sie etwas später in der Geschichte optimieren? Was macht ihr alle?

Matt Chase: Ja. Ich denke, für mich ist es eher eine Art, Dinge zu erstellen, als eine Sache, die man mit einer nicht optimierten Website macht. Es ist von Anfang an. Und es ist idealerweise in jeder Codezeile vorhanden, die Sie schreiben. Ich versuche nicht – ich möchte keine große optimierte Website aufbauen und dann später zurückgehen und sie reparieren. Ich möchte versuchen, von Anfang an so sauber wie möglich zu schreiben. Und dann finde ich es normalerweise so, dass es ein bisschen einfacher ist, das letzte bisschen Optimierungssaft am Ende herauszupressen.

MARK DAVOLI: Ja. Er hat absolut recht. Wir beginnen von Anfang an mit dem Bau. Ich meine, es gibt Komponenten, die nicht so kurz vor dem Ende passieren. Wir werden Bilder erst kurz vor dem Start einer Bildoptimierung unterziehen. Aber Sie müssen wirklich nicht einmal beim Build selbst, sondern manchmal sogar beim Designprozess darüber nachdenken, wie die Website gestaltet wird, wenn Sie Core Web Vitals berücksichtigen. Denn architektonisch ist es schwieriger, bestimmte Designs schneller zu implementieren als andere. Es ist also sehr hilfreich, dies zu verstehen und Designer darüber aufzuklären, was eine Implementierung möglicherweise schwieriger machen könnte als nicht.

MIKE CRANTEA: Und die Grenzen diktieren. Hey, du kannst nur bis zu x Telefone haben. Sie sollten nicht 25 mit all ihren Variationen auf den Tisch bringen. Das hilft schon in der Designphase. Auch ohne einige Berührungspunkte während der Projektdauer ist es manchmal einfach, einige Dinge durchzubringen. Wie ein Sprint sieben Anfragen zum Hinzufügen eines Quiz-Plug-ins zum Mix. Wenn das ungeprüft bleibt, finden Sie es etwas am Ende. Meine Empfehlungen sind also, dies alle paar Sprints zu verarbeiten. Wir überprüfen unsere automatisierten Messungen der Inszenierung, wie sich die Dinge entwickeln. Was ist mit den letzten Dingen passiert, die zum Gehen gebracht wurden? Haben sich die Dinge verlangsamt? Müssen wir im Voraus Korrekturmaßnahmen ergreifen, anstatt am Ende eines Projekts reaktiv zu sein?

SANJUCTA GHOSE: Ja. Ich stimme zu. Es ist sehr wichtig, dass Sie mit der Designphase beginnen, da es einfache Dinge sind, wie zum Beispiel, ob es ein Popup, ein Werbebanner oder ähnliches geben soll. Manchmal macht es einen großen Unterschied zu vielleicht Ihrer kumulativen Layout-Punktzahl. Es ist also gut, im Voraus zu wissen, was passieren wird. Egal, ob Sie ein Popup oder ein Banner erhalten. Und Sie wollen keine Überraschungen gegen Ende Ihres Projekts. Daher denke ich, dass es sehr wichtig ist, den Kunden oder die Interessengruppen bereits in der Designphase einzubeziehen und ihnen mitzuteilen, dass dies Auswirkungen auf Ihre Core Web Vitals haben könnte, damit sie eine fundierte Entscheidung treffen können.

MARK DAVOLI: Das ist auch nach dem Start super hilfreich, denn sobald Ihre Website fertig ist, kann es manchmal so sein, lasst uns später ein Chat-Widget oder was auch immer einwerfen. Dann gibt es plötzlich einen Knick. Und dann müssen Sie darüber nachdenken, wie wir das integrieren und optimieren. Die Verzögerungsskriptfunktion kann also die meisten Werbepixel pushen, die notorisch schlecht dafür sind, Ihren Core Web Vitals-Score zu zerstören. Aber manchmal kann man etwas nicht aufschieben, weil es irgendwie wichtig ist, was der Kunde wirklich will. Balancieren Sie es also so gut wie möglich aus und stellen Sie sicher, dass Sie die potenziellen Auswirkungen kommunizieren. Und nur das Endergebnis ist, es so schnell wie möglich zu bekommen. Manchmal muss man Abstriche bei der Funktionalität machen. Manchmal nicht. Aber machen Sie es so schnell wie möglich, um diese Conversions zu steigern.

ALEX ZUNIGA: Ausgezeichnet. Exzellent. Ich höre also so etwas wie bessere Zutaten, die von Anfang an bessere Websites machen. Nicht, dass wir ganz am Ende noch ein paar Core Web Vitals aufschlagen werden. Es ist etwas, das wirklich eine Lebensweise ist, wenn Sie zuerst so darüber nachdenken wollen. Na toll. Also nur unsere letzte Frage. Haben Sie jemals Probleme, Ihren Kunden den Wert der Zeit zu vermitteln, die Sie mit der Arbeit an Core Web Vitals verbringen? Ist das etwas, worauf sie jemals zurückdrängen? Verstehen sie manchmal nicht, warum Sie diese Arbeit machen?

MATT CHASE: Ich glaube nicht, dass ich jemals irgendeine Art von Zurückweisung bekommen habe. Wenn überhaupt, ist es eher das Gegenteil. Normalerweise wollen wir die Leistung. Wir wollen die Core Web Vitals. Machen wir es möglich. Ich werde sagen, dass wir nicht immer darüber nachdenken – wir haben über Tracking-Pixel gesprochen und wie berüchtigt sie dafür sind, diese Punktzahl zu senken. Aber niemand kümmert sich darum. Wir sind wie Pixel, Pixel, Pixel, Pixel. Die Leute müssen also darüber nachdenken, diesen Kostenvorteil tatsächlich abzuwägen, wenn sie Tracking hinzufügen, denn es ist nicht so einfach, es einfach anzuziehen und Ergebnisse zu erzielen. Denn es entstehen Kosten.

ALEX ZUNIGA: Großartig.

MIKE CRANTEA: Ich denke, bei der Leistung mangelt es an Geduld. Also, wenn Sie denken, oh, lass uns nach dem ersten ein paar Sprints ein paar Performance-Arbeiten machen. Wann sehe ich es? Wann sehe ich es? Das Planen, es iterativ zu veröffentlichen, wie das Erweitern einer Funktion, einer Funktion, einer Funktion, erhöht das Vertrauen in die Wirkung dieser Arbeit. Und je mehr Sie sehen, dass sich dies in Konvertierungen und Veränderungen niederschlägt, desto schneller wird der Wert wahrgenommen, ohne viel Zeit für die Aufklärungsarbeit aufwenden zu müssen.

MARK DAVOLI: Ja. Und ich denke, eine Sache, die für Kunden schwierig zu verstehen sein könnte, ist der Unterschied zwischen echten Benutzermetriken und Labordaten. Weil viele von ihnen ihre eigenen Tests und so weiter durchführen können. Und nicht ganz verstehen. So helfen Sie ihnen zu verstehen, dass der zusammenfassende Ursprungsteil der Seite die Erkenntnisse sind, die Google verwendet, um beispielsweise das SEO-Ranking und ähnliches zu bewirken. Weil viele von ihnen nach dieser Punktzahl suchen und diese optimieren. Und helfen Sie ihnen zu verstehen, dass es 28 Tage dauert, jede Änderung in der Produktion zu messen, bevor Sie die gesamte Bandbreite dessen haben, wie sich Ihre Änderung auf die Dinge ausgewirkt hat.

ALEX ZUNIGA: Das ist ein toller Aufruf. Toller Aufruf.

MIKE CRANTEA: Und ich sollte eine der Metriken hervorheben, die von allen am verwirrendsten ist. Die Interaktivitätsmetriken. Diese waren notorisch volatil. Und für einige Leute, die mehr Angst vor Variationen in der Partitur haben, ist es so, als ob diese neue Funktion, die wir gebaut haben, die Website erheblich verlangsamt hat? Und dann schlagen Sie den Test erneut und es ist, als würde man um 10 Punkte nach oben gehen und dann um 10 Punkte nach unten gehen. Das Erklären dieser Variation ist so zeitaufwändig. Warum ist es nicht nur eine Zahl, die konsistent ist? Nun, das ist etwas so Schwieriges wie Dinge zu benennen und zu cachen.

ALEX ZUNIGA: Nun, großartig. Es hört sich so an, als würden wir Ihren Beitrag und Ihr Feedback zu Core Web Vitals wirklich zu schätzen wissen. Wie man sie verwendet, woran man sie misst, wie man die Kundenerwartungen für all das festlegt. Es war wirklich eine Lernstunde. Wir hoffen, dass unsere Diskussionsteilnehmer Ihre Zeit hier genossen haben. Wir freuen uns auf jeden Fall, all Ihr Feedback zu hören. Und wir hoffen, dass die Teilnehmer auch hier ein tolles Feedback bekommen haben.

Also euch allen, vielen Dank für eure Zeit. Nun, das war unser Panel. Wir möchten uns ganz herzlich bei all unseren Panelisten bedanken. Wir möchten Ihnen für Ihre Teilnahme an diesem Panel danken. Und wir hoffen, Sie haben viel Spaß beim Anschauen der restlichen Sessions a DE{CODE}.