Der naheliegende Schritt nach dem Empfangen und Speichern einer PushSubscription auf unserem Server ist das Auslösen einer Push-Nachricht. Es gibt jedoch eine Sache, die ich ganz bewusst verschwiegen habe. Die Nutzerfreundlichkeit, wenn Sie die

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

Es kann schwierig sein zu entscheiden, wann eine Polyfill verwendet werden sollte. Die Verwendung von Baseline-Funktionen kann Ihnen bei dieser Entscheidung helfen. Weitere Informationen findest du in diesem Leitfaden.

Hier erfahren Sie mehr über das Web Platform Dashboard und wie Sie die HTTP API abfragen können, um Daten zu Funktionen abzurufen, die den Baseline-Status erreicht haben, um Tools für Ihren Entwicklungsworkflow zu erstellen.

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.

„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.

WasmFS und die mimalloc-Funktion in Emscripten können die Allokation und E/A-Leistung erheblich verbessern. In diesem Leitfaden erfahren Sie, wie diese Funktionen in einigen Fällen zu einer Geschwindigkeitssteigerung von mehr als 10 fach führen können.

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.

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?

Eine Zahlungstransaktion über Web Payments beginnt damit, dass Ihre Zahlungs-App gefunden wird. Hier erfahren Sie, wie Sie eine Zahlungsmethode einrichten und Ihre Zahlungs-App für Händler und Kunden für Zahlungen vorbereiten.

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.

Sie sollten Ihre Ressourcen regelmäßig prüfen, um sicherzustellen, dass jede Ressource zu einer besseren Nutzererfahrung beiträgt.

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. Er 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.

Das Rendern von HTML mit JavaScript unterscheidet sich vom Rendern von HTML, das vom Server gesendet wird. Dies kann die Leistung beeinträchtigen. In diesem Leitfaden erfahren Sie mehr über den Unterschied und darüber, was Sie tun können, um die Rendering-Leistung Ihrer Website zu erhalten, insbesondere wenn es um Interaktionen geht.

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

Eine Präsentation der Tools, die dank WebAssembly jetzt im Web verfügbar sind.

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, nutzerfreundlicher und passwortlos. In diesem Dokument wird beschrieben, wie Sie Nutzern erlauben, Passkeys für Ihre Website zu erstellen.

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.

Verwenden Sie nur eine Codezeile, um den integrierten HTML-Formulareingaben die Farbe Ihrer Marke zu verleihen.

Eine grundlegende Übersicht zum Erstellen einer responsiven und barrierefreien Switch-Komponente.

Mithilfe einer Reihe von Client-Hinweis-Headern können Websites die Medieneinstellungen des Nutzers optional bei der Anfrage abrufen, sodass Server aus Leistungsgründen das richtige CSS einfügen können. CSS-Medienabfragen und insbesondere

Ein grundlegender Überblick darüber, wie Sie eine responsive und zugängliche Breadcrumbs-Komponente erstellen, mit der Nutzer auf Ihrer Website navigieren können.

Hier erfahren Sie, wie Sie Multithread-Anwendungen, die in anderen Sprachen geschrieben sind, in WebAssembly einbinden.

Hier lernen Sie die Konzepte der digitalen Rechteverwaltung und die erforderlichen Befehle kennen, um aus einer MOV-Rohdatei zu verschlüsselten Medien zu gelangen, die für MPEG-DASH oder HLS mit Clear Key- oder Widevine-Verschlüsselung verpackt sind.

Das Erstellen einer PWA mit Offline-Streaming bringt einige Herausforderungen mit sich. In diesem Artikel erfahren Sie mehr über APIs und Techniken, die Nutzern eine hochwertige Offline-Medienerfahrung bieten.

Mit Media-Streaming werden Multimedia-Inhalte kontinuierlich von einem Server geliefert, bei dem der Inhalt in einzelne Datenblöcke aufgeteilt wurde, die während der Wiedergabe in einer bestimmten Reihenfolge über eine Bereichsanfrage mit Protokollen wie DASH und HLS wieder verbunden werden können.

Medien-Frameworks gibt es sowohl als proprietäre als auch als Open-Source-Plattform. Im Kern besteht ihr Kern aus einer Reihe von APIs, die die Audio- und/oder Videowiedergabe für verschiedene Containerformate und Übertragungsprotokolle unterstützen.

Ein grundlegender Überblick über die Einrichtung eines dynamischen und konfigurierbaren Farbschemas

Beim Laden einer Webschriftart kannst du jetzt ihre Größe anpassen, um die Schriftgrößen des Dokuments zu normalisieren und Layoutverschiebungen beim Wechseln zwischen Schriftarten zu verhindern

Wenn Sie Bilder in Desktopgröße auf Mobilgeräten bereitstellen, können zwei- bis viermal mehr Daten als nötig verbraucht werden. Anstelle eines "One-Size-fits-all"-Ansatzes für Bilder können Sie unterschiedliche Bildgrößen für unterschiedliche Geräte bereitstellen.

Ab heute wurde eine CLS-Änderung für verschiedene Oberflächen von Chrome-Webtools eingeführt, darunter Lighthouse, PageSpeed Insights und der UX-Bericht für Chrome.

In diesem Artikel werden Verfahren im Zusammenhang mit Preisvergleichsportalen zur Optimierung von Web Vitals beschrieben.

Diese scheinbar kleinen Ergänzungen der Syntax von CSS-Selektoren werden eine große Wirkung haben.

Ab sofort gibt es ein neues, sechsteiliges Training zu progressiven Web-Apps mit einer neuen Reihe von Codelabs, in denen du lernst, wie du zuverlässige, installierbare und kompatible PWAs erstellst.

Auf Nutzerpräferenzen basierende Medienfunktionen, Containerabfragen und Medienabfragen für neue Bildschirmtypen, z. B. faltbare Displays, werden uns ermöglichen, eine neue Ära des responsiven Webdesigns zu nutzen.

Strategien für die Migration Ihrer Website von der Nutzung des User-Agent-Strings zu den neuen User-Agent-Client-Hints

In diesem Artikel werden die wichtigsten Sicherheitsheader aufgeführt, mit denen Sie Ihre Website schützen können. Er enthält Informationen zu webbasierten Sicherheitsfunktionen, zu ihrer Implementierung auf Ihrer Website und als Referenz, wenn Sie eine Erinnerung benötigen.

Zusammenfassung des Vortrags von Thomas Steiner bei der Google I/O 2021 mit dem Titel „Excalidraw and Fugu: Accelerate Core User Journeys“

Service Worker können statische Importe von ES-Modulen verwenden, um zusätzlichen Code als Alternative zu importScripts() einzufügen.

Eine grundlegende Übersicht zum Erstellen einer responsiven horizontalen Bildlaufleiste für Fernseher, Smartphones, Computer usw.

Heute stellen wir euch neue Toolfunktionen in Lighthouse, PageSpeed und DevTools vor, mit denen ihr herausfinden könnt, wie eure Website die Web Vitals verbessern kann.

Informationen zum Aufrufen asynchroner Web-APIs beim Kompilieren traditionell synchroner Sprachen in WebAssembly

Drittanbieter-Skripts, sogenannte Tags, können eine Ursache für Leistungsprobleme auf Ihrer Website sein und somit ein Ziel für die Optimierung sein. Bevor Sie mit der Optimierung der hinzugefügten Tags beginnen, sollten Sie jedoch sicherstellen, dass Sie keine Tags optimieren, die Sie gar nicht benötigen. In diesem Artikel erfahren Sie, wie Sie Anfragen für neue Tags bewerten sowie vorhandene Tags verwalten und überprüfen.

Mit der Funktion „Fenstersteuerungs-Overlay“ können Entwickler die Titelleiste installierter PWAs so anpassen, dass sie wie Apps aussehen.

