Chrome 2024 – Zusammenfassung für Entwickler: Das Web mit KI in den Entwicklertools, integriertem Gemini und neuen UI-Funktionen neu gestalten

Veröffentlicht: 13. Dezember 2024

Als das Internet noch in den Kinderschuhen steckte, musste man geduldig auf die langsame Einwahlverbindung warten und sich mit Perl und HTML beschäftigen. Das Web hat sich jedoch in kürzester Zeit exponentiell weiterentwickelt. Ob Sie Lebensmittel in letzter Minute liefern lassen oder KI verwenden, um eine Vielzahl langer Artikel zusammenzufassen – ein Link ist jetzt ein Portal zu unzähligen Möglichkeiten.

Deshalb lieben so viele von uns das Web. Damit Sie mehr Menschen auf der ganzen Welt erreichen können, haben wir neue Tools für alle Webentwickler eingeführt – egal, ob Sie Frontend- oder Full-Stack-Entwickler sind oder gerade erst anfangen.

In unserem Rückblick auf 2024 finden Sie innovative Funktionen, mit denen Sie mit weniger Aufwand kreativere Weboberflächen erstellen können.

In Chrome integrierte KI hilft Entwicklern, leistungsstarke Funktionen mit Gemini zu entwickeln

Auf der Google I/O 2024 haben wir angekündigt, wie wir KI einsetzen, um das Web mit Gemini Nano, das direkt in Chrome integriert ist, zu optimieren. Bisher haben mehr als 13.000 Nutzer am Early Preview-Programm teilgenommen, um uns dabei zu helfen,die Zukunft des Webs zu gestalten. Wir sind sehr dankbar für Ihre Beiträge und freuen uns auf die innovativen KI-Anwendungen, die Sie entwickeln werden.

Damit Sie KI optimal nutzen können, haben wir mehrere integrierte APIs in Ursprungstests eingeführt, darunter die experimentelle Prompt API, die Translator API, die Summarizer API und die Language Detector API. Mit allen können Sie KI-basierte Aufgaben im Browser ausführen, ohne Serveraufrufe zu tätigen. Außerdem müssen Sie keine eigenen KI-Modelle verwalten und bereitstellen. Über 8.600 Entwickler haben sich für die Google Chrome Built-in AI Challenge registriert,um eine Web-App oder Chrome-Erweiterung mit diesen APIs zu erstellen. Die Gewinner werden Mitte Januar bekannt gegeben.

PolicyBazaar verwendet die Language Detector API, um die Sprache zu erkennen, wenn ein Kunde während der Unterhaltung die Sprache wechselt.

KI auf dem Gerät wird durch Verbesserungen bei WebAssembly (Wasm) und WebGPU optimiert

Wir sind davon überzeugt, dass das Web die beste Laufzeitumgebung für die Entwicklung von KI-basierten Apps ist, die für alle zugänglich sind. Als Ergänzung zu unserer Arbeit an integrierten KI-APIs haben wir auch zwei Technologien verbessert, mit denen Sie Ihre eigenen KI-Modelle ins Web bringen und schnell ausführen können: WebGPU und Wasm.

Wir haben 16‑Bit-Gleitkommawerte in WebGPU und gepackte Ganzzahl-Skalarprodukte eingeführt, die eine flexiblere Nutzung der GPU eines Geräts mit Compute-Shadern ermöglichen. Zu den geplanten zukünftigen Verbesserungen für WebGPU gehören Untergruppen und Untergruppenmatrizen. Mit diesen Funktionen können Apps schnell zwischen GPU-Threads kommunizieren und die Multiplikation von Matrizen mit fester Größe optimal nutzen. Außerdem führen wir 2025 Memory64 für Wasm ein, damit größere KI-Modelle im Arbeitsspeicher adressiert werden können.

Benchmark-Diagramm aus Transformers.js.
Der WebGPU-Benchmark von Transformers.js zeigt, dass WebGPU 32,51-mal schneller als Wasm ist.

Mit der View Transition API fühlen sich Websites durch die reibungslose Navigation vernetzter an als je zuvor.

