Blitzschnelle Web-Performance
Lernen Sie, wie Sie die Website Performance analysieren, Fehler beheben, Regressionen verfolgen und von Anfang an schnelle, reaktionsfähige Designs entwickeln.
Kurze Kurseinführung
Was Sie lernen werden
In dieser Vorlesungsreihe erhalten Sie ein umfassendes Verständnis der Front-End-Web-Performance, das Sie in die Lage versetzt, Websites schnell und zuverlässig zu erstellen.
Sie werden lernen, wie Sie heute effektiv über Web-Performance nachdenken und Prioritäten setzen können.
Sie erfahren etwas über gängige Leistungsmetriken, welche am wichtigsten sind und wie Sie Leistungsengpässe erkennen, die sich auf die Benutzerfreundlichkeit auswirken.
Sie lernen, wie Sie Leistungsprobleme beheben, Prozesse zur Verhinderung von Regressionen einsetzen und die Entwicklung so gestalten, dass Probleme gar nicht erst auftreten.
Behandelte Themen
Stakeholder davon überzeugen, der Leistung Priorität einzuräumen
Messung und Benchmarking der wahrgenommenen Leistung
Verstehen des Ladevorgangs von Webseiten
Identifizierung von Leistungsproblemen auf Serverebene
Wissen, wie und wann die Dateigröße wichtig ist
Bewertung von Mustern für das Laden von CSS, JavaScript, Bildern, SVG und Schriftarten
Optimierung des kritischen Pfades zur wahrgenommenen Leistung
Hilfreiche Tools und Bibliotheken
HTTP/2 und seine hilfreichen Ergänzungen
Content-Delivery-Netze und Umwandlung von Edge-Caches
Optimistische, aber sichere Verbesserung einer Benutzeroberfläche
Client-seitige Caching-Strategien
Beibehaltung der Leistung nach dem Laden der Seite
Wissen, wie und wann die Dateigröße wichtig ist
Service Workers für sporadische oder Offline-Verbindungen
Überwachung, Pflege und Verteidigung einer schnellen Website, die sich weiterentwickelt
Bestehende Websites schneller und widerstandsfähiger machen
Sehen Sie, was Sie bekommen
Diese Clips wurden an verschiedenen Stellen der Vorlesungsreihe aufgenommen und veranschaulichen die Art der Präsentation, die Sie während der gesamten Reihe erwarten können.
Ist das für mich?
Diese Vortragsreihe ist so konzipiert, dass sie Performance ganzheitlich abdeckt, beginnend mit den Grundlagen und weiterführend mit technischen und nicht technischen Punkten. Der Kurs setzt keine Kenntnisse über Performance-Konzepte voraus, sondern richtet sich an Front-End-Entwickler und UI/UX-Designer, die mit HTML und CSS vertraut sind und über Grundkenntnisse in JavaScript verfügen.
Wenn Sie als Designer oder Entwickler ein besseres Verständnis dafür erlangen möchten, wie sich Ihre Entscheidungen und Ihre Unternehmenskultur auf Ihre Fähigkeit auswirken, schnell und belastbar zu liefern, ist dies der richtige Kurs für Sie.
Starten Sie den Kurs!
Dieser kostenlose Kurs besteht aus einer Reihe von Videovorlesungen, die Screencasts und kommentierte Folien kombinieren. Die Videos sind mit Untertiteln versehen, und jedem Video liegt eine PDF-Datei mit Links zu den darin erwähnten Ressourcen bei. Für einige Videos müssen Sie sich für ein kostenloses WebPageTest-Konto anmelden.
1. Willkommen
(02:26 Min.)Eine Einführung in den Kurs und einen Überblick über die zu erwartende Aufteilung des Lehrstoffs.
Zusätzlicher Inhalt des Abschnitts
2. Warum Leistung wichtig ist
(15:47 Min.)Ein Blick von oben nach unten darauf, wie sich die Leistung auf die Benutzererfahrung und andere Belange im heutigen Web auswirkt.
Zusätzlicher Inhalt des Abschnitts
3. Metriken! Wie definieren wir schnell?
(24:36 Min.)Ein Blick von oben nach unten darauf, wie sich die Leistung auf die Benutzererfahrung und andere Belange im heutigen Web auswirkt.
Zusätzlicher Inhalt des Abschnitts
4. Identifizierung von Leistungsproblemen
(49:37 Min.)Ein tiefer Einblick in den Prozess der Verwendung gängiger Performance-Tools zum Auffinden und Diagnostizieren von Problemen mit der Webseiten-Performance.
Zusätzlicher Inhalt des Abschnitts
5. Dinge schneller machen
1. Optimieren von Dateien
(27:25 Min.)Die Optimierung von Dateien ist eine der einfachsten und wirkungsvollsten Methoden, um die Leistungsfähigkeit Ihrer Website zu verbessern.
Zusätzlicher Inhalt des Abschnitts
2. Anfängliche Bytes
(09:42 Min.)Informieren Sie sich über die Grundlagen der ersten Seitenbereitstellung und über die Ursachen für eine langsame Bereitstellung.
Zusätzlicher Inhalt des Abschnitts
3. Erste Anstriche
(26:59 Min.)Untersuchen Sie die Engpässe zwischen den anfänglichen Bytes und dem anfänglichen Rendering der Seite und wie Sie diese beseitigen können.
Zusätzlicher Inhalt des Abschnitts
4. LCP und aussagekräftige Farben
(44:04 Min.)Ein Blick auf die Bedingungen, die zu großen gehaltvollen Farben beitragen, und wie man sie beschleunigen kann.
Zusätzlicher Inhalt des Abschnitts
5. Interaktiv werden
(14:32 Min.)Ein Blick auf die Verzögerungen zwischen dem Zeitpunkt, an dem eine Seite brauchbar aussieht und tatsächlich auf Benutzerinteraktionen reagiert, und wie man sie abmildern kann.
Zusätzlicher Inhalt des Abschnitts
6. für wiederkehrende Besuche
(21:30 Min.)Eine gute Leistung berücksichtigt das ganzheitliche Nutzererlebnis, und viele Optimierungen können wiederkehrende Besuche schneller und ausdauernder machen.
Zusätzlicher Inhalt des Abschnitts
6. Einpacken
(49:37 Min.)Ein Rückblick auf all das, worüber wir berichtet haben.
Zusätzlicher Inhalt des Abschnitts
Bescheinigung über den Abschluss
Ihr Zertifikat
Herzlichen Glückwunsch zum Abschluss des Kurses. Verwenden Sie dieses Zertifikat, um Ihre Leistung zu zeigen!
Zusätzlicher Inhalt des Abschnitts
Über Ihren Gastgeber
Scott Jehl ist ein erfahrener Profi mit mehr als zwei Jahrzehnten Erfahrung in kreativem Design und Front-End-Technologie. Er hat Web-Design- und Entwicklungsprojekte für zahlreiche bekannte Marken geleitet. Er schreibt und spricht gerne für verschiedene Publikationen und Konferenzen auf der ganzen Welt.
Scott ist Autor von Responsible Responsive Design (2014, A Book Apart) und Mitautor von Designing with Progressive Enhancement (2010, New Riders). In seiner Freizeit geht er gerne surfen.