Die WebOTP API kann jetzt ein OTP aus einem iFrame empfangen.

Das DataTransfer-Objekt enthält Daten, die während eines Drag & Drop-Vorgangs gezogen werden. Sie kann ein oder mehrere Datenelemente mit einem oder mehreren Datentypen enthalten. In diesem Artikel wird erläutert, was Sie mit der DataTransfer API tun können.

Ein grundlegender Überblick über das Erstellen von geteilten Buchstaben und Wortanimationen.

Es ist geplant, den CLS-Messwert so zu verbessern, dass er gegenüber langlebigen Seiten fairer wird.

Web Developer Satisfaction ist ein Google-Projekt, mit dem Informationen zu den Anforderungen von Webentwicklern gesammelt werden. Das Ziel ist eine zuverlässigere, vorhersehbarere und interoperablere Webplattform, die es Entwicklern ermöglicht, in sie zu investieren und darauf zu vertrauen sowie neue Funktionen einzuführen und zu nutzen, um die Plattform und ihr Geschäft auszubauen.

Eine grundlegende Übersicht zum Erstellen einer Einstellungskomponente mit Schiebereglern und Kästchen.

Den Wert von 'Dies' zu ermitteln, kann in JavaScript schwierig sein. Gehen Sie wie folgt vor...

Dieses Kapitel enthält Hintergrundinformationen zu H5-Apps und QuickApp, die sich von Mini-Apps unterscheiden.

Dieses Kapitel enthält Details zu den Komponenten, die auf allen Mini-App-Plattformen verfügbar sind.

In diesem Kapitel wird eine Auswahl interessanter Open-Source-Projekte für Mini-Apps vorgestellt.

In diesem Kapitel werden die Optionen für Markup, Stile, Skripte und Updates für verschiedene Mini-Apps-Plattformen beschrieben.

Dieses Kapitel schließt die Sammlung der Mini-Apps mit der Beobachtung, dass unkonventionelle Ideen und Anregungen von außerhalb des eigenen Bereichs hilfreich sein können, um eine bessere Zukunft im Web zu gestalten.

Dieses Kapitel zeigt ein Beispielprojekt, das dem Ansatz „Programmieren mit der Mini-App“ folgt.

In diesem Kapitel wird die Art der Programmierung der Mini-App vorgestellt.

In diesem Kapitel werden die Projektstruktur, der Lebenszyklus und die Bündelung von Mini-Apps behandelt.

Mit der Streams API kann JavaScript programmatisch auf Datenströme zugreifen, die über das Netzwerk empfangen werden, und sie nach Bedarf verarbeiten.

Eine grundlegende Übersicht über die Erstellung einer Tab-Komponente ähnlich der in iOS- und Android-Apps.

Die ursprungsübergreifende Isolierung ermöglicht es einer Webseite, leistungsstarke Funktionen wie „SharedArrayBuffer“ zu nutzen. In diesem Artikel wird erläutert, wie du die ursprungsübergreifende Isolierung auf deiner Website aktivierst.

Der Header „Origin-Agent-Cluster“ unterbindet den synchronen Zugriff auf andere Ursprünge in derselben Domain und weist den Browser darauf hin, dass für Ihren Ursprung dedizierte Ressourcen zur Verfügung stehen.

Mit der neuen CSS-Eigenschaft für das Seitenverhältnis kann das Seitenverhältnis innerhalb von Bildern und Elementen jetzt einfacher beibehalten werden.

Hier erfahren Sie, wie Sie die Leistung und Nutzerfreundlichkeit von Karussells optimieren.

Ein kurzer Überblick über die Geschichte, Architektur, Anwendungsfälle und Zukunft von WebRTC.

Die Verwendung von http://localhost für die lokale Entwicklung ist in den meisten Fällen in Ordnung, mit Ausnahme einiger Sonderfälle. In diesem Beitrag wird erläutert, wann Sie Ihre lokale Entwicklungswebsite mit HTTPS ausführen müssen. Weitere

Informieren Sie sich über unsere Pläne zur Verbesserung des Messwerts „Cumulative Layout Shift“ und geben Sie uns Feedback.

In den meisten Fällen verhält sich http://localhost zu Entwicklungszwecken wie HTTPS. Es gibt jedoch einige Sonderfälle, z. B. benutzerdefinierte Hostnamen oder die Verwendung sicherer Cookies in verschiedenen Browsern, bei denen Sie Ihre

Eine grundlegende Übersicht zum Erstellen einer responsiven ausblendbaren Seitenleiste

Hier erfahren Sie, wie Sie eine responsive Layoutkomponente für das ausblendbare seitliche Navigationslayout erstellen.

Im Rahmen einer Reihe von Tests werden fünf Verfahren zur Zentrierung durchgeführt, um herauszufinden, welche am zuverlässigsten von einer Änderung betroffen ist.

Lernen Sie fünf verschiedene Zentrierungstechniken mit CSS kennen.

Die Leistung beim ersten Laden ist wichtig, aber nicht alles. Nutzer, die Ihre Website ein zweites Mal laden, verwenden ihren Cache, um auf Ihre Inhalte zuzugreifen. Daher ist es wichtig, dass die Website schnell und korrekt funktioniert.

Erfahren Sie, wie Sie browserübergreifende Houdini Paint APIs implementieren, und erkunden Sie mit Houdini.how die Welt der Houdini-Arbeitlets.

Best Practices für Adressformulare

Nutzen Sie plattformübergreifende Browserfunktionen, um ein einfaches Anmeldeformular zu erstellen, das sicher, leicht zugänglich und benutzerfreundlich ist.

Ermöglichen Sie Ihren Nutzern eine einfache Registrierung, Anmeldung und Verwaltung ihrer Kontodetails.

Eine gängige Methode zur Bestätigung der Telefonnummer eines Nutzers ist die Eingabe eines Einmalpassworts, das per SMS zugestellt wird. In diesem Beitrag erfährst du, wie du ein nutzerfreundliches SMS-OTP-Formular erstellen kannst.

Best Practices für Zahlungsformulare

Ein neues modulares Tool, mit dem sich Leistungsdaten automatisch aus mehreren Quellen erfassen lassen.

Maximieren Sie die Anzahl der Conversions, indem Sie Nutzern das Ausfüllen von Adress- und Zahlungsformularen so schnell und einfach wie möglich machen.

Informationen zum Kommunizieren von Fenster- und Service Workern zur Ausführung von Aufgaben in Bezug auf Leistung, Caching und Offline.

Wie Service Worker proaktiv mit der Seite kommunizieren können, um über bestimmte Ereignisse zu informieren.

Einbinden eines Kommunikationskanals zwischen der Seite und dem Service Worker einrichten

Wie Web Worker und Service Worker die Leistung Ihrer Website verbessern können und wann Sie Web Worker und Service Worker verwenden

Webanwendungen können jetzt die Mausbeschleunigung beim Erfassen von Zeigerereignissen deaktivieren.

Ein grundlegender Überblick darüber, wie du eine ähnliche Nutzererfahrung wie Instagram Stories im Web bietest.

Hier erfährst du, wie du ähnliche Funktionen wie Instagram Stories im Web erstellst.

Dieser Beitrag enthält eine Anleitung zur Verwendung des Ladeattributs in Content-Management-Systemen.

Die Definition von "same-site" wird um das URL-Schema weiterentwickelt, sodass Links zwischen HTTP- und HTTPS-Versionen einer Website jetzt als websiteübergreifende Anfragen gezählt werden. Führen Sie nach Möglichkeit ein Upgrade auf HTTPS durch, um Probleme zu vermeiden, oder lesen Sie weiter, um zu erfahren, welche SameSite-Attributwerte erforderlich sind.

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

