Hallo zusammen! Es ist schon eine Weile her, seit ich das letzte Mal einen Blog geschrieben habe, und ich gebe zu, es macht mich ein bisschen traurig. Die Realität ist, dass es so viel zu lernen gibt und manchmal hat man das Gefühl, nie genug Zeit zu haben, sich in alles zu stürzen. Aber wem mache ich Witze? Die Wahrheit ist, dass ich in letzter Zeit viel prokrastiniert habe.

Aber in letzter Zeit habe ich mich mit der Web-Performance beschäftigt – ein entscheidendes Thema für jeden Frontend-Entwickler – und ich freue mich darauf, das Gelernte weiterzugeben. Leistungsoptimierung ist eines der Dinge, die, wenn sie richtig durchgeführt wird, einen großen Unterschied in der Art und Weise machen können, wie Benutzer Ihre Website oder Web-App erleben. Es verbessert nicht nur das Benutzererlebnis, sondern steigert auch die Suchmaschinenoptimierung und kann sich sogar auf die Konversionsraten auswirken.

Also, lasst uns eintauchen!

Warum Web-Performance wichtig ist

In der heutigen schnelllebigen Welt erwarten Benutzer, dass Websites schnell geladen werden und reibungslos interagieren. Wenn Ihre Website langsam ist, werden die Benutzer sie verlassen – so einfach ist das. Studien zeigen, dass bereits eine Verzögerung von wenigen Sekunden zu höheren Absprungraten und geringerem Engagement führen kann. Als Frontend-Entwickler sind wir dafür verantwortlich, dass unsere Anwendungen nicht nur gut aussehen, sondern auch unter verschiedenen Bedingungen gut funktionieren.

Wenn es um die Leistungsmessung geht, gilt Google oft als Goldstandard. Google stellt eine Reihe wichtiger Kennzahlen, sogenannte Core Web Vitals, bereit, die Entwicklern helfen, die Leistung ihrer Websites zu verfolgen und zu verbessern. Lassen Sie uns sie aufschlüsseln:

Laut dem Herrn Google sind diese Dinge wichtig für die Leistung

• FCP (First Contentful Paint)
• LCP (Größte Contentful Paint)
• CLS (Cummulative Layout Shift)
• TTI (Time To Interactive)
• INP (Interaktion mit nächster Farbe)

Lass uns sie genauer erkunden

FCP (First Contentful Paint)

Was es misst: FCP misst die Zeit, die es dauert, bis der erste Inhalt (Text, Bilder usw.) auf dem Bildschirm erscheint, nachdem ein Benutzer zu Ihrer Seite navigiert. Es handelt sich um eine wichtige Kennzahl, da sie den Benutzern Rückmeldung darüber gibt, ob die Seite geladen wird. Je schneller der FCP, desto besser das Benutzererlebnis.

So verbessern Sie FCP:

Renderblockierende Ressourcen minimieren: Reduzieren oder eliminieren Sie Ressourcen, die das Rendern der Seite blockieren, wie z. B. synchrones JavaScript oder CSS. Verwenden Sie für kritische Ressourcen.

Nicht-kritisches JavaScript aufschieben: Verwenden Sie die Attribute defer oder async für nicht unbedingt erforderliche Skripte, um sicherzustellen, dass sie das anfängliche Malen nicht blockieren.

*Verwenden Sie Server-Side Rendering (SSR): * SSR hilft dabei, den ersten HTML-Code schneller bereitzustellen, insbesondere bei dynamischen Inhalten, sodass Benutzer aussagekräftige Inhalte früher sehen können.

CSS-Bereitstellung optimieren: Minimieren Sie die Größe Ihres CSS und integrieren Sie kritisches CSS, damit der Browser Inhalte schneller rendern kann.

Verwenden Sie ein Content Delivery Network (CDN): Stellen Sie statische Assets von einem CDN bereit, um die Latenz zu reduzieren und die Ressourcenbereitstellung zu beschleunigen.

LCP (Größte Contentful Paint)

Was es misst: LCP konzentriert sich auf die Zeit, die benötigt wird, bis das größte Element (normalerweise ein Hero-Bild, ein großer Textblock oder ein Video) vollständig im Ansichtsfenster gerendert wird. Dies ist ein guter Indikator für die wahrgenommene Ladegeschwindigkeit, da Benutzer die Seite als fertig betrachten, sobald der größte Inhalt geladen wurde. Versuchen Sie, den LCP für ein schnelles Erlebnis unter 2,5 Sekunden zu halten.

So verbessern Sie LCP:

Bilder optimieren und komprimieren: Verwenden Sie moderne Bildformate wie WebP, komprimieren Sie Bilder und stellen Sie mithilfe der Attribute „srcset“ und „sizes“ sicher, dass die richtigen Bildgrößen bereitgestellt werden.

Lazy Load Below-the-Fold-Bilder: Implementieren Sie Lazy Loading für Bilder, die nicht sofort sichtbar sind, um das Laden von Above-the-Fold-Inhalten zu priorisieren.

Wichtige Ressourcen vorab laden: Verwenden Sie das Tag, um wichtige Ressourcen wie Schriftarten, Heldenbilder oder große Mediendateien schneller zu laden.

Renderblockierendes CSS minimieren: Minimieren Sie wie bei FCP die Verwendung großer CSS-Dateien, die das Rendern blockieren könnten.

Reduzieren Sie Skripte von Drittanbietern: Anzeigen, Analysen oder andere Skripte von Drittanbietern können LCP verlangsamen. Nicht unbedingt erforderliche Skripte verzögern oder asynchron laden.

CLS (Cumulative Layout Shift)

