Web-Performance

Auch wenn Kenntnisse in HTML, CSS und JavaScript erforderlich sind, um viele Empfehlungen zur Verbesserung der Web-Performance umzusetzen, ist es keine notwendige Voraussetzung, zu wissen, wie man Anwendungen erstellt, um Web-Performance zu verstehen und zu messen. Wir empfehlen jedoch, dass Sie, bevor Sie dieses Modul durcharbeiten, zumindest ein grundlegendes Verständnis der Webentwicklung erlangen, indem Sie unser Modul Ihre erste Website durchgehen.

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

• Inhalte mit HTML strukturieren
• Grundlagen der CSS-Stilgestaltung
• Dynamisches Skripting mit JavaScript

Das "Warum" der Web-Performance

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

Was ist Web-Performance?

Sie wissen, dass Web-Performance wichtig ist, aber was macht Web-Performance aus? Dieser Artikel führt in die Komponenten der Performance ein, von der Laden und Darstellung von Webseiten, einschließlich wie Ihre Inhalte im Browser der Nutzer angezeigt werden, bis hin zu welchen Gruppen von Menschen wir in Betracht ziehen müssen, wenn wir über Leistung nachdenken.

Wie nehmen Nutzer die Performance wahr?

Wichtiger als die tatsächliche Geschwindigkeit Ihrer Website in Millisekunden ist, wie schnell Ihre Nutzer Ihre Website subjektiv empfinden. Diese Wahrnehmungen werden durch die tatsächliche Ladezeit, Untätigkeit, Reaktionsfähigkeit auf Benutzerinteraktionen und die Geschmeidigkeit von Bildläufen und anderen Animationen beeinflusst. In diesem Artikel besprechen wir die verschiedenen Lade-, Animations- und Reaktionskennzahlen sowie bewährte Verfahren, um die Benutzerwahrnehmung zu verbessern, wenn schon nicht die tatsächlichen Zeiten.

Performance messen

Nachdem Sie nun einige Leistungskennzahlen verstanden haben, tauchen wir tiefer in Leistungstools, Metriken und APIs ein und wie wir Leistung in den Webentwicklungs-Workflow integrieren können.

Multimedia: Bilder

Das am leichtesten erreichbare Potenzial zur Verbesserung der Web-Performance liegt oft in der Medienoptimierung. Es ist möglich, verschiedene Mediendateien basierend auf den Fähigkeiten, der Größe und der Pixeldichte der jeweiligen Benutzeragenten bereitzustellen. In diesem Artikel diskutieren wir den Einfluss von Bildern auf die Leistung und die Methoden, um die Anzahl der pro Bild gesendeten Byte zu reduzieren.

Multimedia: Video

Das am leichtesten erreichbare Potenzial zur Verbesserung der Web-Performance liegt oft in der Medienoptimierung. In diesem Artikel diskutieren wir den Einfluss von Videoinhalten auf die Leistung und geben Tipps, wie beispielsweise das Entfernen von Audiotracks aus Hintergrundvideos die Performance verbessern kann.

JavaScript-Performanceoptimierung

Richtig eingesetzt, kann JavaScript interaktive und immersive Web-Erfahrungen ermöglichen – oder es kann die Download-Zeit, die Render-Zeit, die Leistung in Anwendungen, die Batterielaufzeit und das Benutzererlebnis erheblich beeinträchtigen. Dieser Artikel beschreibt einige JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass selbst komplexe Inhalte so leistungsfähig wie möglich sind.

HTML-Performanceoptimierung

Einige Attribute und die Quellreihenfolge Ihres Markups können die Leistung Ihrer Website beeinflussen. Durch Minimierung der Anzahl der DOM-Knoten, Sicherstellung der besten Reihenfolge und Attributnutzung für Inhalte wie Stile, Skripte, Medien und Drittanbieter-Skripte, können Sie das Benutzererlebnis drastisch verbessern. Dieser Artikel untersucht detailliert, wie HTML verwendet werden kann, um maximale Leistung sicherzustellen.

CSS-Performanceoptimierung

CSS mag einen weniger wichtigen Optimierungsfokus für verbesserte Leistung darstellen, aber es gibt einige CSS-Funktionen, die die Leistung mehr als andere beeinflussen. In diesem Artikel betrachten wir einige CSS-Eigenschaften, die sich auf die Leistung auswirken, und schlagen Wege vor, wie Stile gehandhabt werden können, um sicherzustellen, dass die Leistung nicht negativ beeinflusst wird.

Der geschäftliche Nutzen der Web-Performance

Es gibt viele Dinge, die ein Entwickler tun kann, um die Leistung zu verbessern, aber wie schnell ist schnell genug? Wie kann man die Entscheidungsträger von der Bedeutung dieser Bemühungen überzeugen? Sobald optimiert, wie kann man sicherstellen, dass keine Veralterung zurückkommt? In diesem Artikel betrachten wir, wie man das Management überzeugt, eine Leistungskultur und ein Leistungsbudget entwickelt, und introduce Möglichkeiten, um sicherzustellen, dass keine Rückschritte in Ihren Code gelangen.

Web-Performance-Ressourcen

Neben den Frontend-Komponenten HTML, CSS, JavaScript und Mediendateien gibt es Merkmale, die Anwendungen langsamer machen können, und Merkmale, die Anwendungen subjektiv und objektiv schneller machen können. Es gibt viele APIs, Entwicklertools, bewährte Praktiken und schlechte Praktiken im Zusammenhang mit der Web-Performance. Hier werden wir viele dieser Funktionen auf grundlegender Ebene einführen und Links zu tiefergehenden Erklärungen bereitstellen, um die Leistung für jedes Thema zu verbessern.

Responsive Bilder

In diesem Artikel lernen wir das Konzept der responsiven Bilder kennen - Bilder, die auf Geräten mit sehr unterschiedlichen Bildschirmgrößen, Auflösungen und anderen Merkmalen gut funktionieren - und werfen einen Blick auf die Werkzeuge, die HTML bereitstellt, um sie umzusetzen. Dies hilft, die Leistung auf verschiedenen Geräten zu verbessern. Responsive Bilder sind nur ein Teil des Responsive Designs, ein zukünftiges CSS-Thema, das Sie lernen können.

Hauptbereich zur Web-Performance auf MDN

Unser Hauptbereich zur Web-Performance - hier finden Sie viel mehr Details zur Web-Performance, einschließlich Überblicken über Performance-APIs, Test- und Analysetools und Leistungsengpässe.

• Übersicht: Erweiterungsmodule
• Weiter