Eine interaktive Schritt-für-Schritt-Anleitung, in der Sie erfahren, wie Sie einen Client erstellen, der Push-Benachrichtigungen für den Nutzer abonniert, Push-Nachrichten als Benachrichtigung anzeigt und den Nutzer von Push-Benachrichtigungen abbestellt.

Eine Übersicht darüber, was Push-Benachrichtigungen sind, warum sie verwendet werden können und wie sie funktionieren.

Erfassen der Offlinenutzung Ihrer Website, damit Sie begründen können, warum Ihre Website eine bessere Offlinenutzung erfordert

Ein Video, in dem gezeigt wird, wie mit Hochleistungstechniken komplexe und schöne Animationen erstellt werden können.

Min, Max und Clamp bieten leistungsstarke CSS-Funktionen, die eine reaktionsschnellere Gestaltung mit weniger Code-Sperren ermöglichen. In diesem Beitrag erfahren Sie, wie Sie mit diesen gut unterstützten mathematischen CSS-Funktionen die Größe von Elementen steuern, den richtigen Abstand einhalten und eine fließende Typografie implementieren können.

Ein SXG ist ein Übermittlungsmechanismus, der es ermöglicht, den Ursprung einer Ressource unabhängig von der Bereitstellung zu authentifizieren.

Neue Kurzzeichen für logische Properties und neue Einblendungseigenschaften für Chromium.

Gute Animationen sind das Herzstück einer guten Weberfahrung. In diesem Beitrag wird erklärt, warum bestimmte Arten von Animationen besser abschneiden als andere.

Der Service Worker muss wissen, was zu tun ist, wenn eine Teilantwort angefordert wird.

Um die Leistung Ihrer CSS-Animationen zu verbessern, sollten Sie die CSS-Eigenschaften „transform“ und „opacity“ so weit wie möglich verwenden und alles vermeiden, was Layout oder Painting auslöst.

Die Funktionen zum Schwenken, Neigen und Zoomen von Kameras können jetzt auch im Web gesteuert werden.

Ursprungstests sind eine Möglichkeit, neue oder experimentelle Webplattformfunktionen zu testen. Mit einem Drittanbieter-Ursprungstest können Anbieter eingebetteter Inhalte eine neue Funktion auf mehreren Websites ausprobieren. Ursprungstests sind

Getrennte Fenster sind eine häufige Art von Speicherlecks, die besonders schwer zu finden und zu beheben sind.

Hier erfahren Sie, wie Sie eine einfache Offline-Nutzung für Ihre App erstellen.

Mit Clipping in CSS können wir uns von allem in unseren Designs entfernen, das wie ein Kasten aussieht. Mithilfe verschiedener Grundformen oder einer SVG-Datei kannst du einen Clippfad erstellen. Schneiden Sie dann die Teile des Elements aus, die Sie nicht zeigen möchten.

Verwenden Sie CSS, um die Farbe, Größe oder Art von Zahlen oder Aufzählungszeichen in Elementen anzupassen.

Wenn Sie Anfragen an /.well-known/change-password an die URL zur Passwortänderung weiterleiten, können Nutzer ihre Passwörter einfacher als bisher aktualisieren.

Sobald eine webbasierte Zahlungs-App registriert ist, können Zahlungsanforderungen von Händlern akzeptiert werden. In diesem Artikel erfahren Sie, wie Sie eine Zahlungstransaktion von einem Service Worker während der Laufzeit orchestrieren.

Sobald eine webbasierte Zahlungs-App registriert ist, können Zahlungsanforderungen von Händlern akzeptiert werden. In diesem Artikel erfahren Sie, wie Sie eine Zahlungstransaktion von einem Service Worker während der Laufzeit orchestrieren.

Wie unangebrachte Screenreader-Hilfe die Barrierefreiheit heilt, wenn sie nicht mit Salz verreibt!

Hier erfahren Sie, wie Sie mit WebAssembly Bibliotheken, die in anderen Sprachen geschrieben wurden, sicher und idiomatisch im Web verwenden.

Mit der CSS-Eigenschaft „content-visibility“ können Sie die Leistung beim Rendern von Webinhalten verbessern, indem das Rendern von Inhalten außerhalb des Bildschirms übersprungen wird. In diesem Artikel erfahren Sie, wie Sie diese neue CSS-Eigenschaft mit dem Keyword „auto“ für kürzere Ladezeiten verwenden. Außerdem erfahren Sie mehr über die CSS-Begrenzungsspezifikation und andere Werte für die Sichtbarkeit von Inhalten, mit denen Sie besser steuern können, wie Ihre Inhalte im Browser gerendert werden.

Die Async Clipboard API vereinfacht das berechtigungsfreundliche Kopieren und Einfügen.

Sie können die Verweisrichtlinie "strict-origin-when-cross-origin" festlegen. Dadurch wird ein großer Teil der Nützlichkeit der Verweis-URL erhalten und gleichzeitig wird das Risiko von Datenlecks verringert.

Hier erfährst du, wie verschiedene Komponenten verwendet werden können, um Webinhalte in Android-Apps zu rendern.

Was das Bulletin-Team bei der Entwicklung einer PWA über Service Worker gelernt hat.

Hier erfahren Sie, wie Sie Lighthouse CI einrichten und in Entwicklerworkflows einbinden.

Mehr Sicherheit und eine bessere Nutzererfahrung für Google-Konten

Hier erfahren Sie, wie Sie benutzerdefinierte CSS-Eigenschaften mit semantischer Eingabe, Fallback-Wert und mehr direkt in Ihrer CSS-Datei implementieren.

Hier erfährst du, wie du deine webbasierte Zahlungs-App für Web Payments anpasst und deinen Kunden eine bessere Nutzererfahrung bietet.

Hier erfahren Sie, wie Sie eine webbasierte Zahlungs-App im Browser eines Kunden registrieren. Außerdem lernen Sie, wie Sie Fehler beheben.

Die Vor- und Nachteile einer konsistenten oder unterschiedlichen Ablauflogik auf der Ebene des Service Worker-Cache und des HTTP-Cache.

Hier erfahren Sie, wie Sie Ihre Android-Zahlungs-App ändern können, um dem Nutzer die ausgewählte Versandadresse und Kontaktdaten bereitzustellen, wenn der Händler diese über die Payment Request API angefordert hat.

Nutzen Sie A/B-Tests, um die Auswirkungen der Websitegeschwindigkeit auf Ihre Geschäftsmesswerte zu bewerten.

Der UX-Bericht für Chrome (auch als CrUX bezeichnet) ist ein öffentliches Dataset mit echten Daten zur Nutzererfahrung auf Millionen von Websites. Im Gegensatz zu Labdaten stammen die CrUX-Daten tatsächlich von angemeldeten Nutzern.

Navigationsanfragen sind HTML-Anfragen, die erfolgen, wenn Sie eine neue URL in die Navigationsleiste eingeben oder einem Link auf einer Seite folgen. Hier haben Service Worker den größten Einfluss auf die Leistung: Wenn Sie einen Service Worker verwenden, der antwortet, ohne auf das Netzwerk warten zu müssen, sorgen Sie dafür, dass die Navigation zuverlässig schnell und stabil ist.

In diesem Beitrag werden einige leistungsstarke CSS-Zeilen vorgestellt, die Ihnen einen Großteil der Arbeit abnehmen und Ihnen helfen, robuste moderne Layouts zu erstellen.

Seit Chrome 84 unterstützt ResizeObserver eine neue Feldmessung namens device-pixel-content-box, die die Abmessung des Elements in physischen Pixeln misst. Dies ist entscheidend für das Rendering pixelgenauer Grafiken, insbesondere im Kontext von hochauflösenden Bildschirmen.

Eine Zusammenfassung der wichtigsten Neuigkeiten und Updates, die bei unserer dreitägigen Online-Community-Veranstaltung angekündigt wurden, und eine Erinnerung an anstehende regionale Veranstaltungen.

