Web-Performance-APIs: Zeitmessung für herausragende Benutzererlebnisse

In der heutigen digitalen Landschaft ist eine schnelle und reaktionsschnelle Website kein Luxus mehr, sondern eine Notwendigkeit. Benutzer erwarten nahtlose Erlebnisse, und schon eine geringe Verzögerung kann zu Frustration, abgebrochenen Warenkörben und letztendlich zu Umsatzeinbußen führen. Web-Performance-APIs bieten Entwicklern die Werkzeuge, um verschiedene Aspekte der Website-Performance präzise zu messen, Engpässe zu identifizieren und die Benutzererfahrung (UX) zu optimieren.

Die Bedeutung von Metriken zur Benutzererfahrung verstehen

Bevor wir uns mit den technischen Details der APIs befassen, ist es wichtig zu verstehen, warum UX-Metriken so entscheidend sind. Sie bieten eine quantifizierbare Methode, um zu bewerten, wie Benutzer die Geschwindigkeit und Reaktionsfähigkeit Ihrer Website wahrnehmen. Eine schlechte UX kann sich negativ auswirken auf:

• Absprungrate: Langsame Ladezeiten führen oft dazu, dass Benutzer Ihre Website verlassen, bevor sie sich mit den Inhalten beschäftigen.
• Konversionsraten: Eine frustrierende Benutzererfahrung kann potenzielle Kunden davon abhalten, Transaktionen abzuschließen.
• Suchmaschinen-Ranking: Suchmaschinen wie Google bevorzugen Websites mit guter Leistung, was Ihre Sichtbarkeit in den Suchergebnissen beeinflusst. Die Core Web Vitals, die stark auf Performance-APIs basieren, sind ein Rankingfaktor.
• Markenwahrnehmung: Eine langsame Website kann einen negativen Eindruck von Ihrer Marke hinterlassen und auf mangelnde Detailgenauigkeit sowie eine schlechte Benutzererfahrung hindeuten.

Wichtige Web-Performance-APIs und Metriken

Es gibt mehrere Web-Performance-APIs, von denen jede einzigartige Einblicke in verschiedene Aspekte der Website-Leistung bietet. Hier sind einige der wichtigsten:

1. Navigation Timing API

Die Navigation Timing API liefert detaillierte Zeitinformationen zum Laden eines Dokuments. Sie ermöglicht es Ihnen, die Zeit für verschiedene Phasen des Ladevorgangs zu messen, wie zum Beispiel:

• navigationStart: Der Zeitstempel unmittelbar bevor der Browser mit dem Abrufen des Dokuments beginnt.
• fetchStart: Der Zeitstempel unmittelbar bevor der Browser mit dem Abrufen des Dokuments aus dem Netzwerk beginnt.
• domainLookupStart: Der Zeitstempel unmittelbar bevor der Browser die DNS-Suche für die Domain des Dokuments startet.
• domainLookupEnd: Der Zeitstempel unmittelbar nachdem der Browser die DNS-Suche abgeschlossen hat.
• connectStart: Der Zeitstempel unmittelbar bevor der Browser eine Verbindung zum Server herstellt.
• connectEnd: Der Zeitstempel unmittelbar nachdem der Browser die Verbindung zum Server hergestellt hat.
• requestStart: Der Zeitstempel unmittelbar bevor der Browser die HTTP-Anfrage für das Dokument sendet.
• responseStart: Der Zeitstempel unmittelbar nachdem der Browser das erste Byte der HTTP-Antwort empfangen hat.
• responseEnd: Der Zeitstempel unmittelbar nachdem der Browser die gesamte HTTP-Antwort empfangen hat.
• domLoading: Der Zeitstempel unmittelbar bevor der Browser den document.readyState auf „loading“ setzt.
• domInteractive: Der Zeitstempel unmittelbar nachdem der Browser das HTML-Dokument geparst hat und das DOM bereit ist.
• domContentLoadedEventStart: Der Zeitstempel unmittelbar bevor der Browser das DOMContentLoaded-Ereignis auslöst.
• domContentLoadedEventEnd: Der Zeitstempel unmittelbar nachdem der Browser das DOMContentLoaded-Ereignis ausgelöst hat.
• domComplete: Der Zeitstempel unmittelbar nachdem der Browser den document.readyState auf „complete“ gesetzt hat.
• loadEventStart: Der Zeitstempel unmittelbar bevor der Browser das load-Ereignis auslöst.
• loadEventEnd: Der Zeitstempel unmittelbar nachdem der Browser das load-Ereignis ausgelöst hat.

