Webperformance-Ressourcen

• Beginnen Sie damit, den kritischen Renderingpfad des Browsers zu erlernen. Das Wissen darüber wird Ihnen helfen, zu verstehen, wie Sie die Leistung der Website verbessern können.
• Verwenden Sie Resource Hints wie rel=preconnect, rel=dns-prefetch, rel=prefetch, rel=preload.
• Halten Sie die Größe von JavaScript minimal. 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, 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. vollständiges Rendern der Seite für Bot-Traffic); zum Beispiel durch die Verwendung des loading-Attributs im <img>-Element.
• Es ist auch wichtig zu verstehen, was für Ihre Nutzer wirklich wichtig ist. Es geht möglicherweise nicht um absolute Zeiten, sondern um die Wahrnehmung der Nutzer.

Webperformance dreht sich um Benutzererfahrung und wahrgenommene Leistung. Wie wir im Dokument zum kritischen Renderingpfad 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 auf print setzen und dann nach dem Laden auf all umstellen. Dies erfordert JavaScript, daher ist es wichtig, ein <noscript>-Tag mit einer traditionellen Fallback-Lösung einzubinden.

<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 bei dieser Methode ist das Aufblitzen ungestylten Textes (FOUT). Der einfachste Weg, dies zu beheben, ist, CSS inline einzubinden, das für jeden Inhalt benötigt wird, der über dem Falz gerendert wird, oder was im Browser-Viewport vor dem Scrollen zu sehen ist. Diese Stile verbessern die wahrgenommene Leistung, da das CSS keine Dateianfrage erfordert.

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

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

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

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 systemeigenen Schriftarten als Backup. Optimieren Sie das Schriftgewicht, um es so genau wie möglich an die Web-Schriftart anzupassen.

Symbol-Webfonts

Vermeiden Sie, wenn möglich, Symbol-Webfonts und verwenden Sie komprimierte SVGs. Um weiter zu optimieren, können Sie Ihre SVG-Daten innerhalb des HTML-Markups einbetten, um HTTP-Anfragen zu vermeiden.

• Lernen Sie, die Firefox Dev Tools zu verwenden, um Ihre Website zu profilieren.
• PageSpeed Insights kann Ihre Seite analysieren und allgemeine Hinweise zur Verbesserung der Leistung geben.
• Lighthouse kann Ihnen eine detaillierte Aufschlüsselung vieler Aspekte Ihrer Website bieten, 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 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