Verwenden Sie plattformübergreifende Browserfunktionen, um Anmeldeformulare zu erstellen, die sicher, barrierefrei und nutzerfreundlich sind.

Verwenden Sie plattformübergreifende Browserfunktionen, um ein einfaches Anmeldeformular zu erstellen, das sicher, barrierefrei und nutzerfreundlich ist.

Hier erfährst du, wie du deine progressive Web-App nach und nach optimieren kannst, damit sie in allen modernen Browsern funktioniert und gleichzeitig erweiterte Funktionen für Browser bietet, die neue Webfunktionen wie den Zugriff auf das Dateisystem, die Systemzwischenablage, das Abrufen von Kontakten, regelmäßige Hintergrundsynchronisierung, Bildschirm-Wakelock, Webfreigabefunktionen und vieles mehr unterstützen.

SEO-Probleme auf einzelnen Seiten oder auf der gesamten Website beheben

Hier erfahren Sie, wie Sie mit Workbox mithilfe der Hintergrundsynchronisierung und der Push API eine stabile Suche implementieren.

Betten Sie mithilfe der Tags und eine Mediendatei in eine Webseite ein.

Mit Textfragmenten können Sie ein Text-Snippet im URL-Fragment angeben. Wenn Sie zu einer URL mit einem solchen Textfragment navigieren, kann der Browser es hervorheben und/oder dem Nutzer ins Auge fassen.

Hier erfährst du, wie du deine progressive Web-App wie eine echte App gestalten kannst, indem du plattformspezifische App-Muster mit Webtechnologien implementierst.

Wenn Sie Browseranbieter über Probleme informieren, die Sie in ihrem Browser, auf einem bestimmten Gerät oder auf einer bestimmten Plattform finden, ist ein wesentlicher Bestandteil zur Verbesserung der Webplattform.

Mit dem RAIL-Modell können Designfachkräfte und Entwickler zuverlässig die Arbeiten zur Leistungsoptimierung ausrichten, die die größte Auswirkung auf die User Experience haben. Hier erfahren Sie, welche Ziele und Richtlinien das RAIL-Modell festlegt und mit welchen Tools Sie diese erreichen können.

Quicklink ist eine Bibliothek, mit der Seiten schneller geladen werden können, indem Links im Darstellungsbereich bei Inaktivität vorab abgerufen werden.

Fetch Metadata ist eine neue Webplattformfunktion, mit der sich Server vor ursprungsübergreifenden Angriffen schützen können.

Bei der Erstellung eines Layouts mithilfe von CSS muss darauf geachtet werden, dass es für Nutzer, die mit der Tastatur navigieren, nicht zu einer getrennten Erfahrung kommt.

Jetzt wird es viel einfacher, Ihre Webanimationen umzuschreiben.

Web Payments soll Nutzern eine reibungslose Zahlungsabwicklung im Web ermöglichen. Hier erfährst du, wie die App funktioniert und welche Vorteile sie bietet, und bereite dich vor, deine Zahlungs-App in Web Payments zu integrieren.

Hier erfährst du, wie du deine Android-Zahlungs-App an Web Payments anpassen und Kunden so eine bessere Nutzererfahrung bieten kannst.

Hier erfahren Sie, wie Händler Zahlungs-Apps einbinden, wie Zahlungstransaktionen mit der Payment Request API funktionieren und was mit Webzahlungen möglich ist.

In Chromium 80 gab es unter macOS eine Regression der Schriftstärke über die System-UI. Der Grund für den Fehler und die neuen Super-Funktionen, die nach der Auflösung verfügbar sind, lohnen sich das Warten in Chromium 83.

Über App-Verknüpfungen können Nutzer schnell auf eine Reihe häufiger Aktionen zugreifen.

Erstellen Sie ein solides Business Case für Ihre PWA. Hier erfahren Sie, wann Sie investieren sollten und wie Sie den Erfolg messen können.

Details zu Chrome und anderen Browsern, in denen AppCache entfernt wird

Nichtflüchtiger Speicher kann dazu beitragen, wichtige Daten vor der Bereinigung zu schützen und das Risiko von Datenverlusten zu verringern.

Best Practices für die Kombination verschiedener Installationsangebote, um die Installationsraten zu erhöhen und Plattformwettbewerb und Kannibalisierung zu vermeiden.

CommonJS-Module sind sehr dynamisch, was verhindert, dass JavaScript-Optimierer und Bundles erweiterte Optimierungen durchführen.

Einige Web-APIs erhöhen das Risiko von Seitenkanalangriffen wie Spectre. Um dieses Risiko zu mindern, bieten Browser eine isolierte Umgebung, die auf Opt-in-Basis und sogenannte ursprungsübergreifende isolierte Umgebung. Hier erfahren Sie, warum die ursprungsübergreifende Isolierung erforderlich ist, um leistungsstarke Funktionen wie „SharedArrayBuffer“, „performance.measureUserAgentSpecificMemory()“ und einen hochauflösenden Timer mit höherer Genauigkeit zu nutzen.

Hier erfahren Sie, wie Sie mit „about://tracing“ und der **WebAudio**-Erweiterung in den Chrome-Entwicklertools ein Profil der Leistung von Web Audio-Apps in Chrome erstellen.

Hier erfahren Sie, wie Next.js und Gatsby ihre Build-Ausgabe verbessert haben, um doppelten Code zu minimieren und die Leistung beim Laden von Seiten zu verbessern.

Die Begriffe "same-site" und "same-origin" werden häufig zitiert, aber häufig falsch verstanden. Auf dieser Seite werden die Unterschiede und die Unterschiede erläutert.

Einige Web-APIs erhöhen das Risiko von Seitenkanalangriffen wie Spectre. Um dieses Risiko zu mindern, bieten Browser eine isolierte Umgebung, die auf Opt-in-Basis und sogenannte ursprungsübergreifende isolierte Umgebung. Verwende COOP und COEP, um eine solche Umgebung einzurichten und leistungsstarke Funktionen wie „SharedArrayBuffer“, „performance.measureUserAgentSpecificMemory()“ oder einen Timer mit hoher Präzision zu aktivieren.

Hier erfahren Sie, wie Sie die Speichernutzung Ihrer Webseite in der Produktion messen, um Regressionen zu erkennen.

In diesem ersten Beitrag des Entwicklungsteams von web.dev erfahren Sie, wie wir die Website erstellen und wie wir Eleventy und Web Components nutzen.

Mit der CSS-Eigenschaft „color-scheme“ und dem entsprechenden Meta-Tag können Entwickler für ihre Seiten themenspezifische Standardeinstellungen des User-Agent-Stylesheets festlegen, z. B. Formularsteuerelemente, Bildlaufleisten und CSS-Systemfarben. Gleichzeitig wird durch diese Funktion verhindert, dass Browser Transformationen selbst anwenden.

So stellen Sie sicher, dass die Hauptfunktion Ihrer Website immer verfügbar, zugänglich, sicher, nutzbar, auffindbar und schnell ist.

Wir wissen, dass es eine gute Idee ist, responsiv zu entwerfen, um eine optimale Nutzung auf mehreren Geräten zu ermöglichen, aber responsives Design bringt auch Vorteile in puncto Barrierefreiheit.

Erfahren Sie, wie Sie die Barrierefreiheit Ihrer Seiten verbessern können, indem Sie die Verwendung von Farbe und Kontrast verbessern.

Engpässe bei Servern erkennen, Engpässe schnell beheben, Serverleistung verbessern und Regressionen verhindern

Bei der Verwendung auf einem Mobilgerät oder Touchscreen-Gerät ist es wichtig, dass interaktive Elemente um sie herum genügend Platz haben. Das ist für alle hilfreich, vor allem aber für Menschen mit motorischen Einschränkungen.

