Aufgrund der wachsenden Bedeutung von Core Web Vitals konzentrieren sich Websiteinhaber und Entwickler zunehmend auf Leistung und Nutzerfreundlichkeit. Google bietet viele Tools zum Auswerten, Optimieren und Überwachen von Seiten. Nutzer sind jedoch oft verwirrt, wenn es um die verschiedenen Datenquellen und deren effektive Nutzung geht. In diesem Leitfaden wird ein Workflow vorgeschlagen, bei dem verschiedene Tools kombiniert werden, und es wird erläutert, wo und wie diese im Entwicklungsprozess sinnvoll sind.

Hier finden Sie Informationen zu verschiedenen Ereignissen im Zusammenhang mit Baseline im Februar 2025.

„ruby-align“ ist jetzt Teil von „Baseline“

Veröffentlicht: 20. Februar 2025 Das zuverlässige Herunterladen großer KI-Modelle ist eine Herausforderung. Wenn die Internetverbindung der Nutzer unterbrochen wird oder sie Ihre Website oder Webanwendung schließen, gehen teilweise heruntergeladene

Hier erfährst du mehr über den Ressourcenhinweis und die Verwendung von rel=prefetch.

Erfahren Sie, wie Sie Layoutverschiebungen erkennen und korrigieren können.

Cumulative Layout Shift (CLS) ist ein Messwert, der angibt, wie oft Nutzer plötzliche Veränderungen des Seiteninhalts feststellen. In diesem Leitfaden geht es um die Optimierung häufiger Ursachen für CLS wie Bilder und iFrames ohne Dimensionen oder mit dynamischem Inhalt.

Die CSS-Eigenschaften „scrollbar-color“ und „scrollbar-gutter“ sind in allen gängigen Browser-Engines verfügbar und werden daher als „Neu verfügbar“ eingestuft.

In dieser ersten Ausgabe des monatlichen Baseline-Digests geht es um Neuigkeiten bei Baseline, bei Google und in der Webentwickler-Community im Januar 2025.

Die WebAssembly-Speicherbereinigung und die Optimierung von Wasm-Tail-Calls sind jetzt in allen gängigen Browser-Engines verfügbar. Sie sind also als Baseline Newly verfügbar.

In diesem Beitrag wird der LCP-Messwert (Largest Contentful Paint) vorgestellt und es wird erläutert, wie er gemessen wird

Promise.try ist jetzt in allen gängigen Browser-Engines verfügbar und wird daher als neue Baseline eingestuft.

Kurzbeschreibung

Veröffentlicht: 13. Januar 2024 Dies ist der erste Teil einer dreiteiligen Reihe zu LLMs und Chatbots. Teil 2 zum Erstellen eines Chatbots mit WebLLM und Teil 3 zur Verwendung der Prompt API sind bereits verfügbar. Large Language Models (LLMs) werden

Veröffentlicht: 13. Januar 2024 Es gibt so viele tolle Projekte, die Sie mit KI erstellen können, mit klassischen Modellen für maschinelles Lernen und neueren Large Language Models (LLMs). Mit LLMs können Computer unter anderem neue Inhalte

Sie haben den Hinweis erhalten, den Hauptthread nicht zu blockieren und lange Aufgaben aufzuteilen, aber was bedeutet es, diese Dinge zu tun?

Mit der CSS-Maskierung können Sie ein Bild als Maskenebene verwenden. Das bedeutet, dass Sie ein Bild, eine SVG oder einen Farbverlauf als Maske verwenden können, um ohne Bildeditor interessante Effekte zu erzeugen.

Datensatz „web-features“, Dashboard „Webplattform-Status“, Widget „Baseline-Status“ und mehr! Rückblick auf Baseline 2024

In diesem Beitrag wird Lazy Loading und die Optionen für das Lazy Loading von Videos erläutert.

Das Vorabladen von Modulen bietet eine Möglichkeit, JavaScript-Module im Voraus deklarativ zu laden.

Um die Nutzerfreundlichkeit zu optimieren, ist es wichtig zu verstehen, wie Nutzer mit Ihren Formularen interagieren. Die Browser-Autofill-Funktion spielt dabei eine wichtige Rolle. Hier erfahren Sie, wie Sie Daten dazu erheben und analysieren können, wie Nutzer die Funktion „Autofill“ in Ihren Formularen verwenden.