Was es misst: CLS misst die visuelle Stabilität Ihrer Seite. Haben Sie schon einmal etwas gelesen und plötzlich ändert sich das Layout, sodass Sie den Überblick verlieren oder auf die falsche Schaltfläche klicken? Das ist ein schlechter CLS-Wert. CLS verfolgt, wie viele Elemente auf der Seite während des Ladevorgangs unerwartet verschoben werden. Ein niedriger CLS ist für ein reibungsloses Benutzererlebnis unerlässlich, insbesondere auf Mobilgeräten.

So verbessern Sie CLS:

Maßen für Bilder und Videos festlegen: Fügen Sie immer Breiten- und Höhenattribute in Bilder ein oder verwenden Sie CSS-Seitenverhältnisfelder, um Platz für Medienelemente zu reservieren, bevor sie geladen werden.

Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten: Vermeiden Sie das dynamische Hinzufügen von Inhalten über vorhandenen Inhalten, es sei denn, dies ist unbedingt erforderlich (z. B. Anzeigen).

Strategien zum Laden von Schriftarten verwenden: Verwenden Sie beim Laden benutzerdefinierter Schriftarten „font-display: swap;“ um Layoutverschiebungen durch das Laden von Schriftarten zu vermeiden.

Vermeiden Sie das Einfügen neuer Anzeigen oder Popups ohne Platz: Stellen Sie sicher, dass dynamisch geladene Anzeigen, Banner oder Popups im Layoutbereich berücksichtigt werden, um unerwartete Verschiebungen zu vermeiden.

Verwenden Sie Platzhalter oder Lader für Bilder mit demselben Platz wie das Bild

TTI (Time to Interactive)

Was es misst: TTI misst, wie lange es dauert, bis die Seite vollständig interaktiv wird. Dies bedeutet, dass alle Schaltflächen, Eingaben und Links verwendbar sind und der Hauptthread frei auf Benutzereingaben reagieren kann. Ein schneller TTI stellt sicher, dass Benutzer schnell mit Ihren Inhalten interagieren können, ohne das Gefühl zu haben, dass die Website träge ist oder nicht reagiert.

So verbessern Sie TTI:

JavaScript-Ausführungszeit reduzieren: Teilen Sie große JavaScript-Bundles auf und laden Sie nur wichtige Skripte für die erste Interaktion. Verwenden Sie Code-Splitting in React (mit React.lazy()) oder dynamische Importe in JavaScript.
Verwenden Sie Web Worker: Verlagern Sie schwere Aufgaben, die nicht die Benutzeroberfläche blockieren, auf Web Worker, damit der Hauptthread reaktionsfähig bleibt.
Lange Aufgaben aufschieben: Lange JavaScript-Aufgaben in kleinere Aufgaben aufteilen, um zu vermeiden, dass der Hauptthread zu lange blockiert wird.
Kritische Ressourcen vorab laden: Stellen Sie sicher, dass wesentliche Ressourcen, die für die Interaktivität benötigt werden (Skripte, Stile), vorab geladen sind, um Verzögerungen bei TTI zu vermeiden.
CSS und JavaScript optimieren: Minimieren, komprimieren und priorisieren Sie wichtigen Code. Verwenden Sie Tree-Shaking, um toten Code zu entfernen und eine schnellere Skriptausführung sicherzustellen. Verwenden Sie den GZIP- oder BROTLI-Komprimierungsmechanismus

INP (Interaktion mit nächster Farbe)

Was es misst: Als relativ neuer Messwert erfasst INP die Zeit, die eine Seite benötigt, um auf Benutzerinteraktionen (z. B. Klicken auf Schaltflächen, Scrollen oder Tippen) zu reagieren und die Benutzeroberfläche entsprechend zu aktualisieren. Es hilft dabei, die gesamte Interaktivität über den anfänglichen Ladevorgang hinaus zu messen und stellt sicher, dass Ihre App während der gesamten Benutzersitzung dynamisch bleibt.

So verbessern Sie INP:

Eingabelatenz reduzieren: Stellen Sie sicher, dass Benutzereingaben (Klicks, Tastendrücke) schnell verarbeitet werden, indem Sie lange JavaScript-Aufgaben vermeiden, die den Hauptthread blockieren.

Priorisieren Sie die Reaktionsfähigkeit der Eingaben: Verwenden Sie requestAnimationFrame oder requestIdleCallback, um nicht dringende Arbeiten während der Leerlaufzeit zu erledigen und den Hauptthread für die Interaktionsbearbeitung offen zu lassen.

Entprellung und Drosselung verwenden: Entprellen oder drosseln Sie die Ereignishandler, wenn Sie häufige Benutzerinteraktionen (wie Scrollen oder Tippen) verarbeiten, um zu verhindern, dass die Benutzeroberfläche nicht mehr reagiert.

Lazy Load Non-Critical Code: Verschieben Sie das Laden nicht kritischer Funktionalität bis nach der ersten Interaktion.
Sie können beispielsweise Komponenten in React verzögert laden, indem Sie React.lazy() und Suspense verwenden.

Durch die Befolgung dieser Strategien können Sie diese Schlüsselkennzahlen erheblich verbessern und ein schnelleres, reaktionsfähigeres Benutzererlebnis bieten. Diese Optimierungen tragen insbesondere bei gemeinsamer Anwendung dazu bei, dass Ihre Website nicht nur die Core Web Vitals-Tests von Google besteht, sondern Ihren Nutzern auch ein außergewöhnliches Erlebnis bietet.

Ich hoffe, Sie fanden diesen Blog nützlich und konnten daraus einige wichtige Erkenntnisse gewinnen, die Sie bei Ihrer nächsten Strategie zur Leistungsverbesserung unterstützen können.

Für weitere tolle Blogs zu Performance, Web-Sicherheit, React, Angular und Vue folgen Sie mir weiter