Jetzt neu: Vertrauenswürdige Typen: eine Browser-API, die das DOM-basierte Cross-Site-Scripting in modernen Webanwendungen verhindert.

Eine progressive Web-App in einer Android-App öffnen

Durch die Optimierung der Renderingzyklen eliminiert Chrome 83 Layoutverschiebungen beim Vorabladen optionaler Schriftarten. Die Kombination mit font-display: optional ist die effektivste Methode, um benutzerdefinierte Schriftarten ohne Unterbrechungen zu rendern.

Informationen zum Abrufen und Bereitstellen von SXG-Dateien mit nginx und zu den Herausforderungen beim Vorabruf von Unterressourcen.

Hier erfahren Sie, wie Sie ein TLS-Zertifikat mit SXG-Erweiterungen generieren, Tools zum Generieren von SXG-Dateien installieren und nginx für die Bereitstellung von SXG-Dateien konfigurieren.

Verwenden Sie Medienabfragen, um Bilder zu senden, die nur so groß wie nötig sind. Diese Methode wird allgemein als responsive Bilder bezeichnet.

Wie andere Abteilungen Ihrem Projekt zur Optimierung der Websitegeschwindigkeit helfen können

Ab Chrome 81 bleiben Scroller bei Änderungen des Seitenlayouts angedockt. Sie müssen also keine Event-Listener mehr hinzufügen, um ein erneutes Andocken zu erzwingen.

Hier erfahren Sie, wie Sie Signed Exchanges (SXGs) mit Web Packager bereitstellen.

Mit dem Ereignis „beforeinstallprompt“ können Sie Ihren Nutzern eine individuelle, nahtlose In-App-Installation ermöglichen.

Die WebXR Hit Test API ist eine Erweiterung der Augmented Reality des Webs, mit der Sie virtuelle Objekte in einer realen Ansicht platzieren können.

Wenn Sie die WebXR Device API bereits verwendet haben, wird es Sie freuen, zu erfahren, dass es sehr wenig Neues zu lernen gibt. Die Teilnahme an einer WebXR-Sitzung ist weitgehend identisch. Das Ausführen einer Frameschleife ist weitgehend identisch. Die Unterschiede liegen in Konfigurationen, die eine geeignete Darstellung von Inhalten für Augmented Reality ermöglichen.

Virtual Reality ist ab Chrome 79 jetzt auch im Web verfügbar. Diese Einführung basiert auf der WebXR Device API und bildet die Grundlage für Augmented Reality und Virtual Reality. Dieser Artikel ist der zweite Artikel in einer Reihe. Der Fokus liegt auf der Frameschleife, dem Teil einer XR-Sitzung, in dem dem Betrachter Bilder gezeigt werden. Die WebXR Device API wird bald auch von anderen Browsern unterstützt werden, darunter Firefox Reality, Oculus Browser, Edge und Helio-Browser von Magic Leap.

Hier erfährst du, wie Chrome in eine Reihe von Open-Source-Tools investiert, um das JavaScript-System voranzubringen.

Eine Einführung zu progressiven Web-Apps (PWAs) und den drei Säulen, die sie von anderen Web-Apps unterscheiden.

Hier erfahren Sie, wie Sie Routen in Workbox registrieren, damit Ihre progressive Web-App neben plattformspezifischen Apps in Freigabe-UIs auf Systemebene angezeigt wird.

Mit maskierbaren Symbolen erhältst du mehr Kontrolle und kannst in deiner progressiven Web-App adaptive Symbole verwenden. Ein maskierbares Symbol kann auf allen Android-Geräten gut aussehen.

Es ist üblich, dass eine Seite oder App nicht eingereichte Analyse- oder andere Daten enthält, wenn ein Nutzer sie schließt. Websites verwenden einen synchronen Aufruf von XMLHttpRequest(), damit die Seite oder Anwendung geöffnet bleibt, bis die Daten an den Server übergeben werden. Sie beeinträchtigt die User Experience und ignoriert bessere Möglichkeiten, Daten zu speichern. Aus diesem Grund wurde in Chrome 80 eine kürzliche Spezifikationsänderung implementiert.

Modul-Worker erleichtern die Blockierung des Hauptthreads, indem sie teuren Code in einen Hintergrundthread verschieben und gleichzeitig die ergonomischen und leistungsorientierten Vorteile von standardmäßigen JavaScript-Modulen beibehalten.

Hier erfährst du mehr über die neuesten Entwicklungen bei Geschwindigkeitstools, einschließlich neuer Leistungsmesswerte, Aktualisierungen bei PageSpeed Insights und dem Bericht zur Nutzererfahrung in Chrome (CrUX) sowie Erkenntnissen aus der Web Almanac-Analyse des Websystems.

Hier erfährst du mehr über adaptive Lademuster, wie sie implementiert werden und wie Facebook, Tinder, eBay und andere Unternehmen adaptives Laden in der Produktion verwenden.

Der Hauptthread des Browsers ist unglaublich überlastet. Wenn Sie Web Worker verwenden, um Code aus dem Hauptthread zu verschieben, können Sie die Zuverlässigkeit und Nutzerfreundlichkeit Ihrer Anwendung erheblich verbessern.

Kommentare von Umfrageteilnehmern zu verschiedenen Techniken zur Bildoptimierung.

In diesem Codelab erfahren Sie, wie Sie einen Server für Push-Benachrichtigungen erstellen.

So beschleunigen Sie Ihre Next.js-App mit Code-Splitting und intelligenten Ladestrategien. In diesem Beitrag werden verschiedene Arten der Code-Spaltung und die Verwendung dynamischer Importe zur Beschleunigung Ihrer Next.js-Anwendungen erläutert.

Vorteile und Nachteile der Unterstützung von AMP in Ihrer Next.js-Anwendung AMP ist ein Webkomponenten-Framework, das für schnelles Laden von Seiten sorgt. Next.js bietet eine integrierte Unterstützung für AMP. In diesem Leitfaden wird zuerst kurz

Mit der Web Share API können Webanwendungen dieselben vom System bereitgestellten Freigabefunktionen nutzen wie plattformspezifische Anwendungen. Mit der Web Share API können Web-Apps Links, Texte und Dateien für andere auf dem Gerät installierte Apps auf dieselbe Weise freigeben wie plattformspezifische Apps.

Next.js übernimmt viele Optimierungen in Ihrer React-App, damit Sie Next.js ist ein React -Framework mit einer Reihe von integrierten Leistungsoptimierungen. Das Framework soll dafür sorgen, dass Anwendungen möglichst leistungsfähig gestartet werden

Wie Next.js die Navigation mithilfe von Routen-Prefetching beschleunigt und wie Sie diese Funktion anpassen. In diesem Artikel erfahren Sie, wie das Routing in Next.js funktioniert, wie es für Geschwindigkeit optimiert wird und wie Sie es an Ihre

Virtual Reality ist ab Chrome 79 jetzt auch im Web verfügbar. Diese Einführung basiert auf der WebXR Devicer API und bildet die Grundlage für Augmented Reality und Virtual Reality. Dieser Artikel ist der erste in einer Reihe. Darin werden die grundlegenden Konzepte behandelt und beschrieben, wie Sie eine XR-Sitzung starten. Die WebXR Device API wird bald auch von anderen Browsern unterstützt werden, darunter Firefox Reality, Oculus Browser, Edge und Helio-Browser von Magic Leap.

Hier erfahren Sie, wie Cookies funktionieren und was Erstanbieter- und Drittanbieter-Cookies sind.

Websites können ihre Cookies jetzt explizit für die websiteübergreifende Nutzung kennzeichnen. Hier erfährst du, wie du Cookies mit Markup auszeichnest, damit deine eigenen und Drittanbieter-Cookies auch nach der Einführung dieser Änderung funktionieren.

Die Vorteile schneller Anzeigen und die Anzeigengeschwindigkeit verstehen