Die Erkennung von toxischem Verhalten schützt Ihre Nutzer und schafft eine sicherere Onlineumgebung. In Teil 2 lernen wir, wie wir ein clientseitiges KI-Tool erstellen, um unangemessene Inhalte an der Quelle zu erkennen und zu beheben.

In diesem Beitrag wird der Messwert „Total Blocking Time“ (TBT) und seine Messung beschrieben.

Eine detaillierte Anleitung zum Aufschlüsseln des LCP und Identifizierung wichtiger Verbesserungsbereiche

Eine Sammlung von Best Practices, die in Chrome als die größten Möglichkeiten zur Optimierung der Webleistung und Verbesserung der Core Web Vitals identifiziert wurden

Wichtige Messwerte für eine intakte Website

Hier erfahren Sie, wie Sie die Web Vitals Ihrer Website sowohl in der Praxis als auch in einer Laborumgebung messen.

Die CSS-Eigenschaft „content-visibility“ ist jetzt als Baseline Newly verfügbar.

Studien und Methodiken hinter den Core Web Vitals-Grenzwerten

Sie haben sich Ihre Felddaten angesehen und festgestellt, dass die Interaktionen langsam sind. Im nächsten Schritt erfahren Sie, wie Sie diese Interaktionen manuell testen und die Ursachen dafür ermitteln können.

In diesem Artikel erfahren Sie mehr über die Entstehungsgeschichte von Baseline, die Beteiligung von Google und die Inhaberschaft der WebDX-Community-Gruppe.

Erfahre, wie du deine Seiten für sofortige Ladevorgänge optimieren kannst, wenn du die Browserschaltflächen „Zurück“ und „Vorwärts“ verwendest.

Das CSS-Verschachteln wird noch viel besser!

In diesem Beitrag wird der Messwert „First Input Delay (FID)“ vorgestellt und erläutert, wie er gemessen wird.

Hier erfährst du, wie du Leistungsdaten mithilfe von Informationen zur Fehlerbehebung zuordnen kannst, um mit Analysen echte Nutzerprobleme zu erkennen und zu beheben.

Welche Auswirkungen hat @property auf die Leistung Ihres Preisvergleichsportals?

Hier erfahren Sie, wie Sie mit Google-Tools Ihre Core Web Vitals mit dem Werbeumsatz in Beziehung setzen können.

In diesem Beitrag erfahren Sie mehr über das Attribut „load“ (Ladeattribut) und darüber, wie Sie damit das Laden von iFrames steuern können.

Es gibt viele verschiedene Optionen zum Speichern von Daten im Browser. Welche Option ist für Sie am besten geeignet?

Hier lernen Sie die empfohlenen und nicht empfohlenen Methoden kennen, um mehrere PWAs zu erstellen, bei denen dieselbe Domain verwendet wird. Außerdem gibt es Vor- und Nachteile.

In dieser interaktiven Anleitung erfahren Sie, wie Sie einen Server erstellen, der Push-Benachrichtigungsabos verwaltet und Web-Push-Protokollanfragen an einen Push-Dienst sendet.

Kriterien für die Installierbarkeit von progressiven Web-Apps

Was macht eine gute oder großartige progressive Web-App aus?

Symbole, Verknüpfungen, Farben und andere Metadaten im Web-App-Manifest für Ihre PWA ändern

Das Web-App-Manifest ist eine einfache JSON-Datei, die dem Browser mitteilt, wie sich Ihre Webanwendung verhalten soll.

Hier erfahren Sie, wie Sie eine CSP auf Basis von Script-Nonces oder -Hashes als gestaffelte Sicherheitsebenen gegen websiteübergreifende Skripts bereitstellen.

Dieser Artikel hilft Webentwicklern dabei, die richtige Hardware-API für ein bestimmtes Gerät auszuwählen.

Hier erfahren Sie, wie Sie Anfragen zu verwandten Quellen verwenden können, um die Wiederverwendung von Passkeys auf Ihren Websites zu ermöglichen.

Die Auswahl des richtigen Bildformats ist der erste Schritt zur Bereitstellung optimierter Bilder auf Ihrer Website. Dieser Beitrag hilft dir, die richtige Entscheidung zu treffen.