Beispiel: Berechnung der für die DNS-Suche benötigten Zeit:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

Die Resource Timing API liefert detaillierte Zeitinformationen für einzelne Ressourcen, die von einer Webseite geladen werden, wie z.B. Bilder, CSS-Dateien, JavaScript-Dateien und Schriftarten. Diese API hilft Ihnen zu erkennen, welche Ressourcen am längsten zum Laden benötigen, und deren Auslieferung zu optimieren.

Wichtige Metriken:

• name: Die URL der Ressource.
• startTime: Der Zeitstempel, zu dem der Browser mit dem Abrufen der Ressource beginnt.
• responseEnd: Der Zeitstempel, zu dem der Browser das letzte Byte der Ressource empfängt.
• duration: Die Gesamtzeit, die zum Laden der Ressource benötigt wird (responseEnd - startTime).
• transferSize: Die Größe der über das Netzwerk übertragenen Ressource.
• encodedBodySize: Die Größe der Ressource vor der Komprimierung.
• decodedBodySize: Die Größe der Ressource nach der Dekomprimierung.

Beispiel: Identifizierung des größten Bildes auf der Seite:

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

Die User Timing API ermöglicht es Ihnen, benutzerdefinierte Leistungsmetriken zu definieren und die Zeit für bestimmte Codeblöcke oder Benutzerinteraktionen zu messen. Dies ist besonders nützlich, um die Leistung kritischer JavaScript-Funktionen oder komplexer UI-Komponenten zu verfolgen.

Wichtige Methoden:

• performance.mark(markName): Erstellt einen Zeitstempel mit dem angegebenen Namen.
• performance.measure(measureName, startMark, endMark): Erstellt eine Leistungsmessung zwischen zwei Markierungen.
• performance.getEntriesByType("measure"): Ruft alle Leistungsmessungen ab.

Beispiel: Messung der Zeit, die zum Rendern einer komplexen React-Komponente benötigt wird:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

Die Long Tasks API hilft Ihnen, Aufgaben zu identifizieren, die den Hauptthread für mehr als 50 Millisekunden blockieren. Diese langen Aufgaben können UI-Ruckeln verursachen und die Benutzererfahrung negativ beeinflussen. Indem Sie diese Aufgaben identifizieren und optimieren, können Sie die Reaktionsfähigkeit Ihrer Website verbessern.

Beispiel: Protokollierung langer Aufgaben in der Konsole:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Die Paint Timing API stellt zwei wichtige Metriken im Zusammenhang mit dem visuellen Rendern einer Webseite bereit:

• First Paint (FP): Die Zeit, zu der der Browser das erste Pixel auf dem Bildschirm rendert.
• First Contentful Paint (FCP): Die Zeit, zu der der Browser das erste Inhaltselement (z. B. Bild, Text) auf dem Bildschirm rendert.

Diese Metriken sind entscheidend, um zu verstehen, wie schnell Benutzer das erste visuelle Feedback von Ihrer Website wahrnehmen.

Beispiel: Abrufen des FCP:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) ist ein Core Web Vital, der die Zeit misst, die benötigt wird, bis das größte Inhaltselement (z. B. Bild, Video, Textblock) im sichtbaren Bereich (Viewport) sichtbar wird. Ein guter LCP-Wert zeigt an, dass der Hauptinhalt der Seite schnell lädt, was zu einer besseren Benutzererfahrung führt.

Was für LCP optimiert werden sollte:

• Bilder optimieren: Verwenden Sie geeignete Bildformate (z.B. WebP), komprimieren Sie Bilder und verwenden Sie responsive Bilder.
• CSS optimieren: Minifizieren und komprimieren Sie CSS-Dateien und vermeiden Sie CSS, das das Rendern blockiert.
• JavaScript optimieren: Verschieben Sie unkritisches JavaScript und vermeiden Sie lang andauernde JavaScript-Aufgaben.
• Server-Antwortzeiten: Stellen Sie sicher, dass Ihr Server schnell auf Anfragen reagiert.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) ist ein weiterer Core Web Vital, der die visuelle Stabilität einer Webseite misst. Er quantifiziert das Ausmaß unerwarteter Layout-Verschiebungen, die während des Ladevorgangs auftreten. Ein niedriger CLS-Wert zeigt an, dass die Seite visuell stabil ist, was zu einer angenehmeren Benutzererfahrung führt.