Mit neuen Funktionen wie Übergängen zwischen Dokumentansichten können Sie eine nahtlose, flüssige Navigation über mehrere Seiten hinweg erstellen. Mit nur wenigen Zeilen CSS können Sie diese lästigen Neulade-„Blinker“ vermeiden. Die daraus resultierende flüssige, native Navigation ermöglicht es Ihnen, fesselndere Nutzererlebnisse zu bieten und gleichzeitig die Vorteile von Architekturen mit mehreren Seiten zu nutzen.

Mit Ansichtsübergängen lassen sich flüssige seitenübergreifende Navigationen realisieren. Demo für Ansichtsübergänge ansehen

Mit CSS-Pop-up- und Ankerpositionierung lassen sich interaktive Overlays ohne JavaScript erstellen.

Mit popover können Sie jetzt Tooltips, Menüs und andere Overlays erstellen und sie mit der CSS Anchor Positioning API visuell mit den zugehörigen Triggerelementen verbinden. Sie benötigen lediglich etwas CSS und HTML, damit Overlays verankert und sichtbar bleiben, auch wenn Nutzer scrollen oder die Größe von Fenstern ändern. Ihre Nutzer profitieren von einer zuverlässigeren, dynamischen Weboberfläche und Sie müssen sich nicht mehr um die Verwaltung von Z-Index und komplizierte JavaScript-Berechnungen für die Positionierung kümmern. So profitieren alle davon.

Die Speculation Rules API ermöglicht durch Pre-Rendering von Seiten eine nahezu sofortige Navigation

Die Seitenladezeiten haben sich dieses Jahr durch die Speculation Rules API von schnell zu nahezu sofort geändert. Diese API, für deren Implementierung nur wenige Zeilen JSON-Code erforderlich sind, ermöglicht das vollständige Vorrendern von Seiten im Hintergrund. So sind sie immer verfügbar, wenn Ihre Nutzer sie benötigen.

Ohne Vorrendering dauert das Laden von web.dev 1,6 Sekunden, mit Vorrendering 0,2 Sekunden.

Interaction to Next Paint (INP) wird zum Core Web Vital

Im März wurde INP als Core Web Vital eingeführt und hat First Input Delay ersetzt. So können Sie die Reaktionsschnelligkeit von Seiten umfassender als nur anhand der ersten Nutzereingabe messen. Seitdem hat sich die Anzahl der Websites mit einem „guten“ INP auf Mobilgeräten um 9% erhöht. Das bedeutet, dass Nutzer im Web schneller und angenehmer surfen können.

Mit Autofill können Sie Nutzern ein reibungsloseres Online-Bezahlverfahren bieten

Wenn Sie Autofill aktivieren, können Browser Formularfelder automatisch mit den gespeicherten Informationen der Nutzer ausfüllen. Das kann dazu beitragen, dass Nutzer Formulare vollständig ausfüllen. Das Chrome-Team hat anonyme, zusammengefasste Daten aus Tausenden von Onlineformularen analysiert und festgestellt, dass die Anzahl der abgebrochenen Formulare um durchschnittlich 75% gesunken ist, wenn das automatische Ausfüllen verwendet wurde. Viele Faktoren tragen zu einem positiven Checkout-Erlebnis bei. Die Daten deuten jedoch darauf hin, dass AutoFill eine hilfreiche Rolle spielen kann.

Die Autofill-Funktion ist besonders nützlich für E-Commerce-Bezahlvorgänge. Bei Shopify haben Gast-Kassenvorgänge mit Autofill eine um 45 % höhere Conversion-Rate als Gast-Kassenvorgänge ohne Autofill.

Chrome-Entwicklertools mit KI-gestützten Lösungen auf ein neues Niveau heben

Vielleicht erinnern Sie sich noch daran, dass wir Gemini in den Chrome-Entwicklertools mit Console Insights eingeführt haben. Damit können Sie KI-gestützte Fehlerbehebung nutzen, um Probleme effizienter zu beheben. Seit der Google I/O 2024 ist diese Funktion weltweit verfügbar.

Außerdem haben wir das Gemini-Hilfefeld eingeführt, in dem Gemini Ihnen hilft, die technischen Details Ihrer Seite wie Stil, Netzwerkanfragen, Quellen und Leistung zu verstehen.

