Core Web Vital Werkzeuge

Ich finde die von Google entwickelten Core Web Vitals immer noch clever. Als ich mich anfangs um Performance kümmerte, ging es nur darum: Anfragen reduzieren! Dinge cachen! Sachen kleiner machen! Und obwohl all das sehr eng mit Web-Performance zusammenhängt, ist es abstrakt damit verbunden. Tatsächliche Web-Performance für Nutzer sind Dinge wie: Wie lange musste ich warten, bis ich den Inhalt auf der Seite sehen konnte? Wie lange, bis ich tatsächlich mit der Seite interagieren konnte, z. B. in ein Formular tippen oder auf einen Link klicken? Sprangen Dinge störend herum, während ich versuchte, etwas zu tun? Deshalb sind die Core Web Vitals schlau: Sie messen diese Dinge.

Der Lighthouse-Tab in den Chrome DevTools hat sie jetzt

Es ist gut, sie im Auge zu behalten, denn denken Sie daran, abgesehen davon, dass diese Zahlen einen direkten Vorteil für Ihre Nutzer haben, sobald sie auf Ihrer Website sind, könnten sie auch beeinflussen, ob Nutzer überhaupt auf Ihre Website gelangen. Web Core Vitals fließen in SEO ein und sind wichtig für die neuen Karussellanforderungen, die bisher nur AMP-Seiten vorbehalten waren.

Das Nachverfolgen dieser Zahlen bei einmaligen Audits ist nützlich, aber noch nützlicher ist es, sie über die Zeit zu beobachten, um sich vor einem Rückgang zu schützen. Performance-Tools wie Calibre decken sie ab. New Relic hat sie integriert. SpeedCurve verfolgt sie.

Cumulative Layout Shift (CLS) ist eine knifflige Sache. Das ist die Metrik, bei der beispielsweise eine Anzeige am Anfang eines Artikels steht. Die Anfrage für diese Anzeige erfolgt asynchron, daher besteht eine gute Chance, dass die Anzeige spät geladen wird und den Inhalt des Artikels nach unten verschiebt. Das ist nicht nur ärgerlich, sondern ein echter Schlag für die Performance-Metriken und letztendlich für SEO.

Nic Jansmas Beitrag „Cumulative Layout Shift in Practice“ bietet eine tiefe Analyse.

CLS ist nicht nur „macht die Seite das oder nicht?“. Es gibt eine Punktzahl, wie die obige Abbildung zeigt. Ich würde sagen, 0 ist ein gutes Ziel, da es keine Version von CLS gibt, die für irgendjemanden gut ist. Es gibt viele Nuancen, wie das Nachverfolgen „synthetisch“ (z. B. in einem Headless-Browser, insbesondere für Performance-Tools) und mit echten Nutzern auf Ihrer echten Website (was RUM oder Real User Metrics genannt wird). Beides ist nützlich.

Wenn Sie CLS-Probleme haben, die Sie beheben müssen, kann das schwierig sein. SpeedCurve hat neue Werkzeuge, die dabei helfen.

Für jeden Layout-Shift zeigen wir Ihnen den Filmstreifenrahmen direkt vor und direkt nach dem Shift. Dann zeichnen wir eine rote Box um die Elemente, die sich bewegt haben, und heben genau hervor, welche Elemente den Shift verursacht haben. Der Layout-Shift-Score für jeden Shift hilft Ihnen auch zu verstehen, wie sich dieser Shift auswirkt und wie er zur kumulativen Punktzahl beiträgt.

Das würde es ziemlich einfach machen, die Ursachen zu finden und zu beheben, hoffe ich. Insbesondere die kniffligen Fälle. Ich wusste das nicht, aber CLS kann durch weitaus subtilere Dinge verursacht werden, wie Mark Zeman in dem Beitrag aufzeigt. Zum Beispiel:

• Ein Bildkarussell, das sich nur horizontal bewegt, kann CLS auslösen. Das ist ein Dämpfer, da es das ist, was es eigentlich tun soll, aber anscheinend kann man es austricksen, indem man Karussells nur mit CSS-transform bewegt.
• Wenn Sie einen sehr großen Bereich haben, ist es besonders riskant, ihn zu bewegen. Wenn er sich auch nur ein kleines bisschen bewegt, wirkt sich das stark auf CLS aus.
• Flash of Unstyled Text (FOUT) ist eine Ursache für CLS. Obwohl das aus anderen Gründen gut für die Performance ist! Ein Teufelskreis! Es ist eine gute Ausrede, zu perfekten Schrift-Fallbacks zu greifen.

Knifflige, aber wichtige Dinge. Ich muss dringend Performance-Tests in meine CI/CD integrieren, was wirklich helfen wird. Es fühlt sich immer mehr so an, als ob Web-Performance ein eigenes Karrierezweiglein der Webentwicklung ist. Front-End-Webentwickler müssen das wirklich verstehen und in gewissem Umfang helfen, aber wir haben schon so viel zu tun.