web.dev: Was Googles Plattform für bessere Webseiten heute kann

Als Google web.dev Ende 2018 vorstellte, war es ein Beta-Experiment: eine Sammlung von Optimierungstipps plus ein Test-Tool, das gern mal Fehlermeldungen auswarf. Unser ursprünglicher Beitrag dazu ist entsprechend gnadenlos veraltet. Heute ist web.dev die zentrale Anlaufstelle des Chrome-Teams für alles, was moderne Webentwicklung ausmacht – von Performance über Barrierefreiheit bis zu der Frage, welche Browser-Features du bedenkenlos einsetzen kannst. Zeit für eine komplett überarbeitete Bestandsaufnahme – und für einen Blick darauf, was das konkret für deinen Online-Shop bedeutet.

Was ist web.dev heute?

web.dev ist Googles Lern- und Dokumentationsplattform für Webentwickler. Statt eines einzelnen Tools findest du dort:

• Strukturierte Kurse („Learn"-Reihe) zu HTML, CSS, JavaScript, Performance, Barrierefreiheit, Formularen, Bildern und Progressive Web Apps – kostenlos und auf Einsteiger bis Fortgeschrittene zugeschnitten.
• Artikel und Guides zu konkreten Optimierungsthemen: Ladezeiten, Rendering, Caching, Fonts, Third-Party-Skripte und mehr.
• Den web.dev-Blog mit Ankündigungen rund um Chrome, Web-Standards und die Core Web Vitals.
• Fallstudien, die zeigen, wie Unternehmen durch Performance-Verbesserungen messbar mehr Umsatz oder Engagement erzielt haben.

Kurz: web.dev erklärt das „Warum" und „Wie" der Web-Optimierung. Das Messen findet inzwischen woanders statt – dazu gleich mehr.

Vom Beta-Tool zur Lernplattform

Im Original-Beitrag drehte sich viel um das damalige Online-Test-Tool auf web.dev, das auf der Lighthouse-Engine basierte. Dieses „Measure"-Tool hat Google mittlerweile eingestellt. Wenn du heute eine Seite prüfen willst, führen die Wege hierhin:

• PageSpeed Insights (pagespeed.web.dev): kombiniert einen Lighthouse-Labortest mit echten Nutzerdaten aus dem Chrome User Experience Report (CrUX). Das ist der schnellste Weg zu einer belastbaren Einschätzung.
• Lighthouse in den Chrome DevTools: direkt im Browser, ideal während der Entwicklung – inklusive Audits für Performance, Accessibility, Best Practices und SEO-Grundlagen.
• Chrome DevTools Performance-Panel: Google hat die Funktionen der früheren Web-Vitals-Browser-Extension direkt in die DevTools integriert. Dort siehst du deine Core-Web-Vitals-Werte live beim Bedienen der Seite.

Die Arbeitsteilung ist damit klar: web.dev liefert das Wissen, PageSpeed Insights und die DevTools liefern die Messwerte.

Core Web Vitals: die Messlatte für Nutzererlebnis

Das wichtigste Konzept, das aus dem web.dev-Umfeld hervorgegangen ist, sind die Core Web Vitals – drei Kennzahlen, mit denen Google das tatsächliche Nutzererlebnis einer Seite bewertet:

• LCP (Largest Contentful Paint): Wie schnell ist der größte sichtbare Inhalt geladen? Zielwert: maximal 2,5 Sekunden.
• INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Interaktionen wie Klicks und Tastatureingaben? Zielwert: maximal 200 Millisekunden. INP hat 2024 den älteren FID-Wert (First Input Delay) abgelöst und ist deutlich strenger, weil er alle Interaktionen über den gesamten Seitenbesuch bewertet – nicht nur die erste.
• CLS (Cumulative Layout Shift): Wie stark springt das Layout beim Laden? Zielwert: maximal 0,1.

Wichtig ist die Unterscheidung zwischen Labordaten (ein simulierter Test, wie ihn Lighthouse durchführt) und Felddaten (echte Nutzermessungen aus CrUX). Für die Bewertung durch Google zählen die Felddaten. Ein grüner Lighthouse-Score bei roten Felddaten bedeutet: Deine echten Besucher haben ein Problem, das dein Testgerät nicht hat – häufig, weil sie mit langsameren Smartphones und Mobilfunkverbindungen unterwegs sind.

Sind Core Web Vitals ein Rankingfaktor?

Ja – die Core Web Vitals fließen als Teil der Page Experience in Googles Ranking ein. Realistisch betrachtet sind sie aber ein Hygienefaktor, kein Hebel, der eine schwache Seite auf Platz eins katapultiert. Der größere Effekt guter Werte zeigt sich woanders: bei der Conversion. Nutzer brechen langsame Seiten ab, bevor sie überhaupt im Ranking-Kontext relevant werden. Gerade im E-Commerce ist jede eingesparte Sekunde Ladezeit direkt in der Conversion-Rate messbar.

Baseline: endlich Klarheit bei Browser-Features

Ein jüngeres Konzept, das web.dev prominent vorantreibt, ist Baseline. Es beantwortet eine Frage, die Entwickler seit Jahrzehnten nervt: „Kann ich dieses CSS- oder JavaScript-Feature schon produktiv einsetzen?"

Baseline teilt Web-Features in zwei Stufen ein:

• Newly available: Das Feature funktioniert in den aktuellen Versionen aller großen Browser (Chrome, Edge, Firefox, Safari).
• Widely available: Das Feature ist seit mindestens 30 Monaten überall verfügbar – du kannst es ohne Fallback-Gymnastik einsetzen.

Diese Kennzeichnung findest du inzwischen direkt in der Dokumentation auf web.dev und MDN. Für die Praxis heißt das: weniger Rätselraten über Browser-Kompatibilität, schnellere Entscheidungen, moderner Code mit weniger Polyfills – was wiederum der Performance zugutekommt.

Die nützlichsten Ressourcen im Überblick

Wenn du web.dev gezielt für dein Projekt nutzen willst, sind das die lohnendsten Einstiegspunkte:

• Learn Performance: Grundlagenkurs zu Ladezeiten – von kritischen Rendering-Pfaden über Bildoptimierung bis Lazy Loading.
• Learn Accessibility: Barrierefreiheit von semantischem HTML bis ARIA. Angesichts verschärfter gesetzlicher Anforderungen (Stichwort Barrierefreiheitsstärkungsgesetz) auch für Shop-Betreiber in Deutschland Pflichtlektüre.
• Learn PWA: Progressive Web Apps – Webseiten, die sich installieren lassen und offline funktionieren.
• Die Core-Web-Vitals-Artikel: detaillierte Anleitungen, wie du LCP, INP und CLS diagnostizierst und behebst.

Was heißt das konkret für deinen Online-Shop?

Theorie ist schön, aber im Shop-Alltag zählen Ergebnisse. Aus unserer Projektarbeit sind das die häufigsten Baustellen, die du mit dem web.dev-Wissen angehen kannst:

1. Third-Party-Skripte und Apps: Der mit Abstand häufigste INP- und LCP-Killer. Jede Tracking-Suite, jedes Review-Widget, jede nachträglich installierte Shop-App lädt JavaScript. Ein regelmäßiges Skript-Audit – was läuft hier eigentlich alles und was davon brauchen wir noch? – bringt oft mehr als jede Detailoptimierung.
2. Bilder: Moderne Formate (AVIF, WebP), korrekt dimensionierte Varianten und Lazy Loading unterhalb des sichtbaren Bereichs. Das Hero-Bild dagegen sollte priorisiert geladen werden, denn es ist fast immer das LCP-Element.
3. Layout-Stabilität: Reservierte Platzhalter für Bilder, Banner und dynamische Inhalte verhindern Layout-Sprünge – gerade bei Consent-Bannern und Countdown-Elementen ein Klassiker.
4. Schlankes Theme statt Feature-Friedhof: Viele Shops schleppen Funktionen mit, die niemand nutzt, deren Code aber jede Seite belastet. Weniger ist hier messbar mehr.

Der sinnvolle Workflow: Erst PageSpeed Insights mit Felddaten prüfen, dann die größten Probleme in den DevTools reproduzieren, priorisieren und beheben – und die passenden web.dev-Guides als Nachschlagewerk daneben legen. Danach heißt es dranbleiben, denn Performance ist kein Projekt, sondern ein Zustand, den jede neue App und jedes neue Feature wieder gefährdet.

Fazit

Aus der wackeligen Beta von damals ist eine der besten kostenlosen Ressourcen für Web-Optimierung geworden. web.dev liefert das Wissen, PageSpeed Insights und die Chrome DevTools liefern die Messwerte, und mit den Core Web Vitals gibt es eine klare, einheitliche Messlatte für Nutzererlebnis. Für Shop-Betreiber ist das eine gute Nachricht: Die Regeln sind transparent wie nie. Man muss sie nur konsequent anwenden – denn schnelle Seiten ranken nicht nur besser, sie verkaufen vor allem besser.

---

Wenn dein Shopify-Store bei den Core Web Vitals im gelben oder roten Bereich liegt, kostet dich das jeden Tag Conversions. Wir optimieren Shopify-Shops gezielt auf Performance – vom Theme-Code über das App-Audit bis zur Bildpipeline. Melde dich unter hello@alphadesign.agency, wenn du eine ehrliche Bestandsaufnahme deines Shops willst.