Nutzen Sie Push-Benachrichtigungen, um Nutzern gezielte und zeitnahe Updates zu bieten.

In diesem Codelab erfahren Sie, wie Sie eine Nutzerberechtigung anfordern und Benachrichtigungen senden.

In diesem Codelab erfahren Sie, wie Sie Benachrichtigungen mit einem Service Worker verwalten.

Eine Schritt-für-Schritt-Anleitung zur Verwendung von WebPageTest zum Erkennen und Beheben von Layoutinstabilitätsproblemen

Feature-Phones erleben eine Renaissance und sind vor allem in aufstrebenden Märkten beliebt, in denen 2G die Norm ist. Hier sind unsere Erkenntnisse aus der Entwicklung von PROXX, einem mobilen Klon von „Minesweeper“, der auf 2G-Mobiltelefonen schnell geladen werden kann.

Obwohl CSS-Variablen nützlich sind, ist die Arbeit mit ihnen schwierig, da sie jeden beliebigen Wert annehmen und überschrieben werden können und Sie mit ihnen keine Übergänge verwenden können. CSS-Eigenschaften und Werte-API-Level 1 behebt diese Probleme.

Erfahren Sie, wie Sie zukünftige Navigationen durch Vorabruf von Ressourcen beschleunigen können.

Gemischte Inhalte treten auf, wenn der erste HTML-Code über eine sichere HTTPS-Verbindung geladen wird, während andere Ressourcen über eine unsichere HTTP-Verbindung geladen werden.

Hier erfahren Sie, wie Sie Fehler mit gemischten Inhalten auf Ihrer Website beheben, um die Nutzer zu schützen und dafür zu sorgen, dass alle Ihre Inhalte geladen werden.

Studien zeigen, dass Webvideos zu mehr Interaktionen und mehr Umsatz führen. Auch wenn Sie Ihren Websites noch keine Videos hinzugefügt haben, ist dies nur eine Frage der Zeit.

Eine interaktive Demonstration, die zeigt, wie festgelegt wird, welches Symbol auf iOS-Startbildschirmen angezeigt werden soll.

Die Webplattform ist in der Spieleentwicklung mittlerweile ausgereift. Der Schlüssel zur Entwicklung eines modernen Webspiels liegt darin, sich an den Best Practices für Spieledesign und Monetarisierung zu orientieren. In diesem Beitrag erfährst du, wie du dieses Ziel erreichen kannst.

Multi-Origin-Architekturen bringen viele Herausforderungen bei der Entwicklung von PWAs mit sich. Hier erfahren Sie mehr über die gute und die schlechte Verwendung mehrerer Ursprünge und darüber, wie Sie PWAs auf Websites mit mehreren Ursprungsservern erstellen können.

In diesem Beitrag wird erläutert, wie Sie WebFonts laden, um Layoutverschiebungen und leere Seiten zu verhindern, wenn WebFonts beim Laden der Seite nicht verfügbar sind.

In diesem Post wird erklärt, wie du die Größe der WebFonts reduzieren kannst, die du auf deiner Website verwendest, damit eine gute Typografie keine langsame Website bedeutet.

Hier erfahren Sie, wie Sie installierbare progressive Angular-Anwendungen erstellen.

Hier erfahren Sie, wie Sie mit Lighthouse und den Chrome-Entwicklertools langsame Drittanbieterressourcen ermitteln.

Sie können ein Bild-CDN verwenden, um die Bilder Ihrer Website zu optimieren und die Datenkosten für Ihre Nutzer zu reduzieren.

Hier erfahren Sie, wie Sie Ladezeiten und die Nutzerfreundlichkeit verbessern, indem Sie häufige Fallstricke bei der Verwendung von Drittanbieter-Skripts vermeiden.

In diesem Beitrag werden gängige Arten von Drittanbieter-JavaScript und die damit verbundenen Leistungsprobleme beschrieben. Außerdem finden Sie hier eine allgemeine Anleitung zur Optimierung von Drittanbieter-Skripts.

Hier erfahren Sie mehr über Techniken zur Optimierung langsamer Drittanbieterressourcen mit Unterstützung von Lighthouse.

Neue Webplattformfunktionen erleichtern das Erstellen benutzerdefinierter Elemente, die wie integrierte Formularsteuerelemente funktionieren.

Hier finden Sie Informationen zu Ressourcenhinweisen für die Ressourcen rel=preconnect und rel=dns-prefetch und deren Verwendung.

Hier erfahren Sie, wie Sie UI-Elementen im Web mithilfe der CSS-Eigenschaft „Hintergrundfilter“ Hintergrundeffekte wie Weichzeichnen und Transparenz hinzufügen.

Mit der Funktion „stale-while-revalidate“ können Entwickler ein Gleichgewicht zwischen der Unmittelbarkeit (sofortiges Laden von Cache-Inhalten) und der Aktualität gewährleisten, damit Aktualisierungen der im Cache gespeicherten Inhalte in Zukunft verwendet werden.

Hier erfahren Sie, wie Sie große Listen durch die Implementierung von virtuellem Scrollen mit dem Angular Component Dev Kit reaktionsschneller gestalten.

Hier erfährst du, wie du die Änderungserkennung deiner Angular App optimieren kannst, damit sie schneller reagiert.

Hier erfahren Sie, wie Sie die Strategien von Angular für das Vorabladen schnellerer Apps anwenden.

Mit der Codeaufteilung können Sie Ihre Anwendungen beschleunigen, die nachfolgende Navigation kann jedoch verlangsamt werden. Der prädiktive Prefetch ist eine effiziente Möglichkeit, um mithilfe von Datenanalysen intelligent vorab abzurufen, was der Nutzer wahrscheinlich als Nächstes verwendet, und so die Netzwerkauslastung zu optimieren.

Hier erfahren Sie, wie Sie Ihre Inhalte mithilfe der Network Information API an die Qualität des Werbenetzwerks anpassen können.

Erfahren Sie, wie Sie Ihre Angular-Anwendung mit Codelyzer zugänglich machen.

Hier erfahren Sie, wie Sie mit dem Angular Service Worker die statischen Assets in Ihrer App vorab im Cache speichern.

Hier erfahren Sie, wie Sie Leistungsbudgets direkt in der Angular CLI verwenden.

Viele Geräte unterstützen jetzt einen breiten dunklen Modus oder das dunkle Design des Betriebssystems. In diesem Beitrag wird erläutert, wie der dunkle Modus auf Webseiten unterstützt werden kann. Außerdem werden Best Practices aufgelistet und ein benutzerdefiniertes Element namens „Dark-mode-toggle“ vorgestellt, mit dem Webentwickler Nutzern die Möglichkeit bieten können, ihre Einstellung auf Betriebssystemebene auf bestimmten Webseiten zu überschreiben.

Hier erfahren Sie, wie Sie Ihr anfängliches App Bundle durch Codeaufteilung auf Routenebene verkleinern.

Hier erfahren Sie, wie Sie Ihre Angular-Anwendung schneller, zuverlässiger, auffindbar, installierbar und barrierefrei gestalten.

Verwenden Sie „srcset“, um die richtige Bildgröße automatisch auszuwählen.

In diesem Beitrag fasst Kevin Schaaf vom Polymer Project und Caridy Patiño von Salesforce den Stand der Webkomponenten im Jahr 2019 zusammen.

Lighthouse unterstützt jetzt Leistungsbudgets. Die Funktion LightWallet lässt sich in weniger als fünf Minuten einrichten und liefert einen Überblick über die Größe und Menge der Seitenressourcen.

Seit der Einführung der Payment Request API in Chrome 53 und der Payment Handler API in Chrome 68 wurden einige Änderungen an den jeweiligen Spezifikationen vorgenommen. In diesem Beitrag werden diese Aktualisierungen zusammengefasst und die API-Änderungen werden weiterhin zusammengefasst.

