Web-Performance-Ressourcen

• Beginnen Sie mit dem Erlernen des kritischen Render-Pfades des Browsers. Diese Kenntnis wird Ihnen helfen, die Leistung der Website zu verbessern.
• Verwenden Sie Ressourcenhinweise 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 benötigt wird.
• CSS-Performance-Faktoren
• Verwenden 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 SVG, wenn möglich).
• Verzögertes Laden von Teilen Ihrer Anwendung außerhalb des Viewports. Wenn Sie dies tun, haben Sie einen Backup-Plan für SEO (z.B. volle Seite für Bot-Traffic rendern); zum Beispiel durch Verwendung des loading-Attributs am <img>-Element.
• Es ist auch wichtig zu erkennen, was für Ihre Nutzer wirklich wichtig ist. Es könnten nicht die absoluten Zeiten sein, sondern die Wahrnehmung der Benutzer.

Web-Performance dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument über den kritischen Render-Pfad gelernt haben, ist das Verlinken von CSS mit einem traditionellen Link-Tag mit rel="stylesheet" synchron und blockiert das Rendering. Optimieren Sie das Rendering Ihrer Seite durch das Entfernen von blockierendem CSS.

Um CSS asynchron zu laden, kann man den Medientyp auf Druck setzen und dann auf Alle ändern, sobald es geladen ist. Das folgende Snippet enthält ein onload-Attribut, das JavaScript erfordert, daher ist es wichtig, ein noscript-Tag mit einem traditionellen Fallback einzuschließen.

<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/path/to/my.css" /></noscript>

Der Nachteil dieses Ansatzes ist das Blitzen von ungestyltem Text (FOUT). Der einfachste Weg, dies zu beheben, besteht darin, CSS in den Code einzubetten, das für alle Inhalte erforderlich ist, die über der Falzlinie gerendert werden, also das, was Sie im Browser-Viewport sehen, bevor Sie scrollen. Diese Styles verbessern die wahrgenommene Leistung, da das CSS keine Dateianforderung erfordert.

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

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

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

Innerhalb von @font-face verwenden Sie font-display: swap. Durch die Verwendung von font-display: swap blockiert der Browser das Rendering nicht und verwendet die definierten Backup-Systemschriftarten. Optimieren Sie das Schriftgewicht, um der Web-Schriftart möglichst nahe zu kommen.

Icon-Schriftarten

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

• 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 einen detaillierten Überblick über viele Aspekte Ihrer Website geben, einschließlich Performance, SEO und Barrierefreiheit.
• Testen Sie die Geschwindigkeit Ihrer Seite mit WebPageTest.org, wo Sie verschiedene reale Gerätetypen und Standorte verwenden können.
• Probieren Sie den Chrome User Experience Report aus, der reale Nutzermetriken quantifiziert.
• Definieren Sie ein Performance-Budget.

• Sammeln Sie Nutzermetriken mit der boomerang-Bibliothek.
• Oder sammeln Sie direkt mit window.performance.timing

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

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