Was Layout-Verschiebungen verursacht:

• Bilder ohne Abmessungen: Geben Sie immer die Attribute für Breite und Höhe für Bilder an.
• Anzeigen, Einbettungen und Iframes ohne reservierten Platz: Reservieren Sie Platz für diese Elemente, um zu verhindern, dass sie Layout-Verschiebungen verursachen.
• Dynamisch eingefügter Inhalt: Seien Sie vorsichtig beim dynamischen Einfügen von Inhalten, da dies unerwartete Layout-Verschiebungen verursachen kann.
• Web-Schriftarten, die FOIT/FOUT verursachen: Optimieren Sie das Laden von Schriftarten, um die Auswirkungen von Font-Of-Invisible-Text (FOIT) und Font-Of-Unstyled-Text (FOUT) zu minimieren.

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) ist eine Core Web Vital-Metrik, die die Reaktionsfähigkeit einer Webseite auf Benutzerinteraktionen misst. Sie bewertet die Latenz aller Klicks, Taps und Tastaturinteraktionen, die ein Benutzer während seines Besuchs auf einer Seite durchführt. INP ersetzt den First Input Delay (FID) als Core Web Vital ab März 2024.

INP verbessern:

• JavaScript-Ausführung optimieren: Teilen Sie lange Aufgaben in kleinere, asynchrone Blöcke auf, um den Hauptthread nicht zu blockieren.
• Unkritisches JavaScript aufschieben: Laden Sie nur das für das anfängliche Rendern notwendige JavaScript und verschieben Sie den Rest.
• Web Worker verwenden: Lagern Sie rechenintensive Aufgaben in Web Worker aus, um zu verhindern, dass sie den Hauptthread blockieren.
• Event-Handler optimieren: Stellen Sie sicher, dass Event-Handler effizient sind und keine unnötigen Operationen durchführen.

Praktische Beispiele und Code-Schnipsel

Hier sind einige praktische Beispiele, wie Sie die Web-Performance-APIs zur Messung und Optimierung der Website-Leistung verwenden können:

Beispiel 1: Messung der Seitenladezeit

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Beispiel 2: Identifizierung langsam ladender Ressourcen

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Beispiel 3: Messung der Time to Interactive (TTI) - Annäherung

Hinweis: TTI ist eine komplexe Metrik, und dies ist eine vereinfachte Annäherung. Echte TTI erfordert einen anspruchsvolleren Ansatz.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

Umsetzbare Erkenntnisse zur Optimierung der Benutzererfahrung

Sobald Sie Leistungsdaten mit den Web-Performance-APIs gesammelt haben, können Sie die folgenden umsetzbaren Erkenntnisse nutzen, um die Benutzererfahrung Ihrer Website zu optimieren:

• Bilder optimieren: Komprimieren Sie Bilder, verwenden Sie geeignete Bildformate (z. B. WebP) und nutzen Sie responsive Bilder, um die Ladezeiten von Bildern zu reduzieren.
• Code minifizieren und komprimieren: Minifizieren und komprimieren Sie HTML-, CSS- und JavaScript-Dateien, um deren Größe zu reduzieren und die Ladezeiten zu verbessern.
• Browser-Caching nutzen: Konfigurieren Sie Ihren Server so, dass er entsprechende Cache-Header setzt, um das Browser-Caching statischer Ressourcen zu ermöglichen.
• Ein Content Delivery Network (CDN) verwenden: Verteilen Sie den Inhalt Ihrer Website geografisch über mehrere Server, um die Latenz für Benutzer an verschiedenen Standorten zu reduzieren. Beliebte CDN-Anbieter sind Cloudflare, Akamai und Amazon CloudFront.
• Laden von Schriftarten optimieren: Verwenden Sie font-display: swap, um das Blockieren durch Schriftarten zu verhindern und die wahrgenommene Ladegeschwindigkeit Ihrer Website zu verbessern.
• HTTP-Anfragen reduzieren: Minimieren Sie die Anzahl der HTTP-Anfragen, indem Sie CSS- und JavaScript-Dateien kombinieren, kritisches CSS inline einfügen und CSS-Sprites verwenden.
• Unkritische Ressourcen aufschieben: Verschieben Sie das Laden von unkritischen Ressourcen wie Bildern und JavaScript-Dateien auf die Zeit nach dem ersten Seitenaufbau.
• Server-Antwortzeiten optimieren: Stellen Sie sicher, dass Ihr Server schnell auf Anfragen reagiert, indem Sie Ihren serverseitigen Code und Ihre Datenbankabfragen optimieren.
• Leistung regelmäßig überwachen: Überwachen Sie die Leistung Ihrer Website kontinuierlich mit Web-Performance-APIs und anderen Überwachungstools, um Leistungsprobleme zu identifizieren und zu beheben. Tools wie Google PageSpeed Insights, WebPageTest und Lighthouse können wertvolle Einblicke liefern.