In diesem Beitrag wird das Attribut „load“ erläutert und erklärt, wie es verwendet werden kann, um das Laden von Bildern zu steuern.

Mit benutzerdefinierten Messwerten können Sie die für Ihre Website spezifischen Aspekte der Website messen und optimieren.

Erfahren Sie, wie Sie Web Vitals-Daten an Google Analytics 4-Properties senden und diese für Analysen in BigQuery und Looker Studio exportieren.

In diesem Leitfaden werden Best Practices beschrieben, die Websites beachten sollten, wenn sie Nutzer um die Berechtigung für den Zugriff auf sensible Funktionen wie Kamera, Mikrofon und Standort bitten, um unnötige Aufforderungen zu minimieren und den Zugriff zu blockieren.

Hier erfahren Sie, wie sich Cookie-Hinweise auf die Leistung, Leistungsmessung und Nutzerfreundlichkeit auswirken.

Webentwickler können Medienbenachrichtigungen anpassen und mit der Media Session API auf medienbezogene Ereignisse wie Such- oder Trackänderungen reagieren.

Bevor Sie langsame Interaktionen im Labor reproduzieren können, um die Interaction to Next Paint für Ihre Website zu optimieren, müssen Sie sich auf Felddaten stützen, um sie zu finden. In diesem Leitfaden erfahren Sie, wie das geht.

Verwenden Sie das Attribut tabindex , um die Tabposition eines Elements explizit festzulegen.

Dieser Post stellt den Messwert Time to First Byte (TTFB) vor und erklärt, wie er gemessen wird.

Hier erfahren Sie, wie Sie Ihre Prompts anpassen, um bevorzugte Ergebnisse für verschiedene LLMs, Modelle und Modellgrößen zu erzielen.

In diesem Beitrag wird der Messwert „Interaction to Next Paint“ (INP) vorgestellt und erklärt, wie er funktioniert, wie er gemessen wird, und gibt Verbesserungsvorschläge.

description: Definieren Sie mit der Funktion „light-dark()“ die Farben, die auf das verwendete Farbschema reagieren.

Dieser Leitfaden richtet sich an Webentwickler, die von WebAssembly profitieren möchten. Sie erfahren anhand eines laufenden Beispiels, wie Sie Wasm nutzen können, um CPU-intensive Aufgaben auszulagern.

Im CSS-Raster können Sie mit den Eigenschaften `grid-template-columns` und `grid-template-rows` Liniennamen definieren und die Größe der Rasterspalten bzw. -zeilen verfolgen. Durch die Unterstützung der Interpolation für diese Eigenschaften können Rasterlayouts reibungslos zwischen Zuständen übergehen, anstatt an der Hälfte einer Animation oder eines Übergangs einrasten zu müssen.

Hier erfahren Sie, wie Sie Webspiele mit der Gamepad API steuern.

Die inert-Eigenschaft ist ein globales HTML-Attribut, das das Entfernen und Wiederherstellen von Nutzereingabeereignissen für ein Element vereinfacht, einschließlich Fokusereignisse und Ereignisse aus Hilfstechnologien.

Die vertrauenden Parteien können anhand der AAGUID ermitteln, woher der Passkey stammt. So funktionierts.

Am Beispiel einer synthetischen Spielzeugsprache namens ExampleScript erfahren Sie, wie Sie WebAssembly-Module in JavaScript mit der Binaryen.js API schreiben und optimieren.

Die Audio-/Videoaufnahme ist seit langem der „Heilige Gral“ der Webentwicklung. Viele Jahre lang mussten wir uns auf Browser-Plug-ins wie Flash oder Silverlight verlassen. Komm schon! HTML5 als Retter in der Not Es ist vielleicht nicht

Mit der Webkomponente <model-viewer> können Sie 3D-Modelle auf einer Webseite deklarativ verwenden.

Weitere Informationen zum Verwenden von „userVerification“ in WebAuthn

Weitere Informationen dazu, warum RUM-Daten unterschiedliche Core Web Vitals-Werte von CrUX zeigen können.

Es ist wichtig, Websites zu entwickeln, die inklusiv und für alle zugänglich sind. Es gibt mindestens sechs Hauptbereiche mit Beeinträchtigungen, die optimiert werden können: Seh- oder Hörvermögen, Mobilität, Wahrnehmung, Sprache und neuronale Netze.

