Artikel
Lange Aufgaben optimieren
Sie haben den Hinweis erhalten, den Hauptthread nicht zu blockieren und lange Aufgaben aufzuteilen, aber was bedeutet es, diese Dinge zu tun?
Zahlungsmethode einrichten
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.
Module vorab laden
Das Vorabladen von Modulen bietet eine Möglichkeit, JavaScript-Module im Voraus deklarativ zu laden.
Browserautofill in Ihren Formularen erfassen
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.
Teil 2: Clientseitige KI-Toxizitätserkennung erstellen
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.
Teil 1: Clientseitige KI zur Bekämpfung von Online-Toxizität
„Schützen Sie Ihre Nutzer und schaffen Sie mit der Erkennung von schädlichen Inhalten eine sicherere Onlineumgebung. Im ersten Teil erfahren Sie, wie Sie KI einsetzen können, um toxische Inhalte an der Quelle zu bekämpfen: an den Tastaturen der Nutzer.“
Gesamte Blockierzeit (Total Blocking Time, TBT)
In diesem Beitrag wird der Messwert „Total Blocking Time“ (TBT) und seine Messung beschrieben.
Die effektivsten Möglichkeiten zur Verbesserung der Core Web Vitals
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
Web Vitals
Wichtige Messwerte für eine intakte Website
Erste Schritte beim Messen von Web Vitals
Hier erfahren Sie, wie Sie die Web Vitals-Werte Ihrer Website sowohl in realen als auch in Laborumgebungen messen.
Largest Contentful Paint optimieren
Eine detaillierte Anleitung zum Aufschlüsseln des LCP und Identifizierung wichtiger Verbesserungsbereiche
LLM-Funktionen mit Zusammenfassung vergleichen
Bewerten Sie die Ergebnisse verschiedener Modelle und Prompts mit dem LLM als Bewertungsmethode. Anstatt sich auf menschliches Urteilsvermögen zu verlassen, wird die Modellvalidierung an ein anderes LLM delegiert.
Die CSS-Eigenschaft „content-visibility“ ist jetzt als Baseline verfügbar
Die CSS-Eigenschaft „content-visibility“ ist jetzt als Baseline Newly verfügbar.
So wurden die Grenzwerte für die Core Web Vitals-Messwerte definiert
Studien und Methodiken hinter den Core Web Vitals-Grenzwerten
Langsame Interaktionen im Labor manuell diagnostizieren
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.
Core Web Vitals-Workflows mit Google-Tools
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.
Referenz
In diesem Artikel erfahren Sie mehr über die Entstehungsgeschichte von Baseline, die Beteiligung von Google und die Inhaberschaft der WebDX-Community-Gruppe.
Back-Forward-Cache
Erfahre, wie du deine Seiten für sofortige Ladevorgänge optimieren kannst, wenn du die Browserschaltflächen „Zurück“ und „Vorwärts“ verwendest.
CSS-Verschachtelungen werden durch CSSNestedDeclarations verbessert
Das CSS-Verschachteln wird noch viel besser!
First Input Delay (FID)
In diesem Beitrag wird der Messwert „First Input Delay (FID)“ vorgestellt und erläutert, wie er gemessen wird.
Leistung vor Ort beheben
Hier erfährst du, wie du Leistungsdaten mithilfe von Informationen zur Fehlerbehebung zuordnen kannst, um mit Analysen echte Nutzerprobleme zu erkennen und zu beheben.
Leistung und Nutzerfreundlichkeit für clientseitige KI verbessern
Die Vorteile der clientseitigen KI umfassen eine geringe Latenz, reduzierte serverseitige Kosten, keine API-Schlüsselanforderungen, mehr Datenschutz für Nutzer und Offlinezugriff.
Benchmarking der Leistung von CSS-Eigenschaften "@property"
Welche Auswirkungen hat @property auf die Leistung Ihres Preisvergleichsportals?
Core Web Vitals und Werbeeinnahmen mit Google-Tools korrelieren
Hier erfahren Sie, wie Sie mit Google-Tools Ihre Core Web Vitals mit dem Werbeumsatz in Beziehung setzen können.
Es ist an der Zeit, Lazy Loading für bildschirmunabhängige iFrames einzusetzen.
In diesem Beitrag erfahren Sie mehr über das Attribut „load“ (Ladeattribut) und darüber, wie Sie damit das Laden von iFrames steuern können.
Speicherplatz für das Web
Es gibt viele verschiedene Optionen zum Speichern von Daten im Browser. Welche Option ist für Sie am besten geeignet?
Mehrere progressive Web-Apps in derselben Domain erstellen
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.
Web Push-Protokoll
In dieser interaktiven Anleitung erfahren Sie, wie Sie einen Server erstellen, der Push-Benachrichtigungsabos verwaltet und Web-Push-Protokollanfragen an einen Push-Dienst sendet.
Welche Voraussetzungen müssen erfüllt sein, damit es installierbar ist?
Kriterien für die Installierbarkeit von progressiven Web-Apps
Was macht eine gute progressive Web-App aus?
Was macht eine gute oder großartige progressive Web-App aus?
Umgang mit Updates am Manifest der Web-App in Chrome
Symbole, Verknüpfungen, Farben und andere Metadaten im Web-App-Manifest für Ihre PWA ändern
Web-App-Manifest hinzufügen
Das Web-App-Manifest ist eine einfache JSON-Datei, die dem Browser mitteilt, wie sich Ihre Webanwendung verhalten soll.
Cross-Site-Scripting (XSS) mit einer strengen Content Security Policy (CSP) abschwächen
Hier erfahren Sie, wie Sie eine CSP auf Basis von Script-Nonces oder -Hashes als gestaffelte Sicherheitsebenen gegen websiteübergreifende Skripts bereitstellen.
Zugriff auf Hardwaregeräte im Web
Dieser Artikel hilft Webentwicklern dabei, die richtige Hardware-API für ein bestimmtes Gerät auszuwählen.
Wiederverwendung von Passkeys auf Ihren Websites für Anfragen zu ähnlichen Quellen zulassen
Hier erfahren Sie, wie Sie Anfragen zu verwandten Quellen verwenden können, um die Wiederverwendung von Passkeys auf Ihren Websites zu ermöglichen.
Lazy Loading für Bilder auf Browserebene für das Web
In diesem Beitrag wird das Attribut „load“ erläutert und erklärt, wie es verwendet werden kann, um das Laden von Bildern zu steuern.
Das richtige Bildformat auswählen
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.
Benutzerdefinierte Messwerte
Mit benutzerdefinierten Messwerten können Sie die für Ihre Website spezifischen Aspekte der Website messen und optimieren.
Leistung mit Google Analytics 4 und BigQuery messen und Fehler beheben
Hier erfahren Sie, wie Sie Web Vitals-Daten an Google Analytics 4-Properties senden und die Daten zur Analyse in BigQuery und Looker Studio exportieren.
Best Practices für Webberechtigungen
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.
Best Practices für Cookie-Hinweise
Hier erfahren Sie, wie sich Cookie-Hinweise auf die Leistung, Leistungsmessung und Nutzerfreundlichkeit auswirken.
Medienbenachrichtigungen und Wiedergabesteuerung mit der Media Session API anpassen
Webentwickler können Medienbenachrichtigungen anpassen und mit der Media Session API auf medienbezogene Ereignisse wie Such- oder Trackänderungen reagieren.
Tabindex verwenden
Verwenden Sie das Attribut tabindex , um die Tabposition eines Elements explizit festzulegen.
Langsame Interaktionen im Außendienst erkennen
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.
Zeit bis zum ersten Byte (TTFB)
Dieser Post stellt den Messwert Time to First Byte (TTFB) vor und erklärt, wie er gemessen wird.
Praktisches Prompt Engineering für kleinere LLMs
Hier erfahren Sie, wie Sie Ihre Prompts anpassen, um bevorzugte Ergebnisse für verschiedene LLMs, Modelle und Modellgrößen zu erzielen.
Zeit bis zum ersten Byte optimieren
Informationen zum Optimieren des Messwerts „Time to First Byte“.
Interaction to Next Paint (INP)
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.
CSS-Farbschema-abhängige Farben mit „light-dark()“
description: Definieren Sie mit der Funktion „light-dark()“ die Farben, die auf das verwendete Farbschema reagieren.
WebAssembly-Leistungsmuster für Webanwendungen
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.
Animierte CSS-Rasterlayouts
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.
Chrome-Dino-Spiel mit dem Gamepad spielen
Hier erfahren Sie, wie Sie Webspiele mit der Gamepad API steuern.
Inert-Attribut
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.
Was ist künstliche Intelligenz?
Das Akronym „AI“ wird oft synonym verwendet, um verschiedene Arten von Technologien im KI-Bereich zu repräsentieren.
Das KI-Team von Web.dev
Hier lernst du das Team für technische Redakteure und das Team für Entwicklerbeziehungen kennen.
Ethik und KI
Bei der Verwendung von KI-Tools und beim Generieren neuer Inhalte gibt es zahlreiche ethische Überlegungen.
Websitesuche optimieren: Kontextbezogene Antworten mit generativer KI
Bei der Verwendung von KI-Tools und beim Generieren neuer Inhalte gibt es zahlreiche ethische Überlegungen.
Passkey-Anbieter mit AAGUID ermitteln
Die vertrauenden Parteien können anhand der AAGUID ermitteln, woher der Passkey stammt. So funktionierts.
Wasm mit Binärdateien kompilieren und optimieren
Am Beispiel einer synthetischen Spielzeugsprache namens ExampleScript erfahren Sie, wie Sie WebAssembly-Module in JavaScript mit der Binaryen.js API schreiben und optimieren.
Audio und Video in HTML5 aufnehmen
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
Die Webkomponente <model-viewer>
Mit der Webkomponente <model-viewer> können Sie 3D-Modelle auf einer Webseite deklarativ verwenden.
Nutzerüberprüfung im Detail
Weitere Informationen zum Verwenden von „userVerification“ in WebAuthn
Warum unterscheiden sich die CrUX-Daten von meinen RUM-Daten?
Weitere Informationen dazu, warum RUM-Daten unterschiedliche Core Web Vitals-Werte von CrUX zeigen können.
Bedienungshilfen für Webentwickler
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-JavaScript laden
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.
Largest Contentful Paint (LCP)
In diesem Beitrag wird der LCP-Messwert (Largest Contentful Paint) vorgestellt und es wird erläutert, wie er gemessen wird
Erstellen eines neuen Passkeys verhindern, falls bereits vorhanden
Hier erfahren Sie, wie Sie das Erstellen eines neuen Passkeys verhindern, wenn es im Passwortmanager des Nutzers bereits einen gibt.
Mit IndexedDB arbeiten
Ein Leitfaden zu den Grundlagen von IndexedDB.
5 CSS-Snippets, die jeder Front-End-Entwickler 2024 kennen sollte
Leistungsstarkes und stabiles CSS, das Sie heute nutzen können.
Aus welchen Teilen besteht eine URL?
Was ist der Unterschied zwischen einem Host, einer Website und einem Ursprung? Was ist eine eTLD+1? In diesem Artikel erfahren Sie mehr.
Details zu erkennbaren Anmeldedaten
Hier erfahren Sie, was erkennbare Anmeldedaten sind und wie Sie für Ihren Anwendungsfall eine optimale Nutzererfahrung bieten können.
Rendering-Leistung
Nutzer bemerken, wenn Websites und Apps nicht richtig funktionieren. Daher ist es wichtig, die Rendering-Leistung zu optimieren.
ResizeObserver: Das ist wie „document.onresize“ für Elemente.
Mit „ResizeObserver“ werden Sie benachrichtigt, wenn sich die Größe des Inhaltsrechtecks eines Elements ändert, sodass Sie entsprechend reagieren können.
Codierung und Übertragungsgröße textbasierter Assets optimieren
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.
OffscreenCanvas – Canvas-Vorgänge mit einem Web Worker beschleunigen
In diesem Dokument wird erläutert, wie Sie mit der OffscreenCanvas API Leistungsverbesserungen beim Rendern von Grafiken in Ihrer Webanwendung erzielen können.
First Contentful Paint (FCP)
In diesem Beitrag wird der FCP-Messwert (First Contentful Paint) vorgestellt und erläutert, wie er gemessen wird.
Content Delivery Networks (CDNs)
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.
Was macht eine gute Abmeldung aus?
Praktische Entwicklerleitfaden zur Vorgehensweise, wenn sich ein Nutzer von der Website abmeldet
Zeit bis Interaktivität (TTI)
In diesem Beitrag wird der Messwert „Zeit bis Interaktivität“ (Time to Interactive, TTI) vorgestellt und erklärt, wie er gemessen wird.
Laden von Ressourcen mit der Fetch Priority API optimieren
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.
Die Pseudoklassen „:user-valid“ und „:user-invalid“
Informationen zu den Pseudoklassen „:user-valid“ und „:user-invalid“ und wie sie verwendet werden, um die Nutzererfahrung bei der Eingabevalidierung zu verbessern.
Core Web Vitals für Entscheidungsträger in Unternehmen optimieren
Hier erfahren Sie, wie Entscheidungsträger in Unternehmen und Nicht-Entwickler die Core Web Vitals verbessern können.
Die Nuancen der Base64-Codierung von Strings in JavaScript
Häufige Probleme beim Anwenden der base64-Codierung und -Decodierung auf Strings verstehen und vermeiden.
CSS-Subraster
Subgrid ermöglicht die gemeinsame Nutzung von Rastern, sodass verschachtelte Raster an Ancestors und Verwandten ausgerichtet werden können.
Effektives Laden von Anzeigen, ohne die Seitengeschwindigkeit zu beeinträchtigen
In der heutigen digitalen Welt ist Onlinewerbung ein wichtiger Bestandteil des kostenlosen Webs. Schlecht implementierte Anzeigen können jedoch das Surfen im Internet verlangsamen, die Nutzer frustrieren und die Interaktion beeinträchtigen. Hier erfahren Sie, wie Sie Anzeigen effektiv laden, ohne die Seitenladezeit zu beeinträchtigen, eine nahtlose Nutzererfahrung zu gewährleisten und Websiteinhaber Umsatzchancen zu maximieren.
Vier gängige Arten der Codeabdeckung
Hier lernen Sie, was Codeabdeckung ist, und lernen vier gängige Methoden zu ihrer Messung kennen.
Aus technischer Sicht: Testen oder nicht testen
Bestimmen Sie, was Sie testen müssen und was Sie ausschließen können.
Testfälle und Prioritäten definieren
Lege fest, was getestet werden soll, definiere deine Testläufe und setze Prioritäten.
Nutzerorientierte Leistungsmesswerte
Nutzerorientierte Leistungsmesswerte sind ein wichtiges Tool, um die Nutzerfreundlichkeit Ihrer Website zu verstehen und zu verbessern, sodass echte Nutzer davon profitieren.
Responsive Bilder vorab laden
Hier erfahren Sie mehr über neue und spannende Möglichkeiten, responsive Bilder vorab zu laden und so für eine optimale Nutzererfahrung zu sorgen.
Typografie mit CSS an die Präferenzen der Nutzenden anpassen
Eine Methode, um eine Schriftart an die Präferenzen der Nutzenden anzupassen, damit sie Ihren Content so sicher wie möglich lesen können.
Pyramide oder Krebs? Finde eine passende Teststrategie
Hier erfährst du, wie du verschiedene Testtypen zu einer vernünftigen Strategie kombinieren kannst, die zu deinem Projekt passt.
Drei gängige Arten der Testautomatisierung
Beginnen wir mit den Grundlagen! Wir stellen die beiden allgemeinen Testmodi und die drei gängigen Arten der Testautomatisierung vor.
Mkbitmap zu WebAssembly kompilieren
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.
Was ist WebAssembly und woher kommt es?
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.
Sicheres Hosting von Nutzerdaten in modernen Webanwendungen
Informationen zum sicheren Anzeigen von nutzergesteuertem Content in Webanwendungen
Das private Dateisystem des Ursprungs
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
AVIF für responsive Websites bereitstellen
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.
Interaktion für den nächsten Farbauftrag optimieren
Hier erfahren Sie, wie Sie die Interaction to Next Paint für Ihre Website optimieren.
Grundlegende Features, die Sie derzeit verwenden können
Informationen zu einigen der Features von Baseline.
Skriptauswertung und lange Aufgaben
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.
Eingabeverzögerung optimieren
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.
Auswirkungen großer DOM-Größen auf die Interaktivität und mögliche Maßnahmen
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.
Cumulative Layout Shift optimieren
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.
Core Web Vitals-Probleme mithilfe der Web Vitals-Erweiterung beheben
Die Web Vitals-Erweiterung enthält jetzt mehr Informationen zur Fehlerbehebung, mit denen Sie die Ursachen von Core Web Vitals-Problemen ermitteln können.
Cumulative Layout Shift (CLS)
In diesem Beitrag wird der Messwert für Cumulative Layout Shift (CLS) vorgestellt und erläutert, wie er gemessen wird.
Mit WordPress Playground und WebAssembly browserinterne WordPress-Erlebnisse erstellen
Das vollständige, auf PHP basierende WordPress, das ausschließlich im Browser mit WebAssembly ausgeführt wird
PWAs in App-Shops
Progressive Web-Apps können in App-Shops wie dem Android Play Store oder Microsoft Store eingereicht werden.
Was sind Quellzuordnungen?
Verbessern Sie die Fehlerbehebung im Web mit Quellzuordnungen.
6 CSS-Snippets, die jeder Front-End-Entwickler 2023 kennen sollte
Leistungsstarkes und stabiles CSS, das Sie heute nutzen können.
Trigonometrische Funktionen in CSS
Mit CSS können Sie Sinus, Kosinus, Tangens und mehr berechnen.
Effiziente Vorgänge pro Videoframe für Videos mit requestVideoFrameCallback() ausführen
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.
GDE-Community-Highlight: Lars Knudsen
Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).
Tipp für schnellen CSS-Code! Animierter Text mit Farbverlauf
Erstellen wir diesen animierten Farbverlaufstexteffekt mit benutzerdefinierten Eigenschaften und Hintergrund-Clips. Rufen Sie CodePen auf und erstellen Sie einen neuen Codepen. Erstellen Sie das Markup für Ihren Text. Verwenden wir als Beispiel eine
Neue Muster für Medien-Apps
In diesem Blogpost stellen wir eine neue Sammlung von Mustern für Medien-Apps vor.
Chrometober wird erstellt!
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.
Komponente für die Kurzinfo erstellen
Ein grundlegender Überblick über das Erstellen eines farbanpassungsfähigen und barrierefrei zugänglichen benutzerdefinierten Elements für Kurzinfos.
Passkey für Anmeldungen ohne Passwort erstellen
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.
Mit einem Passkey über die Funktion „Autofill“ anmelden
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.
Komponente für unverankerte Aktionsschaltflächen erstellen
Ein grundlegender Überblick über die Erstellung von farbanpassungsfähigen, responsiv und barrierefrei zugänglichen UAS-Komponenten.
Best Practices für Schriftarten
Weitere Informationen zum Optimieren von Webschriftarten für Core Web Vitals.
GDE-Community-Highlight: Alba Silvente Fuentes
Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).
Farbkontrast von Webdesign testen
Ein Überblick über drei Tools und Techniken zum Testen und Überprüfen des barrierefreien Farbkontrasts Ihres Designs.
Tipp für schnellen CSS-Code! Animierter Loader
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
Hauptnavigation für eine Website erstellen
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.
Ist es :modal?
Mit diesem praktischen CSS-Pseudoselektor können Sie modale Elemente auswählen.
Stil für Creative-Liste
Hier stellen wir Ihnen einige nützliche und kreative Möglichkeiten zum Gestalten einer Liste vor.
Best Practices für Tags und Tag-Manager
Tags und Tag-Manager für Core Web Vitals optimieren
Illusion eines schiefen Rasters
Untersuchen Sie auf unterhaltsame Weise, wie Sie mit CSS optische Täuschungen nachbilden können.
So verwendet Nordhealth benutzerdefinierte Eigenschaften in Webkomponenten
Die Vorteile der Verwendung benutzerdefinierter Eigenschaften in Designsystemen und Komponentenbibliotheken.
Präzisere Steuerung von CSS-Transformationen mit individuellen Transformationseigenschaften
Hier erfahren Sie, wie Sie die einzelnen CSS-Eigenschaften für „Übersetzen“, „Rotieren“ und „Skalieren“ verwenden können, um Transformationen auf intuitive Weise anzugehen.
CSS-Rahmenanimationen
Verschiedene Möglichkeiten zum Animieren eines Rahmens in CSS
Wie die BBC HSTS zur Verbesserung der Sicherheit und Leistung einführt
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.
Warum sich Labor- und Felddaten voneinander unterscheiden (und was Sie dagegen tun können)
Hier erfahren Sie, warum bei Tools, mit denen Core Web Vitals-Messwerte überwacht werden, unterschiedliche Zahlen gemeldet werden und wie Sie diese Unterschiede interpretieren.
Eine Win-win-Situation
GDE Enrique Fernandez Guerra über die Open-Source-Bereitstellung seiner Nichtregierungsorganisation HelpDev.
Das Ende von Internet Explorer
Die Einstellung der Unterstützung für Internet Explorer bedeutete für die Kunden und Entwickler von Maersk.com.
Abschied von HTML5Rocks
Schön, Sie kennenzulernen.
Rezepte für eigene Kekse
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.
Audio- und Videowiedergabe im Web synchronisieren
Mit dem Web Audio API ist es möglich, die AV-Synchronisierung ordnungsgemäß durchzuführen.
Mit kegelförmigen Farbverläufen einen coolen Rahmen erstellen
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
Fehlerbehandlung bei Verwendung der Fetch API implementieren
Abfangen von Fehlern bei der Arbeit mit der Fetch API
Der Unterschied zwischen JavaScript-Bibliotheken und Frameworks
Unterschiede zwischen Frameworks und Bibliotheken im Kontext einer clientseitigen JavaScript-Umgebung verstehen
JavaScript-Bibliothek oder -Framework auswählen
Machen Sie sich mit den Entscheidungen zur Verwendung einer JavaScript-Bibliothek oder eines JavaScript-Frameworks vertraut.
Eine API für schnelle, ansprechende Webschriftarten
Update zur Google Fonts CSS API: Funktionsweise, Verwendung und effiziente Bereitstellung von Webschriftarten
Front-End-Entwicklerhandbuch für das Terminal
Mit dieser Ressource können Sie sich schnell am Terminal zurechtfinden.
GOV.UK entfernt jQuery vom Front-End.
GOV.UK hat seine jQuery-Abhängigkeit vom Front-End entfernt. Du errätst nie, was passiert ist. (Ja, natürlich.)
Schaltflächenkomponente erstellen
Ein grundlegender Überblick über die Erstellung von farbanpassungsfähigen, responsiv und barrierefrei zugänglichen Komponenten.
Bekämpfe den Vorablade-Scanner des Browsers nicht
Hier erfährst du, was der Vorabladescanner des Browsers ist, wie er die Leistung verbessert und wie du ihn vermeiden kannst.
Best Practices für die Messung von Web Vitals
So messen Sie Web Vitals mit Ihrem aktuellen Analysetool
Die Lücke füllen
Einfachere Entwicklung für das Web
Mut und Inspiration von der Entwickler-Community finden
Web Google Developers-Experten darüber, wie sie durch Mentoringprogramme zu führenden Unternehmen wurden.
Variable Schriftarten in der Praxis
Ein praktischer Leitfaden zu variablen Schriftarten mit vielen Beispielen.
Mit dem CSS Gradient Creator schnell schöne CSS-Farbverläufe erstellen
Mit diesem Tool von Josh W Comeau lassen sich ganz einfach optisch ansprechende Farbverläufe erstellen.
Detaillierte Analyse der wichtigsten Probleme von Webentwicklern
Eine Sammlung von Erkenntnissen zu den wichtigsten Problemen, die in Einzelgesprächen mit Webentwicklern gesammelt wurden.
Perfektioniere deine Website mit images.tooling.report
Sehen Sie sich den Status der Bildtools an.
Umfang der globalen und lokalen Variablen
Informieren Sie sich über den Umfang und seine Funktionsweise in JavaScript.
Dialogkomponente erstellen
Ein grundlegender Überblick darüber, wie du mithilfe des Elements „`` farbanpassungsfähige, responsiv und barrierefrei zugängliche Mini- und Mega-Modals erstellst.
Fehler bei der Medienwiedergabe im Web beheben
Hier erfahren Sie, wie Sie Fehler bei der Medienwiedergabe im Web beheben.
GDE-Community-Highlight: Nishu Goel
Eines von einer Reihe von Interviews mit Mitgliedern des Google Developers-Expertenprogramms (GDE).
Auswirkungen eines zu langen Lazy Loading auf die Leistung
Wenn Bilder im ersten Darstellungsbereich geladen werden, während das Lazy Loading für den Rest ein großes Maß ist, können die Web Vitals verbessert und weniger Byte geladen werden.
Eine Ladebalkenkomponente erstellen
Grundlegender Überblick über das Erstellen einer adaptiven und barrierefreien Ladeleiste mit dem Element „``.
Anmeldedaten aus Google Formulare speichern
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
Chrome und Firefox erreichen bald Hauptversion 100
Änderungen am User-Agent-String, Maßnahmen von Chrome und Firefox, um die Auswirkungen abzuschwächen, und wie du helfen kannst
Adaptives Favicon erstellen
Ein grundlegender Überblick über die Erstellung eines adaptiven Favicons.
HTTP-Cache aktualisieren und Sicherheit und Datenschutz verbessern
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.
In Emscripten auf Leinwand zeichnen
Hier erfahren Sie, wie Sie mit WebAssembly mit Emscripten 2D-Grafiken auf einem Canvas rendern können.
Zusätzliche HTML-Elemente
Wichtige Messwerte für eine intakte Website
USB-Anwendungen ins Web portieren Teil 2: gPhoto2
Hier erfährst du, wie gPhoto2 in WebAssembly übertragen wurde, um externe Kameras über USB über eine Web-App zu steuern.
Netzwerkfehler-Logging (NEL)
Mit Network Error Logging (NEL) können Sie clientseitige Netzwerkfehler erfassen.
WebAssembly-Funktionserkennung
Hier erfährst du, wie du die neuesten WebAssembly-Funktionen verwendest und gleichzeitig Nutzer in allen Browsern unterstützt.
USB-Anwendungen ins Web portieren Teil 1: libusb
Hier erfahren Sie, wie Code, der mit externen Geräten interagiert, mit WebAssembly und Fugu APIs ins Web portiert werden kann.
Komponente für Designschalter erstellen
Grundlegende Informationen zum Erstellen einer adaptiven und barrierefreien Komponente für den Designschalter.
JavaScript-Snippets mit Emscripten in C++ einbetten
Hier erfahren Sie, wie Sie JavaScript-Code in Ihre WebAssembly-Bibliothek einbetten, um mit der Außenwelt zu kommunizieren.
PWAs auf Oculus Quest 2
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.
Gebäudeentwurf
Hier erhalten Sie einen Einblick in die Prozesse und Tools, mit denen Designcember wie ein Weihnachtskalender gestaltet wurde.
Designcember-Rechner
Ein skeuomorpher Versuch, einen Solarrechner im Web nachzubilden, der den Umgebungslichtsensor und die Overlay-Funktion der Fenstersteuerung nutzt.
Deeplink in JavaScript mit StructuredClone
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.
Toast-Komponente erstellen
Ein grundlegender Überblick über das Erstellen einer adaptiven und barrierefreien Toast-Komponente.
Der UI-fund
Wir kündigen den UI-Fonds von Chrome an, um Zuschüsse für Personen bereitzustellen, die an Designtools, CSS und HTML arbeiten.
3D-Spielemenükomponente erstellen
Grundlegende Informationen zum Erstellen eines responsiven, adaptiven und barrierefrei zugänglichen 3D-Spielemenüs.
Neu in PageSpeed Insights
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.
In Richtung eines Messwerts für flüssige Animation
Hier finden Sie Informationen zum Messen von Animationen, zu Animationsframes und zur allgemeinen Seitenflüssigkeit.
Alles, was beim Chrome Dev Summit 2021 angekündigt wird
Eine Zusammenfassung aller wichtigen Ankündigungen vom Chrome Dev Summit 2021 mit Links zu weiteren Informationen.
Nutzerfluss in Lighthouse
Probieren Sie eine neue Lighthouse API aus, um die Leistung und Best Practices im gesamten Nutzerfluss zu messen.
Die Reise von Photoshop ins Web
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.
Komponente mit Mehrfachauswahl erstellen
Ein grundlegender Überblick über die Erstellung einer responsiven, adaptiven und zugänglichen Mehrfachauswahl-Komponente zum Sortieren und Filtern von Nutzererfahrungen.
So bewerten Sie die Ladeleistung vor Ort mithilfe von Navigation Timing und Resource Timing
Machen Sie sich mit den Grundlagen der Verwendung der Navigation API und der Resource Timing API vertraut, um die Ladeleistung vor Ort zu bewerten.
Sichere DOM-Manipulation mit der Sanitizer API
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.
Best Practices für die Verwendung von Einbettungen von Drittanbietern
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.
Auswirkungen von SPA-Architekturen auf Core Web Vitals
Antworten auf häufig gestellte Fragen zu SPAs, Core Web Vitals und dem Plan von Google, die aktuellen Messeinschränkungen zu bewältigen.
JavaScript-Eventing im Detail
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
Nicht-JavaScript-Ressourcen bündeln
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.
Komponente für geteilte Schaltfläche erstellen
Ein grundlegender Überblick über die Erstellung einer barrierefreien Komponente für eine geteilte Schaltfläche.
CSS-Modulskripts zum Importieren von Stylesheets verwenden
Hier erfahren Sie, wie Sie CSS-Modulskripts verwenden, um CSS-Stylesheets mit derselben Syntax wie JavaScript-Module zu importieren.
CSS-Akzentfarbe
Verwenden Sie nur eine Codezeile, um den integrierten HTML-Formulareingaben die Farbe Ihrer Marke zu verleihen.
Switch-Komponente erstellen
Eine grundlegende Übersicht zum Erstellen einer responsiven und barrierefreien Switch-Komponente.
Header für Client-Hinweise zu Medienfunktionen in Nutzereinstellungen
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
Breadcrumbs-Komponente erstellen
Ein grundlegender Überblick darüber, wie Sie eine responsive und zugängliche Breadcrumbs-Komponente erstellen, mit der Nutzer auf Ihrer Website navigieren können.
WebAssembly-Threads aus C, C++ und Rust verwenden
Hier erfahren Sie, wie Sie Multithread-Anwendungen, die in anderen Sprachen geschrieben sind, in WebAssembly einbinden.
Medienverschlüsselung
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.
Medienkonzepte
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.
PWA mit Offlinestreaming
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.
Grundlagen des Media-Streamings
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.
Mit Felddaten im Update der Web Vitals-Erweiterung den richtigen Weg finden
Mit der Web Vitals-Erweiterung können Sie jetzt ermitteln, wie Ihre lokalen Erfahrungen mit der tatsächlichen Nutzererfahrung verglichen werden.
Ein Farbschema erstellen
Ein grundlegender Überblick über die Einrichtung eines dynamischen und konfigurierbaren Farbschemas
CSS-Größenanpassung für @font-face
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
Bilder auf Ihrer Website mit AVIF komprimieren
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.
CSS für Web Vitals
In diesem Artikel werden Verfahren im Zusammenhang mit Preisvergleichsportalen zur Optimierung von Web Vitals beschrieben.
Cumulative Layout Shift in Webtools
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.
Neue CSS-Funktionen für Pseudoklassen-Selektoren :is() und :where()
Diese scheinbar kleinen Ergänzungen der Syntax von CSS-Selektoren werden eine große Wirkung haben.
Neues Training zu progressiven Web-Apps verfügbar
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.
Zu User-Agent-Client-Hints migrieren
Strategien für die Migration Ihrer Website von der Nutzung des User-Agent-Strings zu den neuen User-Agent-Client-Hints
Das neue responsive Webdesign in einer komponentengesteuerten Welt
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.
Kurzübersicht zu Sicherheitsheadern
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.
Excalidraw und Fugu: Kaufprozesse bei Hauptdiensten verbessern
Zusammenfassung des Vortrags von Thomas Steiner bei der Google I/O 2021 mit dem Titel „Excalidraw and Fugu: Accelerate Core User Journeys“
ES-Module in Service Workern
Service Worker können statische Importe von ES-Modulen verwenden, um zusätzlichen Code als Alternative zu importScripts() einzufügen.
Komponente für die Bildlaufleiste für Medien erstellen
Ein grundlegender Überblick über die Erstellung einer responsiven horizontalen ScrollView für Fernseher, Smartphones, Computer usw.
Web Vitals mit Lighthouse optimieren
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.
Asynchrone Web-APIs von WebAssembly verwenden
Hier erfahren Sie, wie Sie asynchrone Web-APIs aufrufen, wenn Sie traditionell synchrone Sprachen mit WebAssembly kompilieren.
Drittanbieter-Skripts unter Kontrolle halten
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.
Overlay der Fenstersteuerelemente in der Titelleiste der PWA anpassen
Mit der Funktion „Fenstersteuerungs-Overlay“ können Entwickler die Titelleiste installierter PWAs so anpassen, dass sie wie Apps aussehen.
OTP-Formulare in ursprungsübergreifenden iFrames mit der WebOTP API ausfüllen
Die WebOTP API kann jetzt ein OTP aus einem iFrame empfangen.
Hindernisse mit der DataTransfer API beseitigen
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.
Animationen für geteilten Text erstellen
Ein grundlegender Überblick über das Erstellen von geteilten Buchstaben und Wortanimationen.
Weiterentwicklung des CLS-Messwerts
Es ist geplant, den CLS-Messwert so zu verbessern, dass er gegenüber langlebigen Seiten fairer wird.
Zufriedenheit von Webentwicklern
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.
Komponente „Einstellungen“ erstellen
Ein grundlegender Überblick über das Erstellen einer Einstellungskomponente für Schieberegler und Kästchen.
Fehler bei Layout Shifts beheben
Erfahren Sie, wie Sie Layoutverschiebungen erkennen und korrigieren können.
JavaScript: Was bedeutet das?
Den Wert von 'Dies' zu ermitteln, kann in JavaScript schwierig sein. Gehen Sie wie folgt vor...
Schlussfolgerungen eines Webentwicklers zu Mini-Apps
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.
Mini-App-Komponenten
Dieses Kapitel enthält Details zu den Komponenten, die auf allen Mini-App-Plattformen verfügbar sind.
Programmierung der Mini-App
In diesem Kapitel wird die Art der Programmierung der Mini-App vorgestellt.
Markup, Stile, Skripte und Updates für Mini-Apps
In diesem Kapitel werden die Optionen für Markup, Stile, Skripte und Updates für verschiedene Mini-Apps-Plattformen beschrieben.
Anwendung der Programmierprinzipien für Mini-Apps auf ein Beispielprojekt
Dieses Kapitel zeigt ein Beispielprojekt, das dem Ansatz „Programmieren mit der Mini-App“ folgt.
Open-Source-Projekte der Mini-App
In diesem Kapitel wird eine Auswahl interessanter Open-Source-Projekte für Mini-Apps vorgestellt.
Projektstruktur, Lebenszyklus und Bündelung
In diesem Kapitel werden die Projektstruktur, der Lebenszyklus und die Bündelung von Mini-Apps behandelt.
Was sind H5 und QuickApp?
Dieses Kapitel enthält Hintergrundinformationen zu H5-Apps und QuickApp, die sich von Mini-Apps unterscheiden.
Streams – der ultimative Leitfaden
Mit der Streams API kann JavaScript programmatisch auf Datenströme zugreifen, die über das Netzwerk empfangen werden, und sie nach Bedarf verarbeiten.
Tab-Komponente erstellen
Eine grundlegende Übersicht über die Erstellung einer Tab-Komponente ähnlich der in iOS- und Android-Apps.
Anleitung zum Aktivieren der ursprungsübergreifenden Isolierung
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.
Die CSS-Eigenschaft „aspect-ratio“
Mit der neuen CSS-Eigenschaft für das Seitenverhältnis kann das Seitenverhältnis innerhalb von Bildern und Elementen jetzt einfacher beibehalten werden.
WebRTC ist jetzt ein W3C- und IETF-Standard
Ein kurzer Überblick über die Geschichte, Architektur, Anwendungsfälle und Zukunft von WebRTC.
Best Practices für Karussells
Hier erfahren Sie, wie Sie die Leistung und Nutzerfreundlichkeit von Karussells optimieren.
HTTPS für die lokale Entwicklung verwenden
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
Wann sollte HTTPS für die lokale Entwicklung verwendet werden?
Die Verwendung von http://localhost für die lokale Entwicklung ist meistens zulässig, außer in einigen Sonderfällen. In diesem Beitrag erfahren Sie, wann Sie Ihre lokale Entwicklungswebsite mit HTTPS ausführen müssen. Weitere Informationen finden Sie
Feedback gewünscht: Verbesserung des Messwerts für den Layout Shift für langlebige Seiten
Informieren Sie sich über unsere Pläne zur Verbesserung des Messwerts „Cumulative Layout Shift“ und geben Sie uns Feedback.
Komponente „Sidenav“ erstellen
Eine grundlegende Übersicht zum Erstellen einer responsiven ausblendbaren Seitenleiste
Codelab: Sidenav-Komponente erstellen
Hier erfahren Sie, wie Sie eine responsive Layoutkomponente für das ausblendbare seitliche Navigationslayout erstellen.
In CSS zentrieren
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.
Codelab: CSS zentrieren
Lernen Sie fünf verschiedene Zentrierungstechniken mit CSS kennen.
Finde deinen Cache ❤️
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.
Modernen JavaScript-Code für schnellere Anwendungen veröffentlichen, versenden und installieren
Modernes JavaScript bietet Verbesserungen hinsichtlich Größe und Leistung im Vergleich zu transpiliertem ES5 und wird von 95% der Webbrowser unterstützt. Das Aktivieren der modernen JavaScript-Ausgabe bietet Ihrer Anwendung diese Vorteile. Die Auswirkungen werden jedoch durch Abhängigkeiten eingeschränkt, die bereits in ES5 übertragen wurden. In diesem Leitfaden erfahren Sie, wie Sie moderne Pakete auf npm veröffentlichen und moderne JavaScript-Pakete installieren und optimal bündeln können.
Browserübergreifende Paint Worklets und Houdini.how
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 das Anmeldeformular
Helfen Sie Ihren Nutzern dabei, sich zu registrieren, anzumelden und ihre Kontodetails zu verwalten.
Audits mit AutoWebPerf automatisieren
Ein neues modulares Tool, das die automatische Erfassung von Leistungsdaten aus mehreren Quellen ermöglicht.
Best Practices für Zahlungs- und Adressformulare
Maximieren Sie Conversions, indem Sie Ihren Nutzern helfen, Adress- und Zahlungsformulare so schnell und einfach wie möglich auszufüllen.
Codelab: Best Practices für Zahlungsformulare
Best Practices für Zahlungsformulare
Best Practices für SMS-OTP-Formulare
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.
Codelab: Best Practices für Adressformulare
Best Practices für Adressformulare
Codelab: Best Practices für Anmeldeformulare
Nutzen Sie plattformübergreifende Browserfunktionen, um ein einfaches Anmeldeformular zu erstellen, das sicher, leicht zugänglich und benutzerfreundlich ist.
Worker – Übersicht
Wie Web Worker und Service Worker die Leistung Ihrer Website verbessern können und wann Sie Web Worker und Service Worker verwenden
Aktualisierungen an Seiten mit Service Workern senden
Wie Service Worker proaktiv mit der Seite kommunizieren können, um über bestimmte Ereignisse zu informieren.
Imperativer Leitfaden zum Caching
Informationen zum Kommunizieren von Fenster- und Service Workern zur Ausführung von Aufgaben in Bezug auf Leistung, Caching und Offline.
Bidirektionale Kommunikation mit Service Workern
Einbinden eines Kommunikationskanals zwischen der Seite und dem Service Worker einrichten
Deaktiviere die Mausbeschleunigung, um ein besseres FPS-Spielerlebnis zu ermöglichen
Webanwendungen können jetzt die Mausbeschleunigung beim Erfassen von Zeigerereignissen deaktivieren.
Codelab: Stories-Komponente erstellen
Hier erfährst du, wie du ähnliche Funktionen wie Instagram Stories im Web erstellst.
Komponente „Stories“ erstellen
Ein grundlegender Überblick darüber, wie du eine ähnliche Nutzererfahrung wie Instagram Stories im Web bietest.
Schematische SameSite
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.
Lazy Loading auf Browserebene für CMS
Dieser Beitrag enthält eine Anleitung zur Verwendung des Ladeattributs in Content-Management-Systemen.
Codelab: Client für Push-Benachrichtigungen erstellen
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.
Codelab: Push-Benachrichtigungsserver erstellen
In dieser interaktiven Anleitung erfahren Sie, wie Sie einen Server erstellen, der Push-Benachrichtigungsabos verwaltet und Web-Push-Protokollanfragen an einen Push-Dienst sendet.
Push-Benachrichtigungen
Eine Übersicht darüber, was Push-Benachrichtigungen sind, warum sie verwendet werden können und wie sie funktionieren.
Offlinenutzung messen
Erfassen der Offlinenutzung Ihrer Website, damit Sie begründen können, warum Ihre Website eine bessere Offlinenutzung erfordert
Beispiele für leistungsstarke CSS-Animationen
Ein Video, in dem gezeigt wird, wie mit Hochleistungstechniken komplexe und schöne Animationen erstellt werden können.
CSS „min()“, „max()“ und „clamp()“
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.
Signed Exchanges (SXGs)
Ein SXG ist ein Übermittlungsmechanismus, der es ermöglicht, den Ursprung einer Ressource unabhängig von der Bereitstellung zu authentifizieren.
Logische Layoutverbesserungen mit ablaufbezogenen Kurzschreibweisen
Neue Kurzschreibweisen für logische Eigenschaften und neue eingefügte Eigenschaften für Chromium.
Leistungsstarke CSS-Animationen erstellen
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.
Bereichsanfragen in einem Service Worker verarbeiten
Der Service Worker muss wissen, was zu tun ist, wenn eine Teilantwort angefordert wird.
Warum sind manche Animationen langsam?
Gute Animationen sind das Herzstück einer guten Weberfahrung. In diesem Beitrag wird erklärt, warum bestimmte Arten von Animationen besser abschneiden als andere.
Schwenken, Neigen und Zoomen der Kamera steuern
Die Funktionen zum Schwenken, Neigen und Zoomen von Kameras können jetzt auch im Web gesteuert werden.
Was sind Ursprungstests von Drittanbietern?
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
Speicherlecks bei getrennten Fenstern
Getrennte Fenster sind eine häufige Art von Speicherlecks, die besonders schwer zu finden und zu beheben sind.
Offline-Fallback-Seite erstellen
Hier erfahren Sie, wie Sie eine einfache Offline-Nutzung für Ihre App erstellen.
Interessante Bildformen mit der CSS-Eigenschaft „clip-path“ 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.
Mit der CSS-Eigenschaft "mask-image" Effekte auf Bilder anwenden
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.
Benutzerdefinierte Aufzählungszeichen mit CSS ::marker
Verwenden Sie CSS, um die Farbe, Größe oder Art von Zahlen oder Aufzählungszeichen in Elementen anzupassen.
Erleichtern Sie Ihren Nutzern das Ändern von Passwörtern, indem Sie eine bekannte URL zum Ändern von Passwörtern hinzufügen
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.
Zahlungstransaktionen mit einem Service Worker 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.
Umgang mit optionalen Zahlungsinformationen mit einem Service Worker
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.
ARIA: Gift oder Gegenmittel?
Wie unangebrachte Screenreader-Hilfe die Barrierefreiheit heilt, wenn sie nicht mit Salz verreibt!
Speicherlecks in WebAssembly mit Emscripten beheben
Hier erfährst du, wie du mit WebAssembly Bibliotheken, die in anderen Sprachen geschrieben sind, sicher und idiomatisch ins Web stellen kannst.
content-sichtbarkeit: die neue CSS-Eigenschaft zur Steigerung der Rendering-Leistung
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.
Blockierung des Zugriffs auf die Zwischenablage aufheben
Die Async Clipboard API vereinfacht das berechtigungsfreundliche Kopieren und Einfügen.
Web auf Android-Geräten
Hier erfährst du, wie verschiedene Komponenten verwendet werden können, um Webinhalte in Android-Apps zu rendern.
Best Practices für Verweis-URLs und Referrer-URL-Richtlinien
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.
PWA bei Google erstellen, Teil 1
Was das Bulletin-Team bei der Entwicklung einer PWA über Service Worker gelernt hat.
Leistungsüberwachung mit Lighthouse CI
Hier erfahren Sie, wie Sie Lighthouse CI einrichten und in Entwicklerworkflows einbinden.
Nutzerfreundlichkeit von Passkeys in Google-Konten gestalten
Mehr Sicherheit und eine bessere Nutzererfahrung für Google-Konten
@property: CSS-Variablen besondere Möglichkeiten
Hier erfahren Sie, wie Sie benutzerdefinierte CSS-Eigenschaften mit semantischer Eingabe, Fallback-Wert und mehr direkt in Ihrer CSS-Datei implementieren.
Service Worker-Caching und HTTP-Caching
Die Vor- und Nachteile einer konsistenten oder unterschiedlichen Ablauflogik auf der Ebene des Service Worker-Cache und des HTTP-Cache.
Webbasierte Zahlungs-App registrieren
Hier erfahren Sie, wie Sie eine webbasierte Zahlungs-App im Browser eines Kunden registrieren. Außerdem lernen Sie, wie Sie Fehler beheben.
Versand- und Kontaktdaten über eine Android-Zahlungs-App angeben
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.
Übersicht über webbasierte Zahlungs-Apps
Hier erfährst du, wie du deine webbasierte Zahlungs-App für Web Payments anpasst und deinen Kunden eine bessere Nutzererfahrung bietet.
Mit dem UX-Bericht für Chrome die Leistung vor Ort analysieren
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 verarbeiten
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.
Perfektes Rendering auf Pixel mit devicePixelContentBox
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.
Zehn moderne Layouts in einer einzigen CSS-Zeile
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.
Web.dev LIVE – Zusammenfassung
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.
Best Practices für Anmeldeformulare
Mit plattformübergreifenden Browserfunktionen können Sie sichere, leicht zugängliche und benutzerfreundliche Anmeldeformulare erstellen.
Mit plattformübergreifenden Browserfunktionen ein Anmeldeformular erstellen
Mit plattformübergreifenden Browserfunktionen können Sie ein einfaches Anmeldeformular erstellen, das sicher, leicht zugänglich und benutzerfreundlich ist.
Progressive Web-Apps schrittweise optimieren
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.
Webentwickler-Tools zur Behebung von JavaScript-Problemen in der Google Suche
SEO-Probleme auf einzelnen Seiten oder auf der gesamten Website beheben
Stabile Suchfunktionen mit Workbox
Hier erfahren Sie, wie Sie mit Workbox mithilfe der Hintergrundsynchronisierung und der Push API eine stabile Suche implementieren.
Einer Webseite Medien hinzufügen
Betten Sie mithilfe der Tags und eine Mediendatei in eine Webseite ein.
Verlinken, wo noch niemand etwas verknüpft hat: Textfragmente
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.
PWAs wie eine App gestalten
Hier erfährst du, wie du deine progressive Web-App wie eine echte App gestalten kannst, indem du plattformspezifische App-Muster mit Webtechnologien implementierst.
Einen guten Browser-Programmfehler melden
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.
Leistung mit dem RAIL-Modell messen
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.
Navigationen in React mit Quicklink beschleunigen
Quicklink ist eine Bibliothek, mit der Seiten schneller geladen werden können, indem Links im Darstellungsbereich bei Inaktivität vorab abgerufen werden.
Ressourcen mit Fetch Metadata vor Webangriffen schützen
Fetch Metadata ist eine neue Webplattformfunktion, mit der sich Server vor ursprungsübergreifenden Angriffen schützen können.
Neuanordnung von Inhalten
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.
Web Animations API-Verbesserungen in Chromium 84
Jetzt wird es viel einfacher, Ihre Webanimationen umzuschreiben.
Zahlungs-Apps mit Web Payments unterstützen
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.
Lebensdauer einer Zahlungstransaktion
Hier erfährst du, wie Händler Zahlungs-Apps integrieren, wie Zahlungstransaktionen mit der Payment Request API funktionieren und welche Möglichkeiten Web Payments bietet.
Entwicklerleitfaden für Android-Zahlungs-Apps
Hier erfährst du, wie du deine Android-Zahlungs-App an Web Payments anpassen und Kunden so eine bessere Nutzererfahrung bieten kannst.
Mehr variable Schriftarten für die macOS-System-UI-Schriftart in Chromium 83
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.
Wie progressive Web-Apps zum Unternehmenserfolg beitragen
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.
Mit App-Verknüpfungen Dinge schnell erledigen
Über App-Verknüpfungen können Nutzer schnell auf eine Reihe häufiger Aktionen zugreifen.
Entfernen von AppCache vorbereiten
Details zu Chrome und anderen Browsern, in denen AppCache entfernt wird
Permanentspeicher
Nichtflüchtiger Speicher kann dazu beitragen, wichtige Daten vor der Bereinigung zu schützen und das Risiko von Datenverlusten zu verringern.
Installationsstrategie festlegen
Best Practices für die Kombination verschiedener Installationsangebote, um die Installationsraten zu erhöhen und Plattformwettbewerb und Kannibalisierung zu vermeiden.
So vergrößert CommonJS Ihre Bundles
CommonJS-Module sind sehr dynamisch, was verhindert, dass JavaScript-Optimierer und Bundles erweiterte Optimierungen durchführen.
Warum Sie für leistungsstarke Funktionen eine ursprungsübergreifende Isolierung benötigen
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.
Verbesserte Next.js- und Gatsby-Seitenladeleistung durch detailliertes Aufteilen
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.
"Same-site" und "same-origin"
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.
Website mit COOP und COEP „ursprungsübergreifend isoliert“ machen
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.
Gesamtspeichernutzung Ihrer Webseite mit measureUserAgentSpecificMemory() überwachen
Hier erfahren Sie, wie Sie die Speichernutzung Ihrer Webseite in der Produktion messen, um Regressionen zu erkennen.
web.dev Engineering Blog Nummer 1: How we build the site and use Web Components
In diesem ersten Beitrag des Entwicklungsteams von web.dev erfahren Sie, wie wir die Website erstellen und wie wir Eleventy und Web Components nutzen.
Verbessertes Standardstil im dunklen Modus mit der CSS-Eigenschaft „color-scheme“ und dem entsprechenden Meta-Tag
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.
Sorgen Sie dafür, dass Ihre Website während der Coronakrise für alle Nutzer verfügbar und nutzbar ist.
So stellen Sie sicher, dass die Hauptfunktion Ihrer Website immer verfügbar, zugänglich, sicher, nutzbar, auffindbar und schnell ist.
Bedienungshilfen für Farbe und Kontrast
Erfahren Sie, wie Sie die Barrierefreiheit Ihrer Seiten verbessern können, indem Sie die Verwendung von Farbe und Kontrast verbessern.
Serverüberlastung beheben
Engpässe bei Servern erkennen, Engpässe schnell beheben, Serverleistung verbessern und Regressionen verhindern
Barrierefreie Tippziele
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.
Barrierefreies responsives Design
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.
DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern
Jetzt neu: Vertrauenswürdige Typen: eine Browser-API, die das DOM-basierte Cross-Site-Scripting in modernen Webanwendungen verhindert.
PWA in Ihrer Android-App verwenden
Eine progressive Web-App in einer Android-App öffnen
Signed HTTP Exchanges (SXG) mit nginx einrichten
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.
So verteilen Sie Signed HTTP Exchanges (SXG) mit nginx
Informationen zum Abrufen und Bereitstellen von SXG-Dateien mit nginx und zu den Herausforderungen beim Vorabruf von Unterressourcen.
CSS-Hintergrundbilder mit Medienabfragen optimieren
Verwenden Sie Medienabfragen, um Bilder zu senden, die nur so groß wie nötig sind. Diese Methode wird allgemein als responsive Bilder bezeichnet.
Websitegeschwindigkeit funktionsübergreifend verbessern
Wie andere Abteilungen Ihrem Projekt zur Optimierung der Websitegeschwindigkeit helfen können
Scrollen beim Andocken nach Layoutänderungen
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.
Signed Exchanges mit Web Packager einrichten
Hier erfahren Sie, wie Sie Signed Exchanges (SXGs) mit Web Packager bereitstellen.
Eigene In-App-Installationskampagnen bereitstellen
Mit dem Ereignis „beforeinstallprompt“ können Sie Ihren Nutzern eine individuelle, nahtlose In-App-Installation ermöglichen.
Augmented Reality: Vielleicht kennen Sie es schon
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.
Virtuelle Objekte in realen Ansichten positionieren
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.
Virtual Reality jetzt im Web verfügbar, Teil II
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.
Weiterentwicklung der Web-Framework-Umgebung
Hier erfährst du, wie Chrome in eine Reihe von Open-Source-Tools investiert, um das JavaScript-System voranzubringen.
Was sind progressive Web-Apps?
Eine Einführung zu progressiven Web-Apps (PWAs) und den drei Säulen, die sie von anderen Web-Apps unterscheiden.
Mit Workbox PWAs in integrierte Freigabe-UIs einbinden
Hier erfahren Sie, wie Sie Routen in Workbox registrieren, damit Ihre progressive Web-App neben plattformspezifischen Apps in Freigabe-UIs auf Systemebene angezeigt wird.
Adaptive Unterstützung von Symbolen in PWAs mit maskierbaren Symbolen
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.
Verbessertes Schließen von Seiten im synchronen XMLHttpRequest()
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.
Threading im Web mit Modul-Workern
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.
Weiterentwicklung von Speed-Tools: Highlights vom Chrome Developer Summit 2019
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.
Adaptives Laden: Webleistung auf langsamen Geräten verbessern
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.
Web Worker verwenden, um JavaScript über den Hauptthread des Browsers auszuführen
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.
Feedback aus der Umfrage zur Bildoptimierung im Sommer 2019
Kommentare von Umfrageteilnehmern zu verschiedenen Techniken zur Bildoptimierung.
Server für Push-Benachrichtigungen erstellen
In diesem Codelab erfahren Sie, wie Sie einen Server für Push-Benachrichtigungen erstellen.
Leistung als Standard mit Next.js
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
Integration mit der Web Share API in die Freigabe-UI des Betriebssystems
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.
Codeaufteilung mit dynamischen Importen in Next.js
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.
AMP in Ihrer Next.js-App garantieren
Vorteile und Vor- und Nachteile der Unterstützung von AMP in der Next.js-App AMP ist ein Webkomponenten-Framework, das schnelle Seitenladevorgänge garantiert. Next.js bietet integrierte Unterstützung für AMP. In diesem Leitfaden wird zuerst
Routen-Vorabruf in Next.js
Wie Next.js die Navigation mithilfe von Routen-Prefetching beschleunigt und wie Sie diese Funktion anpassen. In diesem Beitrag erfahren Sie, wie das Routing in Next.js funktioniert, wie es für Geschwindigkeit optimiert wird und wie Sie es an Ihre
Virtual Reality – jetzt im Web
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.
SameSite-Cookie-Rezepte
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.
Cookies
Hier erfahren Sie, wie Cookies funktionieren und was Erstanbieter- und Drittanbieter-Cookies sind.
Schnelle Anzeigen sind wichtig
Die Vorteile schneller Anzeigen und die Anzeigengeschwindigkeit verstehen
Nutzer mit Push-Benachrichtigungen erneut ansprechen
Nutzen Sie Push-Benachrichtigungen, um Nutzern gezielte und zeitnahe Updates zu bieten.
Erste Schritte mit der Notifications API
In diesem Codelab erfahren Sie, wie Sie eine Nutzerberechtigung anfordern und Benachrichtigungen senden.
Service Worker zum Verwalten von Benachrichtigungen verwenden
In diesem Codelab erfahren Sie, wie Sie Benachrichtigungen mit einem Service Worker verwalten.
Layout-Instabilität beheben
Eine Schritt-für-Schritt-Anleitung zur Verwendung von WebPageTest zum Erkennen und Beheben von Layoutinstabilitätsproblemen
Techniken, mit denen eine Webanwendung auch auf einem Feature-Phone schneller geladen wird
Feature-Phones sind wieder im Kommen und beliebt, insbesondere in Schwellenländern, in denen 2G die Norm ist. Hier sind unsere Erkenntnisse, die wir mit der Entwicklung von PROXX, einem mobilen Minesweeper-Klon, gewonnen haben, auf Feature-Phones mit 2G schnell laden.
Intelligentere benutzerdefinierte Eigenschaften mit der neuen API von Houdini
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.
Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen
Hier erfährst du mehr über den Ressourcenhinweis und die Verwendung von rel=prefetch.
Zwei Möglichkeiten für den Vorabruf: <link> Tags und HTTP-Header
Erfahren Sie, wie Sie zukünftige Navigationen durch Vorabruf von Ressourcen beschleunigen können.
Was sind gemischte Inhalte?
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.
Probleme mit gemischten Inhalten beheben
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.
Mehr als nur Bilder – mit einfachen Videos für das Web
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.
Ihrer Progressive Web-App ein Apple Touch-Symbol hinzufügen
Eine interaktive Demonstration, die zeigt, wie festgelegt wird, welches Symbol auf iOS-Startbildschirmen angezeigt werden soll.
Ready Player-Web
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.
Progressive Web-Apps auf Websites mit mehreren Ursprungsservern
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.
Schriftgröße für das Web verringern
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.
Laden und Rendern von WebFont optimieren
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.
Progressive Web-App mit der Angular CLI erstellen
Hier erfahren Sie, wie Sie installierbare progressive Angular-Anwendungen erstellen.
Effizientes Laden von Drittanbieter-JavaScript
Hier erfahren Sie, wie Sie Ladezeiten und die Nutzerfreundlichkeit verbessern, indem Sie häufige Fallstricke bei der Verwendung von Drittanbieter-Skripts vermeiden.
Bilder mit Bild-CDNs optimieren
Sie können ein Bild-CDN verwenden, um die Bilder Ihrer Website zu optimieren und die Datenkosten für Ihre Nutzer zu reduzieren.
Langsamen Drittanbieter-JavaScript-Code erkennen
Hier erfahren Sie, wie Sie mit Lighthouse und den Chrome-Entwicklertools langsame Drittanbieterressourcen ermitteln.
Leistung von Drittanbieter-JavaScript
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.
Funktionsfähigere Steuerelemente für Formulare
Neue Webplattformfunktionen erleichtern das Erstellen benutzerdefinierter Elemente, die wie integrierte Formularsteuerelemente funktionieren.
Drittanbieter-JavaScript optimieren
Hier erfahren Sie mehr über Techniken zur Optimierung langsamer Drittanbieterressourcen mit Unterstützung von Lighthouse.
Frühzeitige Netzwerkverbindungen herstellen, um die wahrgenommene Seitengeschwindigkeit zu verbessern
Hier finden Sie Informationen zu Ressourcenhinweisen für die Ressourcen rel=preconnect und rel=dns-prefetch und deren Verwendung.
Hintergründe im Stil eines Betriebssystems mit Bilderrahmenfilter erstellen
Hier erfahren Sie, wie Sie UI-Elementen im Web mithilfe der CSS-Eigenschaft „Hintergrundfilter“ Hintergrundeffekte wie Weichzeichnen und Transparenz hinzufügen.
Aktuelle Informationen mit „Stale-while-revalid“
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.
Große Listen mit dem Angular CDK virtualisieren
Hier erfahren Sie, wie Sie große Listen durch die Implementierung von virtuellem Scrollen mit dem Angular Component Dev Kit reaktionsschneller gestalten.
Änderungserkennung von Angular optimieren
Hier erfährst du, wie du die Änderungserkennung deiner Angular App optimieren kannst, damit sie schneller reagiert.
Strategien zum Vorabladen von Routen in Angular
Hier erfahren Sie, wie Sie die Strategien von Angular für das Vorabladen schnellerer Apps anwenden.
Schnellere Webnavigation mit vorausschauendem Vorabruf
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.
Video basierend auf der Netzwerkqualität an die Bildbereitstellung anpassen
Hier erfahren Sie, wie Sie Ihre Inhalte mithilfe der Network Information API an die Qualität des Werbenetzwerks anpassen können.
Barrierefreiheit deiner Angular App mit Codelyzer prüfen
Erfahren Sie, wie Sie Ihre Angular-Anwendung mit Codelyzer zugänglich machen.
Precaching mit dem Angular-Service-Worker
Hier erfahren Sie, wie Sie mit dem Angular Service Worker die statischen Assets in Ihrer App vorab im Cache speichern.
Leistungsbudgets mit der Angular CLI
Hier erfahren Sie, wie Sie Leistungsbudgets direkt in der Angular CLI verwenden.
bevorzugt-Farbschema: Hallo Dunkelheit, mein alter Freund
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.
Codeaufteilung auf Routenebene in Angular
Hier erfahren Sie, wie Sie Ihr anfängliches App Bundle durch Codeaufteilung auf Routenebene verkleinern.
Die besten Tipps für eine bessere Webleistung
Verwenden Sie srcset, um automatisch die richtige Bildgröße auszuwählen.
Erste Schritte: Angular-Anwendung optimieren
Hier erfahren Sie, wie Sie Ihre Angular-Anwendung schneller, zuverlässiger, auffindbar, installierbar und barrierefrei gestalten.
Webkomponenten: die geheime Zutat für das Web
In diesem Beitrag fasst Kevin Schaaf vom Polymer Project und Caridy Patiño von Salesforce den Stand der Webkomponenten im Jahr 2019 zusammen.
Lighthouse für Leistungsbudgets verwenden
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.
Der Wert der Geschwindigkeit
Demonstrieren Sie den Umsatz, der durch die Verbesserungen der Website erzielt wird, und schließen Sie externe Faktoren wie Marketingkampagnen aus.
Aktualisierungen der Web Payments APIs
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.
Adressleisten-Installation für progressive Web-Apps auf dem Desktop
Progressive Web-Apps können ganz einfach über eine neue Installationsschaltfläche in der Adressleiste von Chrome (Omnibox) installiert werden.
Wie kann die Conversion-Leistung durch die Leistung gesteigert werden?
Hier erfahren Sie, wie sich die Websiteleistung in verschiedenen Bereichen des E-Commerce-Trichters auswirkt.
Muster für die Förderung der PWA-Installation
Installation progressiver Web-Apps und Best Practices
Service Worker-Mentalität
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.
Wie teile ich Nutzern mit, dass meine PWA installierbar ist?
Installation progressiver Web-Apps und Best Practices
Bildrichtlinien für kurze Ladezeiten und mehr
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.
Verzögern lange JavaScript-Aufgaben Ihre Zeit bis Interaktivität?
Hier erfahren Sie, wie Sie kostspielige Diagnosen stellen, die Nutzerinteraktionen verhindern.
Extrahieren Sie kritische CSS-Code und fügen Sie sie inline ein.
Hier erfahren Sie, wie Sie mit „Critical“ kritische CSS extrahieren und inline einfügen und Renderingzeiten verbessern.
Kritisches CSS extrahieren
Hier erfahren Sie, wie Sie die Renderingzeiten mit wichtigen CSS-Techniken verbessern und das beste Tool für Ihr Projekt auswählen.
Geschwindigkeit in großem Maßstab: Was gibt es Neues bei der Webleistung?
Bei der Google I/O 2019 haben wir drei neue Initiativen zum Thema Webleistung vorgestellt, die die Nutzerfreundlichkeit für alle verbessern sollen.
Wir stellen vor: PROXX
PROXX ist ein Minensweeper-Spiel, das als PWA erstellt wurde. Es funktioniert auf einer Vielzahl von Geräten und verbessert das visuelle Erscheinungsbild mit zunehmender Leistung des Geräts schrittweise.
SameSite-Cookies
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.
Visuelle Suche mit dem Web Perception Toolkit
Wäre es nicht toll, wenn Nutzer Ihre Website mithilfe ihrer Kamera durchsuchen könnten?
Adaptive Bereitstellung basierend auf der Netzwerkqualität
Verwenden Sie die Network Information API, um die Assets, die Nutzern basierend auf der Qualität ihrer Verbindung bereitgestellt werden, anzupassen.
Praktische Funktionen mit Portals: Nahtlose Navigation im Web
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.
Netzwerknutzlasten mit Brotli reduzieren und komprimieren
In diesem Codelab erfährst du, wie du mit der Brotli-Komprimierung die Komprimierungsverhältnisse und die Gesamtgröße deiner App weiter reduzieren kannst.
web.dev bei der I/O 2019
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.
Wie wird die Geschwindigkeit gemessen?
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.
Schnell sein
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.
Was ist Geschwindigkeit?
Geschwindigkeit ist wichtig, aber was genau meinen wir damit? Was bedeutet eine schnelle Website?
Prüfung der Barrierefreiheit mit react-axe und eslint-plugin-jsx-a11y
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.
Routen vorab rendern – mit Reaktions-Snap
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.
Precaching in Create React App mit Workbox
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.
Codeaufteilung mit React.lazy und Suspense
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.
Große Listen mit dem Reaktionsfenster virtualisieren
re-window ist eine Bibliothek, mit der große Listen effizient gerendert werden können.
Web-App-Manifest mit Create React App hinzufügen
„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.
Erste Schritte: React-Anwendung optimieren
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.
Codelab: Wichtige Assets vorab laden, um die Ladegeschwindigkeit zu verbessern
In diesem Codelab erfährst du, wie du die Leistung einer Seite durch Vorabladen und Vorabruf von Ressourcen verbessern kannst.
bevorzugt-reduzierte-Bewegung: Manchmal ist weniger Bewegung mehr
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.
Nicht kritisches CSS verschieben
Hier erfahren Sie, wie Sie nicht kritisches CSS verschieben, um den kritischen Rendering-Pfad zu optimieren und First Contentful Paint (FCP) zu verbessern.
Vertrauen ist gut, Beobachtung ist besser: Intersection Observer v2
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.
Responsives Webdesign – Grundlagen
Erstellen Sie Websites, die zu den Anforderungen und Funktionen des Geräts passen, auf dem sie angezeigt werden.
Konstruierbare Stylesheets
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.
Rendering im Web
Empfehlungen zur Implementierung von Logik und Rendering in Apps.
Leistungsbudgets in Ihren Build-Prozess einbinden
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.
Bundlesize mit Travis CI verwenden
Legen Sie Leistungsbudgets mit minimalem Einrichtungsaufwand fest und setzen Sie sie im Rahmen Ihres Entwicklungsworkflows mit „bundlesize“ und Travis CI durch.
Leistungsbudgets mit Webpack festlegen
Hier erfahren Sie, wie Sie mit Webpack Leistungsbudgets festlegen und die Paketgröße im Auge behalten.
Mit Lighthouse Bot ein Leistungsbudget festlegen
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.
Emscripten und npm
Wie integrieren Sie WebAssembly in dieses Setup? In diesem Artikel sehen wir uns das am Beispiel mit C/C und Emscripten an.
Ist deine App installiert? Mit getinstalledRelatedApps() erhältst du eine Antwort.
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.
Mit Client-Hinweisen an Nutzer anpassen
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.
Semantisches HTML für einfache Tastatureingaben
Mit den richtigen semantischen HTML-Elementen können Sie möglicherweise die meisten oder alle Anforderungen für den Tastaturzugriff erfüllen. Das bedeutet: weniger Zeit mit Tabindex und zufriedenere Nutzer!
Fokus mit Tabindex steuern
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.
Labels und Textalternativen
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.
Stilfokus
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.
Was ist Barrierefreiheit?
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.
Tastaturzugriff – Grundlagen
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.
Überschriften und Orientierungspunkte
Indem Sie die richtigen Elemente für Überschriften und Orientierungspunkte verwenden, können Sie die Navigation für Nutzende von assitiver Technologie erheblich verbessern.
Semantik und Screenreader
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?
Irreführende 404-Fehler beheben
In diesem Codelab erfahren Sie, wie Sie einen irreführenden 404-Fehler aufspüren, der die korrekte Indexierung Ihrer Seite verhindern kann.
Art Direction
In diesem Codelab erfährst du, wie du je nach Bildschirmgröße des Geräts komplett unterschiedliche Bilder laden kannst.
Bilder mit Imagemin komprimieren
Nicht komprimierte Bilder überhäufen Ihre Seiten mit unnötigen Byte. Führen Sie Lighthouse aus, um nach Möglichkeiten zu suchen, die Seitenladezeit durch Komprimieren von Bildern zu verbessern.
Nicht verwendeten Code entfernen
In diesem Codelab erfahren Sie, wie Sie die Leistung einer Anwendung verbessern, indem Sie nicht verwendete und nicht benötigte Abhängigkeiten entfernen.
Responsive Bilder bereitstellen
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.
Wichtige Assets vorab laden, um die Ladegeschwindigkeit zu verbessern
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.
Aus dem Netzwerk geladene Ressourcen identifizieren
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.
Sofortiges Laden mit dem PRPL-Muster anwenden
PRPL ist ein Akronym, das ein Muster beschreibt, mit dem Webseiten geladen und interaktiv und schneller geladen werden. In diesem Leitfaden erfahren Sie, wie die einzelnen Methoden zusammenpassen, aber dennoch unabhängig voneinander eingesetzt werden können, um Leistungsergebnisse zu erzielen.
Sicherheit sollte gar nicht so beängstigend sein.
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.
Bilder mit den richtigen Abmessungen bereitstellen
Das haben wir alle schon erlebt. Sie haben vergessen, ein Bild zu verkleinern, bevor Sie es auf der Seite hinzufügen. Das Bild sieht in Ordnung aus, verschwendet jedoch Nutzerdaten und beeinträchtigt die Seitenleistung.
Richtlinie und iFrame für denselben Ursprung
In diesem Codelab erfahren Sie, wie die Same-Origin-Richtlinie beim Zugriff auf Daten in einem iFrame funktioniert.
Imagemin mit Webpack verwenden
In diesem Codelab erfahren Sie, wie Sie mit Imagemin und Webpack JPEG- und PNG-Bilder für einen schnelleren Download optimieren.
Cross-Origin Resource Sharing (CORS)
Die Richtlinie für denselben Ursprung des Browsers blockiert aus Sicherheitsgründen das Lesen einer Ressource eines anderen Ursprungs. Wenn Sie CORS aktivieren, kann der Server dem Browser mitteilen, dass er eine zusätzliche Quelle verwenden kann.
WebP-Bilder verwenden
WebP-Bilder sind kleiner als ihre JPEG- und PNG-Bilder – normalerweise um 25 bis 35% kleiner. Dadurch wird die Seitengröße verringert und die Leistung verbessert.
Browser-Sandbox
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.
Installierbar machen
In diesem Codelab erfahren Sie, wie Sie mit dem Ereignis „beforeinstallprompt“ eine Website installierbar machen.
Workbox: Ihr Service Worker-Toolkit auf höchster Ebene
Workbox ist ein Service Worker-Toolkit auf höchster Ebene, das auf den Service Worker- und Cache Storage APIs basiert. Es bietet eine produktionsfertige Reihe von Bibliotheken, mit denen Sie Webanwendungen offline unterstützen können.
Suchmaschinenoptimierung mit Lighthouse analysieren
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.
JavaScript-Nutzlasten durch Codeaufteilung reduzieren
In diesem Codelab erfahren Sie, wie Sie die Leistung einer einfachen Anwendung durch Codeaufteilung verbessern können.
GIFs durch Video ersetzen
In diesem Codelab erfährst du, wie du die Leistung verbessern kannst, indem du ein animiertes GIF durch ein Video ersetzt hast.
Mit Service Workern arbeiten
In diesem Codelab erfahren Sie, wie Sie eine Anwendung zuverlässig machen, indem Sie einen Service Worker registrieren.
Netzwerkbereich der Entwicklertools erkunden
In diesem Codelab erfahren Sie, wie Sie den Netzwerkverkehr mit den Entwicklertools von Chrome umgehen.
Mehrere Anzeigenflächenbreiten angeben
In diesem Codelab erfahren Sie, wie Sie mit dem Attribut „sizes“ die richtige Größe von Bildern je nach Darstellungsbereich des Nutzers festlegen.
Richtlinie für denselben Ursprung
Ein Browser kann Ressourcen von mehreren Websites laden und anzeigen. Wenn es keine Beschränkungen für die Interaktionen zwischen diesen Ressourcen gibt und ein Skript von einem Angreifer manipuliert wird, könnte das Skript alles im Browser eines Nutzers preisgeben.
Nicht verwendeten Code entfernen
Analysieren Sie Ihr JavaScript-Bundle, um nicht verwendeten Code zu erkennen und zu entfernen.
HTTP-Caching-Verhalten konfigurieren
In diesem Codelab erfahren Sie, wie Sie das Verhalten beim Ressourcen-Caching mithilfe von HTTP-Headern steuern.
Unnötige Netzwerkanfragen mit dem HTTP-Cache vermeiden
Der HTTP-Cache des Browsers dient als erste Abwehrlinie gegen unnötige Netzwerkanfragen.
Ihr erstes Leistungsbudget
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.
Leistungsmöglichkeiten mit Lighthouse ermitteln
Lighthouse ist ein Tool, mit dem Sie die Leistung einer Seite messen und verbessern können. In Lighthouse wird ein Bericht zur Leistung der Seite angezeigt. Der Bericht enthält eine Bewertung für jeden Messwert und eine Liste mit Empfehlungen. Wenn Sie diese implementieren, sollte die Seite schneller geladen werden.
Animierte GIFs durch Videos für schnelleres Laden von Seiten
Hast du schon einmal ein animiertes GIF bei einem Dienst wie Imgur oder Gfycat gesehen, es in deinen Entwicklertools geprüft und festgestellt, dass es sich wirklich um ein Video handelt? Es gibt einen guten Grund dafür. Animierte GIFs können einfach riesig sein. Wenn Sie große GIFs in Videos umwandeln, können Sie die Bandbreite Ihrer Nutzer erheblich sparen.
Was sind Sicherheitsangriffe?
Eine unsichere Anwendung kann Nutzer und Systeme verschiedenen Arten von Schäden aussetzen. Wenn ein Angreifer Sicherheitslücken oder fehlende Sicherheitsfunktionen zu seinem Vorteil nutzt, um Schaden anzurichten, spricht man von einem Angriff. In diesem Handbuch werden die verschiedenen Angriffstypen beschrieben, damit Sie wissen, worauf Sie beim Sichern Ihrer Anwendung achten müssen.