Demonstrieren Sie den Umsatz, der durch die Verbesserungen der Website erzielt wird, und schließen Sie externe Faktoren wie Marketingkampagnen aus.

Progressive Web-Apps können ganz einfach über eine neue Installationsschaltfläche in der Adressleiste von Chrome (Omnibox) installiert werden.

Hier erfahren Sie, wie sich die Websiteleistung in verschiedenen Bereichen des E-Commerce-Trichters auswirkt.

Die Arbeit mit Service Workern ist für viele Webentwickler neu und ungewohnt. In diesem Beitrag findest du einige Tipps, wie du sie besser schützen kannst.

Installation progressiver Web-Apps und Best Practices

Installation progressiver Web-Apps und Best Practices

Bilder nehmen einen großen Teil des visuellen Bereichs ein und machen den Großteil der heruntergeladenen Byte einer Website aus. Verwenden Sie die neuen Funktionsrichtlinien, um übergroße Bilder zu erkennen.

Hier erfahren Sie, wie Sie die Renderingzeiten mit wichtigen CSS-Techniken verbessern und das beste Tool für Ihr Projekt auswählen.

Hier erfahren Sie, wie Sie mit „Critical“ kritische CSS extrahieren und inline einfügen und Renderingzeiten verbessern.

Hier erfahren Sie, wie Sie kostspielige Diagnosen stellen, die Nutzerinteraktionen verhindern.

Bei der Google I/O 2019 haben wir drei neue Initiativen zum Thema Webleistung vorgestellt, die die Nutzerfreundlichkeit für alle verbessern sollen.

PROXX als Minesweeper-ähnliches Spiel, das als PWA entwickelt wurde. Sie funktioniert auf einer Vielzahl von Geräten und verbessert das visuelle Erscheinungsbild mit zunehmender Leistungsfähigkeit des Geräts.

Wäre es nicht toll, wenn Nutzer Ihre Website mithilfe ihrer Kamera durchsuchen könnten?

Hier erfahren Sie, wie Sie Ihre Cookies mit dem SameSite-Attribut für die Nutzung durch Erstanbieter und Drittanbieter kennzeichnen. Sie können die Sicherheit Ihrer Website verbessern, indem Sie die Lax- und Strict-Werte von SameSite verwenden, um den Schutz vor CSRF-Angriffen zu verbessern. Wenn Sie das neue Attribut „None“ angeben, können Sie Ihre Cookies explizit für die websiteübergreifende Nutzung kennzeichnen.

Die neu vorgeschlagene Portals API hilft Ihnen, Ihr Front-End einfach zu halten und gleichzeitig eine nahtlose Navigation mit benutzerdefinierten Übergängen zu ermöglichen. In diesem Artikel können Sie praktische Erfahrungen mit Portalen sammeln, um die Nutzererfahrung auf Ihrer Website zu verbessern.

Verwenden Sie die Network Information API, um die Assets, die Nutzern basierend auf der Qualität ihrer Verbindung bereitgestellt werden, anzupassen.

In diesem Codelab erfährst du, wie du mit der Brotli-Komprimierung die Komprimierungsverhältnisse und die Gesamtgröße deiner App weiter reduzieren kannst.

Für die Google I/O 2019 haben die Mitarbeiter des web.dev-Teams eine Reihe von Updates veröffentlicht, darunter ein überarbeitetes Design, mehr Lighthouse-Dokumente und einen brandneuen Blog.

Geschwindigkeit ist wichtig, aber was genau meinen wir damit? Was bedeutet eine schnelle Website?

Die Leistung in der Praxis ist aufgrund von unterschiedlichen Geräten, Netzwerkverbindungen und anderen Faktoren stark schwanken. In diesem Beitrag stellen wir Tools vor, mit denen Sie Labor- oder Felddaten erfassen und so die Seitenleistung beurteilen können.

Unternehmen, die die Geschwindigkeit optimieren, stellen schnell fest, dass sie schnell zurückgehen. In diesem Beitrag erfährst du, wie du dafür sorgen kannst, dass die Website schnell geladen wird.

„Create React App“ enthält standardmäßig ein Web-App-Manifest. Durch das Ändern dieser Datei können Sie ändern, wie Ihre Anwendung angezeigt wird, wenn sie auf dem Gerät des Nutzers installiert wird.

React ist eine Open-Source-Bibliothek, die das Erstellen von UIs vereinfacht. In diesem Lernpfad werden verschiedene APIs und Tools innerhalb des Systems behandelt, mit denen Sie die Leistung und Nutzerfreundlichkeit Ihrer Anwendung verbessern können.

reCAPTCHA ist eine Bibliothek, die eine React-Anwendung prüft und alle Probleme mit der Barrierefreiheit in der Chrome DevTools-Konsole protokolliert. Eslint-plugin-jsx-a11y ist ein ESLint-Plug-in, das eine Reihe von Regeln für Bedienungshilfen direkt in JSX identifiziert und durchsetzt. Die Kombination dieser Tools kann einen umfassenden Prüfansatz darstellen, um Probleme hinsichtlich der Barrierefreiheit in Ihrer Anwendung zu ermitteln und zu beheben.

Workbox ist in die Create React App integriert und hat eine Standardkonfiguration, die alle statischen Assets in Ihrer Anwendung bei jedem Build vorab im Cache speichert.

Mit der React.lazy-Methode lässt sich eine React-Anwendung mithilfe dynamischer Importe einfach auf Komponentenebene aufteilen. Du kannst sie zusammen mit Suspense verwenden, um deinen Nutzern den passenden Ladestatus anzuzeigen.

Mit dieser Drittanbieter-Bibliothek werden Seiten auf Ihrer Website vorab in statische HTML-Dateien umgewandelt. Dies kann die First Paint-Zeiten in Ihrer Anwendung verbessern.

re-window ist eine Bibliothek, mit der große Listen effizient gerendert werden können.

In diesem Codelab erfährst du, wie du die Leistung einer Seite durch Vorabladen und Vorabruf von Ressourcen verbessern kannst.

Die Medienabfrage „Bevorzugt-reduzierte Bewegung“ erkennt, ob der Nutzer vom System angefordert hat, dass das System die Menge der verwendeten Animationen oder Bewegungen minimiert. Diese Option ist für Nutzer gedacht, die minimierte Animationen benötigen oder bevorzugen. Menschen mit vestibulären Störungen z. B. ziehen es oft vor, Animationen auf ein Minimum zu beschränken.

Hier erfahren Sie, wie Sie nicht kritisches CSS verschieben, um den kritischen Rendering-Pfad zu optimieren und First Contentful Paint (FCP) zu verbessern.

Intersection Observer v2 bietet nun die Möglichkeit, nicht nur Kreuzungen an sich zu beobachten, sondern auch zu erkennen, ob das sich überschneidende Element zum Zeitpunkt der Kreuzung sichtbar war.

Erstellen Sie Websites, die zu den Anforderungen und Funktionen des Geräts passen, auf dem sie angezeigt werden.

Konstruktierbare Stylesheets bieten eine nahtlose Möglichkeit zum Erstellen und Verteilen von Stilen auf Dokumente oder Schattenstamm ohne sich Gedanken über FOUC machen zu müssen.

Empfehlungen zur Implementierung von Logik und Rendering in Apps.

Automatisieren Sie Ihr Leistungsbudget am besten. Hier erfahren Sie, wie Sie das Tool auswählen, das Ihren Anforderungen und Ihrer aktuellen Einrichtung am besten entspricht.

Legen Sie Leistungsbudgets mit minimalem Einrichtungsaufwand fest und setzen Sie sie im Rahmen Ihres Entwicklungsworkflows mit „bundlesize“ und Travis CI durch.

Hier erfahren Sie, wie Sie mit Webpack Leistungsbudgets festlegen und die Paketgröße im Auge behalten.