Drittanbieter-Skripte bieten eine breite Palette nützlicher Funktionen, die das Web dynamischer machen. Hier erfahren Sie, wie Sie das Laden von Drittanbieter-Skripts optimieren, um deren Auswirkungen auf die Leistung zu reduzieren.

Hier erfahren Sie, wie Sie das Erstellen eines neuen Passkeys verhindern, wenn es im Passwortmanager des Nutzers bereits einen gibt.

Ein Leitfaden zu den Grundlagen von IndexedDB.

Leistungsstarkes und stabiles CSS, das Sie heute nutzen können.

Informationen zum Optimieren des Messwerts „Time to First Byte“.

Was ist der Unterschied zwischen einem Host, einer Website und einem Ursprung? Was ist eine eTLD+1? In diesem Artikel erfahren Sie mehr.

Hier erfahren Sie, was erkennbare Anmeldedaten sind und wie Sie für Ihren Anwendungsfall eine optimale Nutzererfahrung bieten können.

Nutzer bemerken, wenn Websites und Apps nicht richtig funktionieren. Daher ist es wichtig, die Rendering-Leistung zu optimieren.

Mit „ResizeObserver“ werden Sie benachrichtigt, wenn sich die Größe des Inhaltsrechtecks eines Elements ändert, sodass Sie entsprechend reagieren können.

Um unnötige Ressourcendownloads zu vermeiden, können Sie die Ladegeschwindigkeit der Seite am besten verbessern, indem Sie die Gesamtgröße der Downloads minimieren, indem Sie die verbleibenden Ressourcen optimieren und komprimieren.

In diesem Dokument wird erläutert, wie Sie mit der OffscreenCanvas API Leistungsverbesserungen beim Rendern von Grafiken in Ihrer Webanwendung erzielen können.

In diesem Beitrag wird der FCP-Messwert (First Contentful Paint) vorgestellt und erläutert, wie er gemessen wird.

Dieser Artikel bietet einen umfassenden Überblick über Content Delivery Networks (CDNs). Außerdem erfahren Sie, wie Sie eine CDN-Einrichtung auswählen, konfigurieren und optimieren.

Praktische Entwicklerleitfaden zur Vorgehensweise, wenn sich ein Nutzer von der Website abmeldet

In diesem Beitrag wird der Messwert „Zeit bis Interaktivität“ (Time to Interactive, TTI) vorgestellt und erklärt, wie er gemessen wird.

Die Fetch Priority API gibt die relative Priorität von Ressourcen für den Browser an. Sie ermöglichen optimales Laden und verbessern die Core Web Vitals.

Informationen zu den Pseudoklassen „:user-valid“ und „:user-invalid“ und wie sie verwendet werden, um die Nutzererfahrung bei der Eingabevalidierung zu verbessern.

Hier erfahren Sie, wie Entscheidungsträger in Unternehmen und Nicht-Entwickler die Core Web Vitals verbessern können.

Häufige Probleme beim Anwenden der base64-Codierung und -Decodierung auf Strings verstehen und vermeiden.

Subgrid ermöglicht die gemeinsame Nutzung von Rastern, sodass verschachtelte Raster an Ancestors und Verwandten ausgerichtet werden können.

In der heutigen digitalen Welt ist Onlinewerbung ein wichtiger Bestandteil des kostenlosen Webs, das wir alle nutzen. Schlecht implementierte Anzeigen können jedoch zu einer langsameren Browsernutzung führen, Nutzer frustrieren und das Engagement beeinträchtigen. Hier erfahren Sie, wie Sie Anzeigen effektiv laden, ohne die Seitenladegeschwindigkeit zu beeinträchtigen. So sorgen Sie für eine reibungslose Nutzererfahrung und maximieren die Umsatzchancen für Websiteinhaber.

Hier lernen Sie, was Codeabdeckung ist, und lernen vier gängige Methoden zu ihrer Messung kennen.

Bestimmen Sie, was Sie testen müssen und was Sie ausschließen können.

Lege fest, was getestet werden soll, definiere deine Testläufe und setze Prioritäten.

