• Zurück
• Übersicht: Web-Performance

Es gibt vieleGründe, warum Ihre Website so gut wie möglich performen sollte. Im Folgenden finden Sie eine kurze Übersicht über Best Practices, Tools und APIs mit Links, die weitere Informationen zu jedem Thema bereitstellen.

Best Practices

• Beginnen Sie damit, denkritischen Rendering-Pfad des Browsers zu lernen. Wenn Sie dies kennen, können Sie die Leistung der Website verbessern.
• Verwenden SieResource Hints wierel=preconnect,rel=dns-prefetch,rel=prefetch,rel=preload.
• Halten Sie die Größe von JavaScript auf einemMinimum. Verwenden Sie nur so viel JavaScript wie für die aktuelle Seite nötig.
• CSS Leistungsfaktoren
• Nutzen SieHTTP/2 auf Ihrem Server (oder CDN).
• Verwenden Sie ein CDN für Ressourcen, was die Ladezeiten erheblich reduzieren kann.
• Komprimieren Sie Ihre Ressourcen mitgzip,Brotli undZopfli.
• Bildoptimierung (verwenden Sie CSS-Animationen oder SVGs, 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 Seiten für Bot-Traffic rendern), indem Sie das Attributloading bei dem<img> Element verwenden.
• Es ist auch wichtig zu verstehen, was Ihren Benutzern wirklich wichtig ist. Es könnte nicht die absolute Zeit sein, sondern dieWahrnehmung der Benutzer.

Schnelle Erfolge

CSS

Web-Performance dreht sich alles um Benutzererfahrung und wahrgenommene Performance. Wie wir im Dokument über denkritischen Rendering-Pfad gelernt haben, ist das Verknüpfen von CSS mit einem traditionellen Link-Tag mitrel="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 aufprint setzen und dann aufall ändern, sobald es geladen ist. Dies erfordert JavaScript, daher ist es wichtig, einen<noscript> Tag mit einem traditionellen Fallback einzuschließen.

<link   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 dieses Ansatzes ist das Auftreten von ungestaltetem Text (FOUT). Der einfachste Weg, dies zu beheben, ist das Inline-Styling von CSS, das für alle Inhalte erforderlich ist, die oberhalb des Folds gerendert werden, oder was Sie im Browser-Viewport sehen, bevor Sie scrollen. Diese Stile verbessern die wahrgenommene Performance, da das CSS keine Dateianfrage benötigt.

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

JavaScript

Vermeiden Sie JavaScript-Blockierungen, indem Sie die Attributeasync oderdefer verwenden oder JavaScript-Assets nach den DOM-Elementen der Seite verlinken. JavaScript blockiert nur das Rendering von Elementen, die nach dem Script-Tag im DOM-Baum erscheinen.

Web-Fonts

EOT- und TTF-Formate sind standardmäßig nicht komprimiert. Wenden Sie Komprimierung wie GZIP oder Brotli auf diese Dateitypen an. Verwenden Sie WOFF und WOFF2. Diese Formate haben eine 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-Systemschriften. Optimieren Sie dasSchriftgewicht, um mit der Web-Schriftart so genau wie möglich übereinzustimmen.

Web-Fonts für Symbole

Vermeiden Sie nach Möglichkeit Web-Fonts für Symbole und verwenden Sie komprimierte SVGs. Um weiter zu optimieren, betten Sie Ihre SVG-Daten innerhalb des HTML-Markups ein, um HTTP-Anfragen zu vermeiden.

Tools

• Lernen Sie, dieFirefox 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 eine detaillierte Analyse vieler Aspekte Ihrer Seite geben, einschließlich Leistung, SEO und Zugänglichkeit.
• Testen Sie die Geschwindigkeit Ihrer Seite mitWebPageTest.org, wo Sie verschiedene reale Gerätetypen und Standorte verwenden können.
• Versuchen Sie denChrome User Experience Report, der quantifizierte Nutzer-Metriken liefert.
• Definieren Sie einPerformance-Budget.

APIs

• Erfassen Sie Nutzermetriken mit derboomerang Bibliothek.
• Oder erfassen Sie direkt mitwindow.performance.timing.

Dinge, die man nicht tun sollte (schlechte Praktiken)

• Alles herunterladen
• Unkomprimierte Mediendateien verwenden

Siehe auch

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