Web Performance Ressourcen

• Beginnen Sie mit dem Lernen des kritischen Rendering-Pfads des Browsers. Dieses Wissen wird Ihnen helfen, die Leistung der Website zu 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 notwendig ist.
• CSS Leistungsfaktoren
• Verwenden Sie HTTP/2 auf Ihrem Server (oder CDN).
• Nutzen Sie ein CDN für Ressourcen, um die Ladezeiten signifikant zu reduzieren.
• 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); beispielsweise durch Verwendung des loading Attributs am <img> Element.
• Es ist auch wichtig zu erkennen, was Ihren Nutzern wirklich wichtig ist. Es geht möglicherweise nicht um absolute Zeit, sondern um Benutzerwahrnehmung.

Web-Performance dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument über den kritischen Rendering-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, indem Sie blockierendes CSS entfernen.

Um CSS asynchron zu laden, kann man den Medientyp zunächst auf drucken setzen und dann auf alles ändern, wenn es geladen ist. Das folgende Snippet enthält ein onload-Attribut, das JavaScript erfordert, daher ist es wichtig, ein noscript-Tag mit einem herkömmlichen Fallback einzubinden.

<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 Aufblitzen ungestalteten Textes (FOUT). Der einfachste Weg, dies zu beheben, ist, CSS inline einzubinden, das für jeglichen Inhalt benötigt wird, der oberhalb der Falte gerendert wird, oder was Sie im Browser-Viewport sehen, bevor Sie scrollen. Diese Stile verbessern die wahrgenommene Leistung, da das CSS keine Dateianfrage erfordert.

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

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

EOT- und TTF-Formate sind standardmäßig nicht komprimiert. Wenden Sie Komprimierungen wie GZIP oder Brotli für diese Dateitypen an. Verwenden Sie WOFF und WOFF2. Diese Formate haben 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-Systemschriftarten. Optimieren Sie das Schriftgewicht, um die Web-Schriftart so genau wie möglich zu treffen.

Icon Web Fonts

Vermeiden Sie, wenn möglich, Icon-Web-Schriftarten und verwenden Sie komprimierte SVGs. Um weiter zu optimieren, integrieren Sie Ihre SVG-Daten innerhalb der HTML-Markierung, um HTTP-Anfragen zu vermeiden.

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

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

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

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