Nutzerorientierte Leistungsmesswerte sind ein wichtiges Tool, um die Nutzerfreundlichkeit Ihrer Website zu verstehen und zu verbessern, sodass echte Nutzer davon profitieren.

Hier erfahren Sie mehr über neue und spannende Möglichkeiten, responsive Bilder vorab zu laden und so für eine optimale Nutzererfahrung zu sorgen.

Eine Methode, um eine Schriftart an die Präferenzen der Nutzenden anzupassen, damit sie Ihren Content so sicher wie möglich lesen können.

Hier erfährst du, wie du verschiedene Testtypen zu einer vernünftigen Strategie kombinieren kannst, die zu deinem Projekt passt.

Beginnen wir mit den Grundlagen! Wir stellen die beiden allgemeinen Testmodi und die drei gängigen Arten der Testautomatisierung vor.

Eine Einführung in WebAssembly (manchmal abgekürzt Wasm), das portierbare Binärcode-Format und das entsprechende Textformat für ausführbare Programme sowie Softwareschnittstellen zur Vereinfachung der Interaktion zwischen solchen Programmen und ihrer Hostumgebung.

Das mkbitmap-C-Programm liest ein Bild und wendet eine oder mehrere der folgenden Vorgänge darauf an, und zwar in dieser Reihenfolge: Inversion, Hochpassfilter, Skalierung und Schwellenwert. Jeder Vorgang kann individuell gesteuert sowie ein- oder ausgeschaltet werden. In diesem Artikel wird beschrieben, wie mkbitmap in WebAssembly kompiliert wird.

Informationen zum sicheren Anzeigen von nutzergesteuertem Content in Webanwendungen

Der Dateisystemstandard führt ein origin privates Dateisystem (OPFS) als Speicherendpunkt ein, der für den Ursprung der Seite privat und für den Nutzer nicht sichtbar ist. Es bietet optionalen Zugriff auf eine spezielle Art von Datei, die für eine

Sie erhalten einen Überblick darüber, wie AVIF im System eingeführt wird und welche Leistungs- und Qualitätsvorteile Entwickler von AVIF bei Standbildern und Animationen erwarten können.

Hier erfahren Sie, wie Sie die Interaction to Next Paint für Ihre Website optimieren.

Informationen zu einigen der Features von Baseline.

Große DOM-Größen können ein Faktor dafür sein, ob Interaktionen schnell sind oder nicht. Hier erfahren Sie mehr über die Beziehung zwischen DOM-Größe und INP und darüber, wie Sie die DOM-Größe reduzieren können, sowie weitere Möglichkeiten, das Rendering einzuschränken, wenn Ihre Seite viele DOM-Elemente enthält.

Die Eingabeverzögerung kann einen erheblichen Teil zur Gesamtinteraktionslatenz beitragen und sich negativ auf die INP Ihrer Seite auswirken. In diesem Leitfaden erfahren Sie, was die Eingabeverzögerung ist und wie Sie sie für eine schnellere Interaktion reduzieren können.

Beim Laden von Skripts braucht der Browser einige Zeit, um sie vor der Ausführung auszuwerten, was zu langen Aufgaben führen kann. Hier erfahren Sie, wie die Skriptauswertung funktioniert und was Sie tun können, um zu verhindern, dass sie während des Seitenaufbaus lange Aufgaben verursacht.

In diesem Beitrag wird der Messwert für Cumulative Layout Shift (CLS) vorgestellt und erläutert, wie er gemessen wird.

Das vollständige, auf PHP basierende WordPress, das ausschließlich im Browser mit WebAssembly ausgeführt wird

Progressive Web-Apps können in App-Shops wie dem Android Play Store oder Microsoft Store eingereicht werden.

Verbessern Sie die Fehlerbehebung im Web mit Quellzuordnungen.

Leistungsstarkes und stabiles CSS, das Sie heute nutzen können.

Mit CSS können Sie Sinus, Kosinus, Tangens und mehr berechnen.

Mit der requestVideoFrameCallback() -Methode können Webautoren einen Callback registrieren, der in den Rendering-Schritten ausgeführt wird, wenn ein neuer Videoframe an den Compositor gesendet wird.

Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).

In diesem Blogpost stellen wir eine neue Sammlung von Mustern für Medien-Apps vor.

