Ressourcen zur Web-Leistung

• Beginnen Sie damit, den kritischen Renderpfad des Browsers zu lernen. Wenn Sie dies verstehen, 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 so minimal wie möglich. Verwenden Sie nur so viel JavaScript, wie für die aktuelle Seite erforderlich ist.
• CSS Leistungsfaktoren
• Verwenden Sie HTTP/2 auf Ihrem Server (oder CDN).
• Verwenden Sie ein CDN für Ressourcen, um die Ladezeiten erheblich zu verkürzen.
• 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. vollständige Seitenränder für Bot-Verkehr); zum Beispiel durch die Verwendung des loading-Attributs auf dem <img> Element.
• Es ist auch entscheidend zu verstehen, was für Ihre Nutzer wirklich wichtig ist. Es muss nicht die absolute Zeit sein, sondern die Wahrnehmung der Nutzer.

Web-Leistung dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument zum kritischen Renderpfad 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. 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 der Flash of Unstyled Text (FOUT). Der einfachste Weg, dies zu beheben, besteht darin, CSS Inline einzufügen, das für jeden oben sichtbaren Inhalt benötigt wird, oder was Sie im Browser-Viewport sehen, bevor Sie scrollen. Diese Styles verbessern die wahrgenommene Leistung, da das CSS keine Dateianfrage erfordert.

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

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

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 haben eine eingebaute Kompression.

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 Ersatzsystem-Schriftarten. Optimieren Sie das Schriftgewicht, um so nah wie möglich an die Web-Schriftart heranzukommen.

Icon Web Fonts

Vermeiden Sie Icon-Webfonts, wenn möglich, und verwenden Sie komprimierte SVGs. Um 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 nutzen, um Ihre Seite zu profilieren.
• PageSpeed Insights kann Ihre Seite analysieren und allgemeine Hinweise zur Leistungsverbesserung geben.
• Lighthouse kann Ihnen eine detaillierte Aufschlüsselung vieler Aspekte Ihrer Seite einschließlich Leistung, SEO und Zugänglichkeit geben.
• 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 Benutzermetriken quantifiziert.
• Definieren Sie ein Leistungsbudget.

• Sammeln Sie Benutzermetriken mit der boomerang Bibliothek.
• Oder sammeln Sie diese direkt mit window.performance.timing.

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

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