Beste Praktiken & Tipps zur Web-Performance

Beste Praktiken

• Beginnen Sie mit dem Erlernen des kritischen Rendering-Pfades des Browsers. Wenn Sie diesen verstehen, können Sie die Performance Ihrer Website verbessern.
• Verwenden Sie Resource Hints wie rel=preconnect, rel=dns-prefetch, rel=prefetch, rel=preload.
• Halten Sie die Größe von JavaScript auf ein Minimum. Verwenden Sie nur so viel JavaScript, wie für die aktuelle Seite erforderlich ist.
• CSS Performance-Faktoren
• Verwenden Sie HTTP/2 auf Ihrem Server (oder CDN).
• Nutzen Sie ein CDN für Ressourcen, was die Ladezeiten erheblich reduzieren kann.
• Komprimieren Sie Ihre Ressourcen mit gzip, Brotli und Zopfli.
• Bildoptimierung (verwenden Sie CSS-Animationen oder SVG, wenn möglich).
• Lazy Loading von Teilen Ihrer Anwendung außerhalb des Viewports. Wenn Sie dies tun, haben Sie einen Backup-Plan für SEO (z. B. vollständige Seite für Bot-Traffic rendern); zum Beispiel durch Verwendung des loading Attributes auf dem <img> Element, oder ähnlich auf <iframe>, <video>, <audio> Elementen.
• Es ist auch wichtig, zu erkennen, was wirklich für Ihre Benutzer wichtig ist. Es könnte nicht die absolute Zeit sein, sondern Benutzerwahrnehmung.

Schnelle Erfolge

CSS

Web-Performance dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument über den kritischen Rendering-Pfad gelernt haben, blockiert das Verknüpfen von CSS mit einem traditionellen Link-Tag mit rel="stylesheet" das Rendering synchron. Optimieren Sie das Rendering Ihrer Seite, indem Sie blockierendes CSS entfernen.

Um CSS asynchron zu laden, können Sie den Medientyp auf print setzen und dann auf all ändern, sobald es geladen ist. Dies erfordert JavaScript, daher ist es wichtig, einen <noscript>-Tag mit einer traditionellen Fallback-Option einzuschließen.

<link
  id="my-stylesheet"
  rel="stylesheet"
  href="/path/to/my.css"
  media="print" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>

const stylesheet = document.getElementById("my-stylesheet");
stylesheet.addEventListener("load", () => {
  stylesheet.media = "all";
});

Der Nachteil dieser Methode ist der Flash of Unstyled Text (FOUT). Der einfachste Weg, dies zu beheben, besteht darin, CSS, das für Inhalte erforderlich ist, die oberhalb des Folds dargestellt werden, inline zu definieren, oder was Sie im Browser-Viewport sehen, bevor gescrollt wird. Diese Styles verbessern die wahrgenommene Leistung, da das CSS keine Dateianfrage benötigt.

<style>
  /* Insert your CSS here */
</style>

JavaScript

Vermeiden Sie blockierendes JavaScript durch die Nutzung der Attribute async oder defer, oder verknüpfen Sie JavaScript-Ressourcen nach den DOM-Elementen der Seite. JavaScript blockiert das Rendering nur für Elemente, die nach dem Script-Tag im DOM-Baum erscheinen.

Webfonts

EOT und TTF-Formate sind standardmäßig nicht komprimiert. Wenden Sie Kompression wie GZIP oder Brotli für diese Dateitypen an. Verwenden Sie WOFF und WOFF2. Diese Formate verfügen über eine eingebaute Kompression.

Innerhalb von @font-face verwenden Sie font-display: swap. Durch die Nutzung von Font-Display-Swap blockiert der Browser das Rendering nicht und verwendet die definierten systemeigenen Fallback-Schriftarten. Optimieren Sie das Schriftgewicht, um so gut wie möglich mit der Webfont-Schriftart übereinzustimmen.

Icon-Webfonts

Wenn möglich, vermeiden Sie Icon-Webfonts und verwenden Sie komprimierte SVGs. Um weiter zu optimieren, betten Sie Ihre SVG-Daten innerhalb des HTML-Markups ein, um HTTP-Anfragen zu vermeiden.

Tools

• Lernen Sie, die Firefox Dev Tools zu nutzen, um Ihre Seite zu profilieren.
• PageSpeed Insights kann Ihre Seite analysieren und einige allgemeine Hinweise zur Verbesserung der Performance geben.
• Lighthouse kann Ihnen eine detaillierte Übersicht vieler Aspekte Ihrer Seite einschließlich Performance, SEO und Zugänglichkeit geben.
• Testen Sie die Geschwindigkeit Ihrer Seite mit WebPageTest.org, wo Sie verschiedene echte Gerätetypen und Standorte verwenden können.
• Probieren Sie den Chrome User Experience Report, der reale Benutzerkennzahlen quantifiziert.
• Definieren Sie ein Performance-Budget.

APIs

• Sammeln Sie Benutzerkennzahlen mit dem boomerang Bibliothek.
• Oder sammeln Sie direkt mit window.performance.timing

Dinge, die Sie nicht tun sollten (schlechte Praktiken)

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

Siehe auch

• https://github.com/filamentgroup/loadCSS