Erstellen wir diesen animierten Farbverlaufstexteffekt mit benutzerdefinierten Eigenschaften und Hintergrund-Clip. Rufen Sie CodePen auf und erstellen Sie einen neuen Codepen. Erstellen Sie das Markup für Ihren Text. Verwenden wir als Beispiel eine

Hier erfährst du, wie das scrollbare Buch zum Leben erweckt wurde, weil es in diesem Chrometober lustige und beängstigende Tipps und Tricks zum Leben erweckt hat.

Ein grundlegender Überblick über das Erstellen eines farbanpassungsfähigen und barrierefrei zugänglichen benutzerdefinierten Elements für Kurzinfos.

Passkeys machen die Nutzerkonten einer Website sicherer, einfacher, benutzerfreundlicher und ohne Passwort. In diesem Artikel wird erläutert, wie Sie Nutzern das Erstellen von Passkeys für Ihre Website ermöglichen.

Passkeys machen die Nutzerkonten einer Website sicherer, einfacher, benutzerfreundlicher und ohne Passwort. In diesem Artikel wird erläutert, wie eine Anmeldung ohne Passwort mit Passkeys gestaltet werden sollte, während gleichzeitig bestehende Passwortnutzer berücksichtigt werden können.

Ein grundlegender Überblick über die Erstellung von farbanpassungsfähigen, responsiv und barrierefrei zugänglichen UAS-Komponenten.

Weitere Informationen zum Optimieren von Webschriftarten für Core Web Vitals.

Eine Übersicht über drei Tools und Techniken zum Testen und Verifizieren des barrierefreien Farbkontrasts Ihres Designs.

Erstellen wir einen animierten CSS-Ladevorgang mit benutzerdefinierten Eigenschaften und einer Animation-Timing-Funktion. Rufen Sie CodePen auf und erstellen Sie einen neuen Codepen. Erstellen Sie das Markup für unseren Lader. Beachten Sie die

Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).

In dieser Anleitung wird beschrieben, wie Sie eine barrierefreie Hauptnavigation einer Website erstellen. Sie erfahren mehr über semantisches HTML, Barrierefreiheit und darüber, wie die Verwendung von ARIA-Attributen manchmal mehr schaden als nützen kann.

Mit diesem praktischen CSS-Pseudoselektor können Sie modale Elemente auswählen.

Hier stellen wir Ihnen einige nützliche und kreative Möglichkeiten zum Gestalten einer Liste vor.

Tags und Tag-Manager für Core Web Vitals optimieren

Untersuchen Sie auf unterhaltsame Weise, wie Sie mit CSS optische Täuschungen nachbilden können.

Die Vorteile der Verwendung benutzerdefinierter Eigenschaften in Designsystemen und Komponentenbibliotheken.

Hier erfahren Sie, wie Sie die einzelnen CSS-Eigenschaften für „Übersetzen“, „Rotieren“ und „Skalieren“ verwenden können, um Transformationen auf intuitive Weise anzugehen.

Verschiedene Möglichkeiten zum Animieren eines Rahmens in CSS

Die BBC führt HSTS für ihre Website ein, um die Sicherheit und Leistung zu verbessern. Hier erfährst du, was das bedeutet und wie HSTS dir helfen kann.

Hier erfahren Sie, warum bei Tools, mit denen Core Web Vitals-Messwerte überwacht werden, unterschiedliche Zahlen gemeldet werden und wie Sie diese Unterschiede interpretieren.

GDE Enrique Fernandez Guerra über die Open-Source-Bereitstellung seiner Nichtregierungsorganisation HelpDev.

Die Einstellung der Unterstützung für Internet Explorer bedeutete für die Kunden und Entwickler von Maersk.com.

Schön, Sie kennenzulernen.

Hier erfahren Sie, wie Sie eigene Cookies setzen, um für Sicherheit und browserübergreifende Kompatibilität zu sorgen und das Risiko von Fehlern zu minimieren, sobald Drittanbieter-Cookies auslaufen.

Mit dem Web Audio API ist es möglich, die AV-Synchronisierung ordnungsgemäß durchzuführen.

Mit konischen Farbverläufen lassen sich interessante Effekte erzielen, wie in diesem Beispiel für einen schönen Rahmen. In diesem CodePen von Adam Argyle, das ursprünglich über diesen Tweet auf Twitter geteilt wurde, wird gezeigt, wie Sie mit einem