Tools und Bibliotheken zur Leistungsüberwachung

Mehrere Tools und Bibliotheken können Ihnen helfen, die Website-Leistung mithilfe der Web-Performance-APIs zu überwachen und zu analysieren:

• Google PageSpeed Insights: Ein kostenloses Tool, das die Leistung Ihrer Website analysiert und Verbesserungsvorschläge macht.
• WebPageTest: Ein kostenloses Tool, mit dem Sie die Leistung Ihrer Website von verschiedenen Standorten und Browsern aus testen können.
• Lighthouse: Ein quelloffenes, automatisiertes Werkzeug zur Verbesserung der Qualität von Webseiten. Es bietet Audits für Leistung, Barrierefreiheit, progressive Web-Apps, SEO und mehr.
• New Relic: Eine umfassende Plattform zur Leistungsüberwachung, die Echtzeit-Einblicke in die Website-Performance bietet.
• Datadog: Eine Überwachungs- und Analyseplattform, die Einblick in Ihre gesamte Infrastruktur, einschließlich der Website-Leistung, bietet.
• Sentry: Eine Plattform zur Echtzeit-Fehlerverfolgung und Leistungsüberwachung.
• Web Vitals Chrome Extension: Eine Chrome-Erweiterung, die Core Web Vitals-Metriken in Echtzeit anzeigt.

Überlegungen für ein globales Publikum

Bei der Optimierung der Website-Leistung für ein globales Publikum ist es wichtig, die folgenden Faktoren zu berücksichtigen:

• Geografischer Standort: Nutzen Sie ein CDN, um Ihre Inhalte geografisch über mehrere Server zu verteilen und die Latenz für Benutzer an verschiedenen Standorten zu reduzieren.
• Netzwerkbedingungen: Optimieren Sie Ihre Website für Benutzer mit langsamen oder unzuverlässigen Netzwerkverbindungen, indem Sie Techniken wie Bildkomprimierung, Code-Minifizierung und Browser-Caching verwenden.
• Gerätefähigkeiten: Optimieren Sie Ihre Website für verschiedene Geräte, einschließlich Mobiltelefone, Tablets und Desktops, indem Sie responsives Design und adaptive Ladetechniken verwenden.
• Sprache und Lokalisierung: Stellen Sie sicher, dass Ihre Website für verschiedene Sprachen und Regionen lokalisiert ist, einschließlich der Übersetzung von Inhalten und der Anpassung von Layouts für verschiedene Textrichtungen.
• Barrierefreiheit: Stellen Sie sicher, dass Ihre Website für Benutzer mit Behinderungen zugänglich ist, indem Sie Barrierefreiheitsrichtlinien wie WCAG befolgen.

Fazit

Web-Performance-APIs bieten unschätzbare Werkzeuge zur Messung und Optimierung der Website-Leistung. Durch das Verständnis und die Nutzung dieser APIs können Entwickler Leistungsengpässe identifizieren, die Benutzererfahrung verbessern und letztendlich den Geschäftserfolg fördern. Denken Sie daran, die Core Web Vitals (LCP, CLS und INP) als Schlüsselmetriken für die allgemeine Website-Gesundheit und Benutzerzufriedenheit zu priorisieren. Indem Sie die Leistung Ihrer Website kontinuierlich überwachen und optimieren, können Sie ein schnelles, reaktionsschnelles und ansprechendes Erlebnis für Benutzer auf der ganzen Welt gewährleisten.