Sie haben hart gearbeitet, um schnell zu werden. Stellen Sie jetzt sicher, dass Sie schnell bleiben, indem Sie Leistungstests in Travis CI mit Lighthouse Bot automatisieren.

Wie integrieren Sie WebAssembly in dieses Setup? In diesem Artikel sehen wir uns das am Beispiel mit C/C und Emscripten an.

Die getinstalledRelatedApps() API ist eine Webplattform-API, mit der Sie überprüfen können, ob Ihre iOS-, Android- oder Desktop-App oder PWA auf dem Gerät des Nutzers installiert ist.

In diesem Codelab erfahren Sie, wie Sie die Leistung einer Anwendung verbessern, indem Sie die Transpilation von Code reduzieren.

Client-Hinweise sind eine Reihe von HTTP-Anfrageheadern, mit denen wir die Bereitstellung von Seitenressourcen basierend auf den Eigenschaften des Geräts und der Netzwerkverbindung eines Nutzers ändern können. In diesem Artikel erfahren Sie alles über Kundenhinweise, ihre Funktionsweise und einige Ideen, wie Sie sie einsetzen können, um Ihre Website für Nutzer schneller zu machen.

Viele unterschiedliche Nutzende verlassen sich auf die Tastatur, um in Anwendungen zu navigieren – von Nutzern mit vorübergehenden und dauerhaften motorischen Einschränkungen bis hin zu Nutzern, die Tastenkombinationen verwenden, um effizienter und produktiver zu sein. Eine gute Strategie für die Tastaturnavigation in Ihrer App sorgt für eine bessere Nutzererfahrung.

Mit den richtigen semantischen HTML-Elementen können Sie die meisten oder alle Anforderungen an den Tastaturzugriff erfüllen. Das bedeutet weniger Zeit für das Einstellen des Tabindex und zufriedenere Nutzer.

Für Standard-HTML-Elemente ist eine Tastatureingabe integriert. Verwenden Sie beim Erstellen benutzerdefinierter interaktiver Komponenten mithilfe von tabindex, um sicherzustellen, dass per Tastatur zugänglich ist.

Damit ein Screenreader dem Nutzer eine gesprochene Benutzeroberfläche anzeigen kann, müssen sinnvolle Elemente geeignete Labels oder Textalternativen haben. Durch ein Label oder eine Textalternative erhält ein Element seinen zugänglichen Namen. Das ist eine der wichtigsten Eigenschaften, um die Semantik des Elements in der Barrierefreiheitsstruktur auszudrücken.

Haben Sie sich schon einmal gefragt, wie assistive Technologien wie Screenreader wissen, was sie den Nutzenden mitteilen sollen? Die Antwort ist, dass diese Technologien von Entwicklern abhängen, die ihre Seiten mit semantischem HTML auszeichnen. Aber was ist die Semantik und wie wird sie von Screenreadern genutzt?

Der Fokusindikator (oft durch einen Fokusring dargestellt) kennzeichnet das Element, das aktuell im Fokus ist. Für Nutzer, die keine Maus verwenden können, ist dieser Indikator äußerst wichtig, da er als Ersatz für den Mauszeiger dient.

Indem Sie die richtigen Elemente für Überschriften und Orientierungspunkte verwenden, können Sie die Navigation für Nutzende von assitiver Technologie erheblich verbessern.

Eine barrierefreie Website ist eine Website, auf die unabhängig von den Beeinträchtigungen der Nutzer auf ihre Inhalte zugegriffen werden kann und deren Funktionalität auch von möglichst vielen Nutzern verwendet werden kann.

In diesem Codelab erfahren Sie, wie Sie eine Anwendung zuverlässig machen, indem Sie einen Service Worker registrieren.

Sobald Sie eine Webseite öffnen, fordert der Browser ein HTML-Dokument vom Server an, parst den Inhalt der HTML-Datei und sendet separate Anfragen für alle anderen externen Verweise. Die Kette kritischer Anfragen stellt die Reihenfolge der Ressourcen dar, die priorisiert und vom Browser abgerufen werden.

Bei der Lighthouse-SEO-Prüfung wird Ihre Seite gescannt, getestet, was für Suchmaschinen relevant ist, und Sie erhalten eine Bewertung, damit Sie bestimmte Bereiche mit Verbesserungspotenzial erkennen können. SEO ist wichtig, weil du damit mehr relevante Nutzer erreichst, die sich deine Inhalte ansehen.

In diesem Codelab erfahren Sie, wie Sie die Leistung einer Anwendung verbessern, indem Sie nicht verwendete und nicht benötigte Abhängigkeiten entfernen.

Sorgen Sie mit einer detaillierten Anleitung dafür, dass Ihre Website schnell geladen wird, und definieren Sie Grenzwerte für Leistungsmesswerte, die für Ihre Website aussagekräftig sind.

Suchmaschinen sind die digitale Version eines Bibliothekar. Sie verwenden einen umfassenden Index, um die richtigen Informationen für eine Abfrage zu finden. Wenn du die Grundlagen der Suche verstehst, bereitest du dich darauf vor, deine Inhalte für Nutzer auffindbar zu machen.

In diesem Codelab erfährst du, wie du je nach Bildschirmgröße des Geräts komplett unterschiedliche Bilder laden kannst.

Analysieren Sie Ihr JavaScript-Bundle, um nicht verwendeten Code zu erkennen und zu entfernen.

In diesem Codelab erfahren Sie, wie Sie Text mit dem Font Face Observer sofort anzeigen können.

Zum Schutz vor Angriffen müssen Entwickler Sicherheitslücken minimieren und Sicherheitsfunktionen zu einer Anwendung hinzufügen. Glücklicherweise bietet der Browser im Web viele Sicherheitsfunktionen, darunter auch eine Sandbox.

Das Wort 'Sicherheit' bezieht sich meist auf schlechte Nachrichten. Aber Sicherheit ist etwas, das als positiver und notwendiger Teil der Webentwicklung betrachtet werden sollte, genau wie die User Experience oder die Barrierefreiheit.

Der HTTP-Cache des Browsers ist Ihre erste Verteidigungslinie. Dies ist nicht unbedingt der leistungsfähigste oder flexibelste Ansatz und Sie haben nur eine begrenzte Kontrolle über die Lebensdauer von im Cache gespeicherten Antworten. Es gibt jedoch einige Faustregeln, die Ihnen eine sinnvolle Caching-Implementierung ohne großen Aufwand bieten. Sie sollten daher immer versuchen, sie zu befolgen.

In diesem Codelab erfahren Sie, wie Sie mit dem Attribut „sizes“ die richtige Größe von Bildern je nach Darstellungsbereich des Nutzers festlegen.

Der HTTP-Cache des Browsers dient als erste Abwehrlinie gegen unnötige Netzwerkanfragen.

In diesem Codelab erfährst du, wie du die Leistung verbessern kannst, indem du ein animiertes GIF durch ein Video ersetzt hast.

In diesem Codelab erfahren Sie, wie Sie den Netzwerkverkehr mit den Entwicklertools von Chrome umgehen.

Um die richtigen Caching-Strategien für Ihre Webanwendung zu entwickeln, müssen Sie wissen, was genau Sie laden. Beim Erstellen einer zuverlässigen Webanwendung kann das Netzwerk allen möglichen dunklen Kräften ausgesetzt sein. Sie müssen die Sicherheitslücken des Netzwerks verstehen, wenn Sie mit ihnen in Ihrer App umgehen möchten.

In diesem Codelab erfahren Sie, wie die Same-Origin-Richtlinie beim Zugriff auf Daten in einem iFrame funktioniert.

In diesem Codelab erfahren Sie, wie Sie Bilder mit den richtigen Abmessungen bereitstellen, um die Netzwerkleistung zu verbessern.