Abfangen von Fehlern bei der Arbeit mit der Fetch API

Unterschiede zwischen Frameworks und Bibliotheken im Kontext einer clientseitigen JavaScript-Umgebung verstehen

Informationen zu den Entscheidungen bei der Verwendung einer JavaScript-Bibliothek oder eines JavaScript-Frameworks

Mit dieser Ressource können Sie sich schnell am Terminal zurechtfinden.

Update zur Google Fonts CSS API: Funktionsweise, Verwendung und effiziente Bereitstellung von Webschriftarten

GOV.UK hat seine jQuery-Abhängigkeit vom Front-End entfernt. Du errätst nie, was passiert ist. (Ja, natürlich.)

Ein grundlegender Überblick über die Erstellung von farbanpassungsfähigen, responsiv und barrierefrei zugänglichen Komponenten.

Hier erfährst du, was der Vorabladescanner des Browsers ist, wie er die Leistung verbessert und wie du ihn vermeiden kannst.

Einfachere Entwicklung für das Web

So messen Sie Web Vitals mit Ihrem aktuellen Analysetool

Web Google Developers-Experten darüber, wie sie durch Mentoringprogramme zu führenden Unternehmen wurden.

Ein praktischer Leitfaden zu variablen Schriftarten mit vielen Beispielen.

Mit diesem Tool von Josh W Comeau lassen sich ganz einfach optisch ansprechende Farbverläufe erstellen.

Eine Sammlung von Erkenntnissen zu den wichtigsten Problemen, die in Einzelgesprächen mit Webentwicklern gesammelt wurden.

Sehen Sie sich den Status der Bildtools an.

Informieren Sie sich über den Umfang und seine Funktionsweise in JavaScript.

Eine grundlegende Übersicht dazu, wie Sie mit dem „modal“-Element farbadaptiv, responsiv und barrierefrei nutzbare Mini- und Mega-Modals erstellen.

Informationen zum Beheben von Fehlern bei der Medienwiedergabe im Web

Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).

Wenn Sie Bilder im ursprünglichen Viewport sofort laden und den Rest großzügig per Lazy Loading, können Sie die Web Vitals verbessern und gleichzeitig weniger Bytes laden.

Grundlegender Überblick über das Erstellen einer adaptiven und barrierefreien Ladeleiste mit dem Element „``.

Halten Sie Ihre Registrierungs- und Anmeldeformulare so einfach wie möglich. Speichern Sie Anmeldedaten aus Anmeldeformularen, damit sich Nutzer bei der Rückkehr nicht noch einmal anmelden müssen. So speichern Sie Anmeldedaten von Nutzern aus

Änderungen am User-Agent-String, Maßnahmen von Chrome und Firefox, um die Auswirkungen abzuschwächen, und wie du helfen kannst

Ein grundlegender Überblick über die Erstellung eines adaptiven Favicons.

Hier erfahren Sie, wie Sie mit WebAssembly mit Emscripten 2D-Grafiken auf einem Canvas rendern können.

Wenn Sie den Header „Cache-Control“ vergessen oder missbrauchen, kann dies die Sicherheit Ihrer Website und den Datenschutz Ihrer Nutzer beeinträchtigen. Erhalten Sie Empfehlungen für hochwertige Websites.

Wichtige Messwerte für eine intakte Website

Hier erfährst du, wie gPhoto2 in WebAssembly übertragen wurde, um externe Kameras über USB über eine Web-App zu steuern.

Mit Network Error Logging (NEL) können Sie clientseitige Netzwerkfehler erfassen.

Hier erfährst du, wie du die neuesten WebAssembly-Funktionen verwendest und gleichzeitig Nutzer in allen Browsern unterstützt.

Hier erfahren Sie, wie Code, der mit externen Geräten interagiert, mit WebAssembly und Fugu APIs ins Web portiert werden kann.

Grundlegende Informationen zum Erstellen einer adaptiven und barrierefreien Komponente für den Designschalter.

Hier erfahren Sie, wie Sie JavaScript-Code in Ihre WebAssembly-Bibliothek einbetten, um mit der Außenwelt zu kommunizieren.