Console Insights und der Bereich für KI-Unterstützung.
Konsolenstatistiken und das KI-Unterstützungsfeld sind nur zwei von vielen Verbesserungen an den Entwicklertools im Jahr 2024.

Auch der Bereich „Leistung“ wurde dieses Jahr deutlich verbessert. So können Sie jetzt Core Web Vitals in Echtzeit beobachten und Annotationen hinzufügen. Außerdem haben wir die Leistungsfähigkeit von Lighthouse in das Leistungsfeld mit Leistungsstatistiken integriert.

Dank dieser KI-gestützten Verbesserungen, der Verbesserungen des Leistungspanels und Dutzenden von Updates, die die Nutzung erleichtern, wie z. B. Scroll-Badges, sind die Chrome-Entwicklertools hilfreicher als je zuvor. Weitere Verbesserungen, z. B. eine verbesserte Leistung mit den neuen Gemini 2.0-Modellen, sind für 2025 geplant.

Baseline 2024 bietet Entwicklern neue browserübergreifende Webfunktionen

Von der Gradienteninterpolation bis hin zu registrierten benutzerdefinierten Attributen umfasst Baseline 2024 bisher 39 neue, browserübergreifende Webfunktionen. Sie müssen sich keine Gedanken über die Interoperabilität machen, wenn eine Funktion seit mindestens 30 Monaten Teil von Baseline ist. Wenn Sie sich nicht sicher sind, ob sich die Verwendung einer neuen Funktion lohnt, obwohl Sie dadurch möglicherweise weniger Nutzer erreichen, können Sie sich die RUM Archive Insights von Akamai ansehen. Dort finden Sie Informationen zu den Funktionen der einzelnen Baseline-Versionen und zum globalen Nutzeranteil.

Unsere Lieblingsankündigung des Jahres ist das Web Platform Status-Dashboard, in dem alle Webfunktionen zusammen mit dem Grad der browserübergreifenden Unterstützung aufgeführt sind. Noch spannender ist, dass die Daten, die dem Web Platform Status-Dashboard zugrunde liegen, offen und verfügbar sind und Sie sie in Ihre eigenen Tools einbinden können. Ein gutes Beispiel dafür ist das Baseline-Banner.

Wichtige Browser machen mit Interop 2024 mehr Funktionen zu Baseline

Um Baseline mit weiteren Funktionen auszustatten, haben wir wieder mit unseren Partnern an Interop 2024 gearbeitet. Zu den diesjährigen Zielfunktionen gehören Popover, CSS-Nesting, „font-size-adjust“ und die relative Farbsyntax.

Interop enthält auch Werte für experimentelle und stabile Browserversionen. Die Gesamtpunktzahl für die Interoperabilität für stabile Browser liegt derzeit bei 87. Chrome Stable hat zum Jahresende eine Punktzahl von 98 erreicht. Auf dem Interop-Dashboard können Sie den Fortschritt der Browser verfolgen. Wir planen bereits für Interop 2025, das wir im Februar ankündigen werden.

Gemeinsam das Wachstum des Webs im neuen Jahr gestalten

Die Fortschritte, die wir 2024 gemacht haben, sind zwar beeindruckend, aber wir wissen, dass die Zukunft noch vielversprechender ist. Und das alles dank der gemeinsamen Leidenschaft, des Feedbacks und der Innovationen von euch, unserer Entwickler-Community. Auf Veranstaltungen auf der ganzen Welt, von der BrazilJS Conference und dem DevFest Paris bis hin zur Google I/O 2024 und dem ersten Web AI Summit, wurde uns immer wieder deutlich, dass Sie alle genauso an die Leistungsfähigkeit und das Potenzial des Webs glauben wie wir.

Du hast kühnere Ideen als je zuvor. Wir helfen Ihnen gerne dabei, Ihre Ideen zu verwirklichen. Folgen Sie uns auf X, YouTube und LinkedIn, um immer auf dem neuesten Stand zu bleiben. Gemeinsam können wir die Leistungsfähigkeit des Webs neu definieren.