Front-End-Performance 2021: Quick Wins

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Machen wir 2021 … schnell! Eine jährliche Front-End-Performance-Checkliste mit allem, was Sie wissen müssen, um heute schnelle Erfahrungen im Web zu erstellen, von Metriken über Tools bis hin zu Front-End-Techniken. Aktualisiert seit 2016.

Inhaltsverzeichnis

  1. Vorbereitung: Planung und Metriken
  2. Realistische Ziele setzen
  3. Die Umgebung definieren
  4. Asset-Optimierungen
  5. Build-Optimierungen
  6. Lieferoptimierungen
  7. Netzwerk, HTTP/2, HTTP/3
  8. Testen und Überwachen
  9. Schnelle Gewinne
  10. Alles auf einer Seite
  11. Checkliste herunterladen (PDF, Apple Pages, MS Word)
  12. Alles auf einer Seite
  13. Checkliste herunterladen (PDF, Apple Pages, MS Word)
  14. Abonnieren Sie unseren E-Mail-Newsletter, um die nächsten Anleitungen nicht zu verpassen.

Schnelle Gewinne

Diese Liste ist ziemlich umfangreich, und das Abschließen aller Optimierungen kann eine ganze Weile dauern. Was würden Sie also tun, wenn Sie nur 1 Stunde Zeit hätten, um signifikante Verbesserungen zu erzielen? Lassen Sie uns alles auf 17 niedrig hängende Früchte reduzieren . Messen Sie natürlich vor Beginn und nach Abschluss die Ergebnisse, einschließlich „Last Contentful Paint“ und „Time To Interactive“ über eine 3G- und Kabelverbindung.

  1. Messen Sie die Erfahrung in der realen Welt und setzen Sie sich angemessene Ziele. Versuchen Sie, mindestens 20 % schneller zu sein als Ihr schnellster Konkurrent. Bleiben Sie innerhalb des größten Contentful Paint < 2,5 s, eine erste Eingabeverzögerung < 100 ms, Zeit bis zur Interaktivität < 5 s bei langsamem 3G, für wiederholte Besuche, TTI < 2 s. Optimieren Sie mindestens für First Contentful Paint und Time To Interactive.
  2. Optimieren Sie Bilder mit Squoosh, mozjpeg, guetzli, pingo und SVGOMG und stellen Sie AVIF/WebP mit einem Bild-CDN bereit.
  3. Bereiten Sie kritisches CSS für Ihre Hauptvorlagen vor und integrieren Sie sie in den <head> jeder Vorlage. Arbeiten Sie für CSS/JS innerhalb eines kritischen Dateigrößenbudgets von max. 170 KB gzippt (0,7 MB dekomprimiert).
  4. Trimmen, Optimieren, Verzögern und Lazy-Load von Skripten. Investieren Sie in die Konfiguration Ihres Bundlers, um Redundanzen zu entfernen und leichte Alternativen zu prüfen.
  5. Hosten Sie Ihre statischen Assets immer selbst und ziehen Sie es immer vor, Assets von Drittanbietern selbst zu hosten. Begrenzen Sie die Auswirkungen von Skripten von Drittanbietern. Verwenden Sie Fassaden, laden Sie Widgets bei der Interaktion und achten Sie auf Anti-Flicker-Snippets.
  6. Seien Sie wählerisch bei der Auswahl eines Frameworks. Identifizieren Sie für Single-Page-Anwendungen kritische Seiten und stellen Sie sie statisch bereit oder rendern Sie sie zumindest vor, verwenden Sie progressive Hydratation auf Komponentenebene und importieren Sie Module bei Interaktion.
  7. Clientseitiges Rendern allein ist keine gute Wahl für die Leistung. Rendern Sie vor, wenn sich Ihre Seiten nicht stark ändern, und verschieben Sie das Booten von Frameworks, wenn Sie können. Verwenden Sie nach Möglichkeit serverseitiges Streaming-Rendering.
  8. Stellen Sie Legacy-Code nur für Legacy-Browser mit <script type="module"> und module/nomodule-Muster bereit.
  9. Experimentieren Sie mit der Neugruppierung Ihrer CSS-Regeln und testen Sie In-Body-CSS.
  10. Fügen Sie Ressourcenhinweise hinzu, um die Bereitstellung mit schnellerem dns-lookup , preconnect , prefetch , preload und prerender zu beschleunigen.
  11. Unterteilen Sie Webschriftarten und laden Sie sie asynchron, und nutzen Sie die font-display in CSS für ein schnelles erstes Rendern.
  12. Überprüfen Sie, ob HTTP-Cache-Header und Sicherheitsheader richtig eingestellt sind.
  13. Aktivieren Sie die Brotli-Komprimierung auf dem Server. (Wenn das nicht möglich ist, stellen Sie zumindest sicher, dass die Gzip-Komprimierung aktiviert ist.)
  14. Aktivieren Sie die TCP-BBR-Überlastung, solange Ihr Server auf der Linux-Kernel-Version 4.9+ läuft.
  15. Aktivieren Sie nach Möglichkeit OCSP-Stapling und IPv6. Stellen Sie immer ein OCSP-geheftetes DV-Zertifikat bereit.
  16. Aktivieren Sie die HPACK-Komprimierung für HTTP/2 und wechseln Sie zu HTTP/3, falls verfügbar.
  17. Cache-Assets wie Schriftarten, Stile, JavaScript und Bilder in einem Service-Worker-Cache.

