Web-Performance Best Practices & Tipps

Best Practices

• Beginnen Sie damit, den kritischen Rendering-Pfad des Browsers zu lernen. Wenn Sie dies kennen, können Sie die Leistung der Website verbessern.
• Verwenden Sie Resource Hints wie rel=preconnect, rel=dns-prefetch, rel=prefetch, rel=preload.
• Halten Sie die Größe von JavaScript auf einem Minimum. Verwenden Sie nur so viel JavaScript wie für die aktuelle Seite nötig.
• CSS Leistungsfaktoren
• Nutzen Sie HTTP/2 auf Ihrem Server (oder CDN).
• Verwenden 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 SVGs, 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 Seiten für Bot-Traffic rendern), indem Sie das Attribut loading bei dem <img> Element verwenden.
• Es ist auch wichtig zu verstehen, was Ihren Benutzern wirklich wichtig ist. Es könnte nicht die absolute Zeit sein, sondern die Wahrnehmung der Benutzer.

Schnelle Erfolge

CSS

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

Um CSS asynchron zu laden, kann man 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 einem traditionellen Fallback 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 dieses Ansatzes ist das Auftreten von ungestaltetem Text (FOUT). Der einfachste Weg, dies zu beheben, ist das Inline-Styling von CSS, das für alle Inhalte erforderlich ist, die oberhalb des Folds gerendert werden, oder was Sie im Browser-Viewport sehen, bevor Sie scrollen. Diese Stile verbessern die wahrgenommene Performance, da das CSS keine Dateianfrage benötigt.

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

JavaScript

Vermeiden Sie JavaScript-Blockierungen, indem Sie die Attribute async oder defer verwenden oder JavaScript-Assets nach den DOM-Elementen der Seite verlinken. JavaScript blockiert nur das Rendering von Elementen, die nach dem Script-Tag im DOM-Baum erscheinen.

Web-Fonts

EOT- und TTF-Formate sind standardmäßig nicht komprimiert. Wenden Sie Komprimierung wie GZIP oder Brotli auf diese Dateitypen an. Verwenden Sie WOFF und WOFF2. Diese Formate haben eine eingebaute Komprimierung.

Verwenden Sie innerhalb von @font-face font-display: swap. Durch die Verwendung von font display swap blockiert der Browser das Rendering nicht und verwendet die definierten Backup-Systemschriften. Optimieren Sie das Schriftgewicht, um mit der Web-Schriftart so genau wie möglich übereinzustimmen.

Web-Fonts für Symbole

Vermeiden Sie nach Möglichkeit Web-Fonts für Symbole 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 verwenden, um Ihr Site-Profil zu erstellen.
• PageSpeed Insights kann Ihre Seite analysieren und einige allgemeine Hinweise zur Leistungsverbesserung geben.
• Lighthouse kann Ihnen eine detaillierte Analyse vieler Aspekte Ihrer Seite geben, einschließlich Leistung, SEO und Zugänglichkeit.
• Testen Sie die Geschwindigkeit Ihrer Seite mit WebPageTest.org, wo Sie verschiedene reale Gerätetypen und Standorte verwenden können.
• Versuchen Sie den Chrome User Experience Report, der quantifizierte Nutzer-Metriken liefert.
• Definieren Sie ein Performance-Budget.

APIs

• Erfassen Sie Nutzermetriken mit der boomerang Bibliothek.
• Oder erfassen Sie direkt mit window.performance.timing.

Dinge, die man nicht tun sollte (schlechte Praktiken)

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

Siehe auch

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