Web-Performance

Obwohl Kenntnisse in HTML, CSS und JavaScript für die Implementierung vieler Empfehlungen zur Verbesserung der Web-Performance erforderlich sind, ist das Erlernen der Erstellung von Anwendungen nicht unbedingt eine Voraussetzung, um Web-Performance zu verstehen und zu messen. Wir empfehlen jedoch, dass Sie, bevor Sie dieses Modul durcharbeiten, zumindest eine grundlegende Vorstellung von Webentwicklung bekommen, indem Sie unser Modul Ihre erste Website durcharbeiten.

Es wäre auch hilfreich, tiefer in diese Themen einzutauchen, mit Modulen wie:

• Inhalte mit HTML strukturieren
• CSS-Styling-Grundlagen
• Dynamisches Scripting mit JavaScript

Das „Warum“ der Web-Performance

Dieser Artikel erörtert, warum Web-Performance wichtig für Barrierefreiheit, Benutzererfahrung und Ihre Geschäftsziele ist.

Was ist Web-Performance?

Sie wissen, dass Web-Performance wichtig ist, aber was macht die Web-Performance aus? Dieser Artikel führt die Komponenten der Performance ein, vom Laden und Rendern von Webseiten, einschließlich der Art und Weise, wie Ihre Inhalte in den Browser Ihrer Benutzer gelangen, bis hin zu den Personengruppen, die wir bei der Überlegung zur Performance berücksichtigen müssen.

Wie nehmen Nutzer Performance wahr?

Wichtiger als die Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Benutzer Ihre Website wahrnehmen. Diese Wahrnehmungen werden von der tatsächlichen Ladezeit der Seite, der Leerlaufzeit, der Reaktionsfähigkeit auf Benutzerinteraktionen und der Flüssigkeit von Scrollen und anderen Animationen beeinflusst. In diesem Artikel besprechen wir die verschiedenen Ladekennzahlen, Animationen und Reaktionsfähigkeitskennzahlen sowie bewährte Praktiken, um die Benutzerwahrnehmung zu verbessern, wenn nicht die tatsächlichen Zeiten.

Performance messen

Jetzt, da Sie einige Performance-Kennzahlen verstanden haben, tauchen wir tiefer in Performance-Tools, Metriken und APIs ein und wie wir Performance in den Workflow der Webentwicklung integrieren können.

Multimedia: Bilder

Das am einfachsten zugängliche Optimierungspotential der Web-Performance ist oft die Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte jedes Benutzeragenten bereitzustellen. In diesem Artikel besprechen wir die Auswirkungen, die Bilder auf die Performance haben und die Methoden, um die Anzahl der pro Bild gesendeten Bytes zu reduzieren.

Multimedia: Video

Das am einfachsten zugängliche Optimierungspotential der Web-Performance ist oft die Medienoptimierung. In diesem Artikel besprechen wir die Auswirkungen, die Videoinhalte auf die Performance haben und geben Tipps, wie z. B. das Entfernen von Audiospuren von Hintergrundvideos die Performance verbessern kann.

JavaScript-Leistungsoptimierung

JavaScript kann bei richtiger Verwendung interaktive und immersive Web-Erlebnisse ermöglichen – oder es kann die Download-Zeit, die Renderzeit, die In-App-Performance, die Akkulaufzeit und die Benutzererfahrung erheblich beeinträchtigen. Dieser Artikel skizziert einige JavaScript-Best Practices, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so performant wie möglich sind.

HTML-Leistungsoptimierung

Einige Attribute und die Quellreihenfolge Ihres Markups können die Performance Ihrer Website beeinflussen. Durch Minimierung der Anzahl von DOM-Knoten und Sicherstellung der besten Reihenfolge und Attribute für das Einfügen von Inhalten wie Styles, Skripten, Medien und Drittanbieterskripten, können Sie das Benutzererlebnis drastisch verbessern. Dieser Artikel beleuchtet im Detail, wie HTML genutzt werden kann, um maximale Performance sicherzustellen.

CSS-Leistungsoptimierung

CSS mag ein weniger wichtiger Fokus der Optimierung für eine verbesserte Performance sein, aber es gibt einige CSS-Eigenschaften, die die Performance mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die die Performance beeinflussen und schlagen Möglichkeiten vor, wie man Styles handhaben kann, um sicherzustellen, dass die Performance nicht negativ beeinflusst wird.

Der geschäftliche Nutzen der Web-Performance

Es gibt viele Dinge, die ein Entwickler tun kann, um die Performance zu verbessern, aber wie schnell ist schnell genug? Wie können Sie die Entscheidungsträger von der Wichtigkeit dieser Bemühungen überzeugen? Einmal optimiert, wie können Sie sicherstellen, dass kein „Aufblähen“ zurückkommt? In diesem Artikel schauen wir uns an, wie man das Management überzeugt, eine Performance-Kultur entwickelt und ein Performance-Budget erstellt, und wir stellen Möglichkeiten vor, um sicherzustellen, dass Rückschritte nicht in Ihren Code gelangen.

Web-Performance-Ressourcen

Zusätzlich zu den Frontend-Komponenten von HTML, CSS, JavaScript und Mediendateien gibt es Funktionen, die Anwendungen langsamer und Funktionen, die Anwendungen subjektiv und objektiv schneller machen können. Es gibt viele APIs, Entwickler-Tools, bewährte Praktiken und schlechte Praktiken in Bezug auf Web-Performance. Hier führen wir viele dieser Funktionen auf der grundlegenden Ebene ein und bieten Links zu tiefergehenden Einblicken, um die Performance für jedes Thema zu verbessern.

Responsive Bilder

In diesem Artikel erfahren wir mehr über das Konzept von responsiven Bildern — Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren — und sehen uns an, welche Tools HTML bietet, um sie umzusetzen. Dies hilft, die Performance auf verschiedenen Geräten zu verbessern. Responsive Bilder sind nur ein Teil des responsiven Designs, einem zukünftigen CSS-Thema für Sie.

Hauptabschnitt zur Web-Performance auf MDN

Unser Hauptabschnitt zur Web-Performance — hier finden Sie viel mehr Details zur Web-Performance, einschließlich Übersicht über Performance-APIs, Test- und Analysetools sowie Performance-Engpässe.

• Übersicht: Erweiterungsmodule
• Weiter