Oculus Quest 2 ist ein Virtual-Reality-Headset von Oculus, einem Unternehmen von Meta. Entwickler können jetzt progressive 2D- und 3D-Web-Apps (PWAs) entwickeln und vertreiben, die die Multitasking-Funktion von Oculus Quest 2 nutzen. In diesem Artikel wird beschrieben, wie du deine PWA mit Oculus Quest 2 erstellen, per Sideload übertragen und testen kannst.

Hier erhalten Sie einen Einblick in die Prozesse und Tools, mit denen Designcember wie ein Weihnachtskalender gestaltet wurde.

Ein skeuomorpher Versuch, einen Solarrechner im Web nachzubilden, der den Umgebungslichtsensor und die Overlay-Funktion der Fenstersteuerung nutzt.

Am längsten musste man auf Problemumgehungen und Bibliotheken zurückgreifen, um eine tiefe Kopie eines JavaScript-Werts zu erstellen. Die Plattform wird jetzt mit `structuredClone()` ausgeliefert, einer integrierten Funktion für Deep-Copying.

Ein grundlegender Überblick über das Erstellen einer adaptiven und barrierefreien Toast-Komponente.

Wir kündigen den UI-Fonds von Chrome an, um Zuschüsse für Personen bereitzustellen, die an Designtools, CSS und HTML arbeiten.

Grundlegende Informationen zum Erstellen eines responsiven, adaptiven und barrierefrei zugänglichen 3D-Spielemenüs.

Probieren Sie eine neue Lighthouse API aus, um die Leistung und Best Practices im gesamten Nutzerfluss zu messen.

Erfahren Sie mehr über die neuesten Funktionen von PageSpeed Insights, um die Qualität Ihrer Seite und Website besser messen und optimieren zu können.

Hier finden Sie Informationen zum Messen von Animationen, zu Animationsframes und zur allgemeinen Seitenflüssigkeit.

Eine Zusammenfassung aller wichtigen Ankündigungen vom Chrome Dev Summit 2021 mit Links zu weiteren Informationen.

In den letzten drei Jahren hat Chrome daran gearbeitet, Webanwendungen zu unterstützen, die die Grenzen des Möglichen im Browser erweitern möchten. Eine solche Webanwendung ist Photoshop. Die Idee, Software so komplex wie Photoshop direkt im Browser auszuführen, war noch vor wenigen Jahren kaum vorstellbar. Mithilfe verschiedener neuer Webtechnologien hat Adobe jedoch jetzt eine öffentliche Betaversion von Photoshop im Web veröffentlicht.

Ein grundlegender Überblick über die Erstellung einer responsiven, adaptiven und zugänglichen Mehrfachauswahl-Komponente zum Sortieren und Filtern von Nutzererfahrungen.

Machen Sie sich mit den Grundlagen der Verwendung der Navigation API und der Resource Timing API vertraut, um die Ladeleistung vor Ort zu bewerten.

Die neue Sanitizer API zielt darauf ab, einen robusten Prozessor für beliebige Strings zu erstellen, die sicher in eine Seite eingefügt werden können. In diesem Artikel erhalten Sie eine Einführung in die API und ihre Verwendung.

In diesem Dokument werden Best Practices für die Leistung beschrieben, die Sie beim Laden von Einbettungen von Drittanbietern anwenden können, effiziente Ladetechniken und das Tool „Layout Shift Terminator“, mit dem Layout Shifts für beliebte Einbettungen reduziert werden können.

Antworten auf häufig gestellte Fragen zu SPAs, Core Web Vitals und dem Plan von Google, die aktuellen Messeinschränkungen zu bewältigen.

preventDefault und stopPropagation: Wann welche Methode verwendet werden sollte und was genau sie bewirkt. Die JavaScript-Ereignisbehandlung ist oft unkompliziert. Das gilt insbesondere bei einer einfachen (relativ flachen) HTML-Struktur. Etwas

Hier erfährst du, wie du verschiedene Arten von Assets aus JavaScript so importieren und bündeln kannst, dass sie sowohl in Browsern als auch in Bundlern funktionieren.

Ein grundlegender Überblick über die Erstellung einer barrierefreien Komponente für eine geteilte Schaltfläche.

Hier erfahren Sie, wie Sie CSS-Modulskripts verwenden, um CSS-Stylesheets mit derselben Syntax wie JavaScript-Module zu importieren.