CSS für Web Vitals

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das Marketing für Core Web Vitals (CWV) war ein riesiger Erfolg. Ich schätze, das passiert, wenn die dominante Suchmaschine der Welt den Leuten sagt, dass etwas ein SEO-Faktor sein wird. Wisst ihr, welche Sprache eine große Rolle bei diesen CWV-Scores spielen kann? Ich warte fünf Minuten, damit ihr darüber nachdenken könnt. Nur ein Scherz, es ist CSS.

Katie Hempenius und Una Kravets

Die Art und Weise, wie Sie Ihre Stile schreiben und Layouts erstellen, kann einen großen Einfluss auf die Core Web Vitals haben. Dies gilt insbesondere für Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP).

Zum Beispiel…

  • Absolute Positionierung von Dingen nimmt sie aus dem Fluss und verhindert Layoutverschiebungen (aber bitte lesen Sie das nicht so, dass wir alles absolut positionieren sollten).
  • Laden Sie keine Bilder, die Sie nicht laden müssen (z. B. verwenden Sie einen CSS-Gradienten stattdessen), was diesem ein gewisses Ansehen verleiht.
  • Perfekte Schriftart-Fallbacks helfen definitiv bei Layoutverschiebungen.

Es gibt noch eine ganze Reihe weiterer praktischer Ideen in dem Artikel, und sie sind alle gute Ideen (weil gute Performance aus vielen Gründen gut ist), selbst wenn der SEO-Aspekt Sie nicht überzeugt.

Direkter Link →