Checkliste herunterladen (PDF, Apple Pages)

Mit dieser Checkliste sollten Sie auf jede Art von Front-End-Performance-Projekt vorbereitet sein. Sie können gerne das druckfertige PDF der Checkliste sowie ein bearbeitbares Apple Pages-Dokument herunterladen, um die Checkliste an Ihre Bedürfnisse anzupassen:

  • Checkliste PDF herunterladen (PDF, 166 KB)
  • Checkliste in Apple Pages herunterladen (.pages, 275 KB)
  • Download der Checkliste in MS Word (.docx, 151 KB)

Wenn Sie Alternativen benötigen, können Sie auch die Frontend-Checkliste von Dan Rublic, die "Designer's Web Performance Checklist" von Jon Yablonski und die FrontendChecklist überprüfen.

Los geht's!

Einige der Optimierungen könnten den Rahmen Ihrer Arbeit oder Ihres Budgets sprengen oder angesichts des Legacy-Codes, mit dem Sie sich befassen müssen, einfach übertrieben sein. Das ist gut! Verwenden Sie diese Checkliste als allgemeinen (und hoffentlich umfassenden) Leitfaden und erstellen Sie Ihre eigene Liste von Problemen, die für Ihren Kontext gelten. Am wichtigsten ist jedoch, dass Sie Ihre eigenen Projekte testen und messen, um Probleme zu identifizieren, bevor Sie sie optimieren. Allen frohe Leistungsergebnisse im Jahr 2021!

Inhaltsverzeichnis

  1. Vorbereitung: Planung und Metriken
  2. Realistische Ziele setzen
  3. Die Umgebung definieren
  4. Asset-Optimierungen
  5. Build-Optimierungen
  6. Lieferoptimierungen
  7. Netzwerk, HTTP/2, HTTP/3
  8. Testen und Überwachen
  9. Schnelle Gewinne
  10. Alles auf einer Seite
  11. Checkliste herunterladen (PDF, Apple Pages, MS Word)
  12. Alles auf einer Seite
  13. Checkliste herunterladen (PDF, Apple Pages, MS Word)
  14. Abonnieren Sie unseren E-Mail-Newsletter, um die nächsten Anleitungen nicht zu verpassen.

Ein großes Dankeschön an Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov und Rodney Rehm für die Durchsicht dieses Artikels sowie unserer fantastischen Community, die Techniken und Lehren aus ihrer Arbeit in der Leistungsoptimierung geteilt hat, die jeder nutzen kann . Du bist wirklich der Hammer!