Web Performance-Ressourcen

• Beginnen Sie damit, den Critical Rendering Path des Browsers zu erlernen. Das Wissen darüber hilft Ihnen, 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 einem Minimum. 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).
• Nutzen Sie ein CDN für Ressourcen, das die Ladezeiten erheblich reduzieren kann.
• Komprimieren Sie Ihre Ressourcen mit gzip, Brotli und Zopfli.
• Bildoptimierung (verwenden Sie nach Möglichkeit CSS-Animation oder SVG).
• Verwenden Sie Lazy Loading für Teile Ihrer Anwendung außerhalb des Viewports. Wenn Sie dies tun, haben Sie einen Backup-Plan für SEO (z.B. gesamte Seite für Bot-Traffic rendern); z.B. durch Verwendung des loading-Attributs im <img>-Element.
• Es ist auch wichtig zu erkennen, was für Ihre Nutzer wirklich wichtig ist. Es geht möglicherweise nicht um absolute Zeiten, sondern um die Wahrnehmung der Nutzer.

Web-Performance dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument zum Critical Rendering Path 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 „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 bei diesem Ansatz ist der Flash of Unstyled Text (FOUT). Der einfachste Weg, dies zu beheben, besteht darin, CSS inline zu verwenden, das für jeden Inhalt erforderlich ist, der über der Falzlinie gerendert wird, oder 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 das Blockieren von JavaScript, indem Sie die async oder defer-Attribute verwenden oder JavaScript-Dateien 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 eine integrierte 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-Systemschriften. Optimieren Sie das Schriftgewicht, um der Webschriftart möglichst nahe zu kommen.

Icon-Webschriften

Vermeiden Sie, wenn möglich, Icon-Webschriften und verwenden Sie komprimierte SVGs. Um weiter zu optimieren, betten Sie Ihre SVG-Daten in das HTML-Markup ein, um HTTP-Anfragen zu vermeiden.

• Lernen Sie, die Firefox Dev Tools zu nutzen, um Ihre Website zu profilieren.
• PageSpeed Insights kann Ihre Seite analysieren und einige allgemeine Hinweise zur Leistungsverbesserung geben.
• Lighthouse kann Ihnen eine detaillierte Analyse vieler Aspekte Ihrer Website geben, einschließlich Leistung, SEO und Barrierefreiheit.
• 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 tatsächliche Nutzermetriken quantifiziert.
• Definieren Sie ein Performance-Budget.

• 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