Die Webleistung ist ein entscheidender Aspekt der Webentwicklung. Hierbei geht es um die Ladegeschwindigkeit und die Reaktionsgeschwindigkeit der Seiten auf Nutzereingaben. Wenn Sie die Leistung Ihrer Website optimieren, bieten Sie den Nutzern eine bessere Nutzererfahrung. Eine bessere Nutzererfahrung trägt wesentlich dazu bei, die Ziele zu erreichen, die Sie sich für Ihre Website gesetzt haben.
Leistung im Web mag wie ein Nischenthema erscheinen, ist aber in Wirklichkeit sowohl breit gefasst als auch recht tief. Aufgrund seiner tiefgreifenden Themenbereiche ist ein Kurs zu Webleistung unerlässlich, sowohl verständlich als auch informativ zu sein. Die erste Version dieses Kurses konzentriert sich auf Grundlagen der Webleistung, die Anfänger hilfreich sein sollten.
Jedes Modul dieser Reihe zielt – wenn möglich – auf eine Reihe von Demos ab, die den Inhalt jedes Moduls ergänzen und wichtige Leistungskonzepte demonstrieren. Da dieser Kurs eine Einführung ist, sind derzeit weitere Module für die Veröffentlichung in den kommenden Monaten geplant.
Folgendes wird im ersten Kursangebot zur Lernleistung abgedeckt:
Warum Geschwindigkeit wichtig ist
Bevor Sie mit der Lernleistung beginnen können, müssen Sie seine Rolle für die Nutzererfahrung verstehen und wissen, wie dies zu besseren Ergebnissen für die Nutzer führen kann. Dieser Kurs beginnt mit einer kurzen Einführung in diese Themen, die wichtigen Kontext gibt, warum es wichtig ist, Leistung zu lernen.
Allgemeine Aspekte der HTML-Leistung
Jede Website beginnt mit einer Anfrage für ein HTML-Dokument, die eine wichtige Rolle dabei spielt, wie schnell Ihre Website geladen wird. In diesem Modul werden wichtige Konzepte wie HTML-Caching, Parserblockierung und Blockierung des Renderings behandelt. So sorgen Sie dafür, dass die erste HTML-Anfrage Ihrer Website nicht richtig beantwortet wird.
Den kritischen Pfad verstehen
Der kritische Rendering-Pfad ist ein Konzept der Webleistung, bei dem es darum geht, wie schnell das ursprüngliche Rendering einer Seite im Browser angezeigt wird. In diesem Modul wird die Theorie hinter dem kritischen Rendering-Pfad erläutert. Es werden Konzepte wie das Rendering und die Parser-Blockierung behandelt und es wird erklärt, welche entscheidende Rolle sie dabei spielen, wie schnell eine Seite im Browser angezeigt wird.
Laden von Ressourcen optimieren
Beim Laden einer Seite wird im HTML-Code auf viele Ressourcen verwiesen. Diese geben einer Seite mit CSS ihr Aussehen und Layout sowie ihre Interaktivität durch JavaScript. In diesem Modul werden verschiedene wichtige Konzepte im Zusammenhang mit diesen Ressourcen und ihre Auswirkungen auf die Ladezeit einer Seite behandelt.
Browser mit Ressourcenhinweisen unterstützen
Ressourcenhinweise sind eine Sammlung von Funktionen in HTML, die dem Browser dabei helfen können, Ressourcen früher und möglicherweise sogar mit höherer Ressourcenpriorität zu laden. In diesem Modul werden einige Hinweise zu Ressourcen erläutert, mit denen du deine Seiten noch schneller laden kannst.
Image-Leistung
Bilder machen heute einen großen Teil der übertragenen Daten auf vielen Webseiten aus. In diesem Modul erfahren Sie, wie Sie Bilder optimieren und effizient bereitstellen, um die Verschwendung von Byte unabhängig vom Gerät des Nutzers zu minimieren.
Videoleistung
Videos sind ein Medientyp, der oft auf Webseiten verwendet wird. Sie sollten jedoch wissen, wie sie effizient bereitgestellt werden, und einen Leistungsaspekt, den Sie nicht übersehen sollten. In diesem Modul werden einige wichtige Techniken beschrieben, mit denen Sie Videos so einbetten können, dass Ihre Website schnell bleibt, sowie entsprechende Leistungsaspekte, die sich bei deren Verwendung ergeben können.
Webschriftarten optimieren
Web-Schriftarten sind eine häufig verwendete Ressource im Web – und das zu Recht –, da sie das Design einer Website auf eine Weise ergänzen, die andere Ressourcen nicht können. Trotzdem verursachen Webschriftarten Leistungskosten. In diesem Modul werden verschiedene Leistungsaspekte und Techniken im Zusammenhang mit Webschriftarten untersucht.
JavaScript für die Codeaufteilung
Einige Ressourcen sind für das anfängliche Laden einer Webseite nicht entscheidend. JavaScript ist eine solche Ressource, die mithilfe einer Methode, die als Codeaufteilung bezeichnet wird, bis zum erforderlichen Zeitpunkt zurückgestellt werden kann. Dadurch lässt sich die Leistung verbessern, indem Sie Bandbreite und CPU-Konflikte reduzieren. Diese Faktoren sind entscheidend, um sowohl die Geschwindigkeit beim ersten Laden der Seite als auch die Reaktionsfähigkeit der Eingabe beim Start zu verbessern.
Lazy Loading von Bildern und <iframe>-Elementen
Bilder und <iframe>-Elemente können eine erhebliche Bandbreite und CPU-Verarbeitungszeit in Anspruch nehmen. Allerdings müssen nicht alle Bilder und <iframe>-Elemente beim ersten Seitenaufbau geladen werden. Sie können auf einen späteren Zeitpunkt zurückversetzt werden, bei dem die Nutzer sie am ehesten sehen. Diese Technik wird als Lazy Loading bezeichnet. In diesem Modul wird das Lazy Loading von Bildern und <iframe>-Elementen erklärt, damit deine Seiten schneller geladen werden und nur bei Bedarf Bandbreite und Verarbeitungszeit in Anspruch genommen werden.
Prefetching, Pre-Rendering und Service Worker-Precaching
Ein Großteil der Leistung hängt davon ab, was Sie tun können, um unnötige Ressourcen zu optimieren und zu beseitigen. Es mag etwas paradox sein, den Eindruck zu erwecken, dass einige Ressourcen geladen werden sollten, bevor sie benötigt werden. Es gibt jedoch Fälle, in denen es angebracht sein kann, bestimmte Ressourcen im Voraus zu laden. In diesem Modul wird dieser Leistungsaspekt betrachtet, da Prefetch, Pre-Rendering und Service Worker-Precaching besprochen werden.
Übersicht über Web Worker
Vieles von dem, was der Nutzer im Browser sieht, findet in einem einzelnen Thread statt, dem sogenannten Hauptthread. Es gibt jedoch auch Möglichkeiten, neue Threads zu starten, um rechenintensive Aufgaben zu erledigen, damit der Hauptthread wichtige nutzerseitige Aufgaben verarbeiten kann. Die hierfür verwendete API ist die Web Worker API. In diesem Modul werden die Grundlagen behandelt.
Ein konkreter Web-Worker-Anwendungsfall
Nachdem Sie nun ein grundlegendes Verständnis von Web Workern und ihren Funktionen und Einschränkungen haben, sehen wir uns nun einen konkreten Anwendungsfall für einen Web Worker an. In dieser Demo wird ein Web Worker verwendet, um eine JPEG-Datei abzurufen, ihre Metadaten zu extrahieren und sie zurück an den Hauptthread zu senden, damit der Nutzer sie im Browser sehen kann.
Sind Sie bereit, sich mit dem Thema Webleistung vertraut zu machen? Lesen Sie zuerst den Artikel Warum Geschwindigkeit wichtig ist.