Performance Tools

Wochenend-Zusammenfassung! Von der Vielzahl von Grunt- und Gulp-Plugins bis hin zu Webanwendungen, die uns helfen können, unsere Websites mit Daten zu visualisieren – es ist schwierig, alle Feinheiten von Performance-Tools zu erlernen. Ich dachte, es wäre nützlich, so viele Tools zu katalogisieren, wie ich finden konnte.

Content Delivery Networks (CDNs)

Ein CDN verteilt die Assets Ihrer Website auf der ganzen Welt, um sie so schnell wie möglich auszuliefern, unabhängig vom geografischen Standort des jeweiligen Nutzers.

CloudFlare

CloudFlare arbeitet mit all seiner Magie (CDN ist nur ein Teil davon), indem es Ihr DNS-Server ist, sodass alle Anfragen an Ihre Website über sie laufen.

CloudFlare hat sein CDN ohne das Erbe der letzten 15 Jahre entwickelt. Unsere proprietäre Technologie nutzt die jüngsten Änderungen an Hardware, Webservertechnologie und Netzwerk-Routing. Mit anderen Worten, wir haben das CDN der nächsten Generation entwickelt. Das Ergebnis ist ein CDN, das einfacher einzurichten, erschwinglicher und leistungsfähiger ist als jedes bisher von Ihnen ausprobierte Legacy-CDN.

MaxCDN

CSS-Tricks verwendet MaxCDN, um alle unsere statischen Assets zu hosten. Es lässt sich gut mit WordPress und W3 Total Cache integrieren, sodass wir nichts Besonderes tun müssen. Assets werden einfach auf das CDN verschoben und ordnungsgemäß verlinkt.

Unser Netzwerk ist zu gleichen Teilen ein Seitenbeschleuniger und ein Echtzeit-Kontrollzentrum. Wir haben es so gebaut, dass sowohl Ihre Kunden als auch DevOps den maximalen Nutzen eines CDN der nächsten Generation erhalten.

CloudFront

Amazon Web Services Version eines CDN.

Amazon CloudFront ist ein Content-Delivery-Webdienst. Es integriert sich mit anderen Amazon Web Services-Produkten, um Entwicklern und Unternehmen eine einfache Möglichkeit zu bieten, Inhalte mit geringer Latenz, hohen Datenübertragungsgeschwindigkeiten und ohne Mindestnutzungsverpflichtungen an Endbenutzer zu verteilen.

CDNperf

Es gibt CDNs, die Ihre eigenen beliebigen Assets nicht hosten, wie die oben genannten. Sie hosten nur beliebte Dateien und laden Sie ein, sie dort zu verlinken. Typischerweise keine gute Idee für Produktions-Websites (Sie könnten Ihre Assets genauso gut zusammenfügen und von Ihrem eigenen CDN ausliefern), es ist immer noch nützlich für einen einfachen (und schnellen!) Zugriff auf diese Assets.

CDNperf findet Ihnen schnelle und zuverlässige JavaScript-CDNs, die Ihre Websites reaktionsschnell und glücklich machen!

Performance Testing

Diese Dienste verwenden Metriken wie die **Zeit bis zum ersten Byte** oder die **Renderzeit** einer Website, um ihre Leistung zu bewerten. Einige überprüfen auch, ob bestimmte Assets zwischengespeichert wurden oder ob mehrere CSS- oder JS-Dateien zusammengeführt werden sollten.

WebPagetest

WebPagetest ist so etwas wie der Goldstandard im Performance-Testing, da es Ihnen alle möglichen nützlichen Metriken liefert, wie eine allgemeine Punktzahl, die es zu verbessern gilt, einen Filmstreifen, um zu sehen, was wann sichtbar ist, während Ihre Website geladen wird, Netzwerk-Wasserfälle in Browsern, die dies normalerweise nicht bieten, und mehr.

Führen Sie einen kostenlosen Website-Geschwindigkeitstest von überall auf der Welt durch, verwenden Sie echte Browser mit Verbraucher-Verbindungsgeschwindigkeiten und erhalten Sie detaillierte Optimierungsempfehlungen.

Die Dienste von WebPagetest sind auch als NPM-Modul und Kommandozeilentool mit dem API-Wrapper verfügbar.

• webpagetest-mapper: Ordnet WebPageTest-Ergebnisdaten in menschenlesbare Dokumentformate.
• WPT Bulk Tester: Verwenden Sie Google Docs, um mehrere URLs mit WebPageTest zu testen (entweder webpagetest.org mit einem API-Schlüssel oder eine andere öffentlich zugängliche Instanz).

Yslow

YSlow analysiert Webseiten und erklärt, warum sie langsam sind, basierend auf den Regeln von Yahoo! für hochperformante Websites.

Google PageSpeed

Die PageSpeed-Tools analysieren und optimieren Ihre Website nach den Best Practices des Webs.

Es gibt auch eine CLI für den Zugriff auf PageSpeed Insights mit Berichterstattung

Führen Sie mobile und Desktop-Performance-Tests für Ihre bereitgestellte Website mit Google PageSpeed Insights durch und erhalten Sie saubere Berichte für Ihren Build-Prozess.

Was kostet meine Website?

Finden Sie heraus, wie viel es kostet, wenn jemand Ihre Website in Mobilfunknetzen auf der ganzen Welt nutzt.

Pingdom Website Speed Test

Geben Sie eine URL ein, um die Ladezeit dieser Seite zu testen, sie zu analysieren und Engpässe zu finden.

Speedcurve

SpeedCurve ermöglicht es Ihnen, Ihre eigene Leistung sowie die Leistung Ihrer Wettbewerber zu verfolgen. Mit SpeedCurve können Sie Geschwindigkeit zu einem Ihrer Wettbewerbsvorteile machen. Geschwindigkeit ist besonders wichtig für mobile Benutzer, die erwarten, dass Websites auf ihren Handys schneller laden als auf Desktops, und die Seiten, die zu langsam sind, schneller verlassen.

Calibre

Calibre verfolgt, wie lange Ihre Seiten zum Laden brauchen, wie groß oder klein Ihre Seiten werden. Janky Seite? Sie werden es sofort wissen.

GT Metrix

Ein Dienst, der Google PageSpeed und YSlow nutzt, um Ihnen bei der Entwicklung einer schnelleren, effizienteren und insgesamt verbesserten Website-Erfahrung zu helfen.

perf.js

Super einfaches Beispiel für die Ergänzung von Performance-Timings zur Anzeige der Seite während der Entwicklungsarbeit.

perf bar

Einfache Möglichkeit, Ihre Website-Performance-Metriken schnell zu sammeln und anzusehen, mit Unterstützung für Budgetierung und Hinzufügen benutzerdefinierter Metriken.

grunt-perfbudget

Grunt-Aufgabe für Performance Budgeting. grunt-perfbudget verwendet entweder eine öffentliche oder eine private Instanz von WebPagetest, um Tests auf einer angegebenen URL durchzuführen. Es vergleicht Testergebnisse mit von Ihnen festgelegten Budgets. Wenn das Budget eingehalten wird, wird die Aufgabe erfolgreich abgeschlossen. Wenn die Seite Ihre Performance-Budgets überschreitet, schlägt die Aufgabe fehl und informiert Sie darüber, warum.

Sitespeed

Sitespeed.io ist ein Open-Source-Tool, das Ihnen hilft, die Geschwindigkeit und Leistung Ihrer Website anhand von Performance-Best Practices und Timing-Metriken zu analysieren. Es sammelt Daten von mehreren Seiten Ihrer Website, analysiert sie anhand der Regeln und gibt das Ergebnis als HTML aus oder sendet die Metriken an Graphite.

speedgun

Diese Seite ermöglicht es Ihnen, Speedgun.js auf jede öffentlich zugängliche Website zu richten, um wichtige Web-Performance-Daten zu sammeln. Es läuft fünfmal und bietet eine gute Ansicht, um zu verstehen, wie eine Webseite geladen wird.

gulp size

Zeigt die Größe Ihres Projekts an.

Browser-Tools und Plugins

Chrome's Developer Tools

Zwei super nützliche Tabs in den DevTools von Chrome zur Messung der Leistung: Audits und Network.

Das Audit-Panel kann eine Seite während des Ladens analysieren. Dann gibt es Vorschläge und Optimierungen, um die Ladezeit der Seite zu verkürzen und die wahrgenommene (und tatsächliche) Reaktionsfähigkeit zu erhöhen.

Das Netzwerk-Panel bietet Einblicke in Ressourcen, die in Echtzeit über das Netzwerk angefordert und heruntergeladen werden. Das Identifizieren und Beheben von Anfragen, die länger als erwartet dauern, ist ein wesentlicher Schritt zur Optimierung Ihrer Seite.

Firefox Developer Browser

Der einzige Browser, der speziell für Entwickler entwickelt wurde, Firefox Developer Edition wurde mit Ihrem Workflow im Hinterkopf erstellt. Erstellen, testen, skalieren und mehr – alles von einem Ort aus, zum ersten Mal überhaupt.

Besuchen Sie das Network Monitor von Firefox auf MDN

Seitenleistung

Diese Erweiterung ist ein Hack, der eine schnelle Analyse der Seitenleistung in einem modernen Chrome-Browser bietet. Wenn mehrere Tabs geöffnet sind, analysiert die Erweiterung automatisch die Leistung der Seite im aktiven Tab.

Audits

PerfAudit

Wir auditieren die Lade- und Render-Leistung Ihrer Website. Wir hassen langsame und ruckelige Websites und sind bestrebt, Websites in Millisekunden zu laden und ruckelfrei zu machen.

Perfmonkey

PerfMonkey macht es sehr einfach, die Rendering-Performance Ihrer Website im Auge zu behalten.

SVGs + Bilder

ImageOptim

ImageOptim ist eine kostenlose App, die Bilder kleiner macht und schneller lädt, ohne Qualitätseinbußen. Sie optimiert Kompressionsparameter, entfernt unnötige Metadaten und überflüssige Farbprofile.

Auch als Grunt oder Gulp Plugin erhältlich.

SVGO

SVG Optimizer ist ein Node.js-basiertes Tool zur Optimierung von SVG-Vektorgrafikdateien.

Wenn Sie eine Benutzeroberfläche anstelle einer CLI zum Ausführen benötigen, können Sie die App herunterladen.

SVGOMG

SVGOMG ist das fehlende GUI von SVGO und zielt darauf ab, die meisten, wenn nicht alle Konfigurationsoptionen von SVGO zugänglich zu machen.

Manuelles Optimieren von SVGs

Wie seine Raster-Verwandten sollte SVG vor der Verwendung auf Produktionswebsites optimiert werden. Es gibt zwar mehrere großartige Tools dafür, aber wie Raymond Ihnen zeigen wird, erzielen die besten Ergebnisse ein tieferes Verständnis und ein wenig manuelle Arbeit.

Trimage

Trimage ist eine plattformübergreifende GUI und eine Kommandozeilenschnittstelle zur Optimierung von Bilddateien für Websites, die optipng, pngcrush, advpng und jpegoptim verwendet, abhängig vom Dateityp (derzeit werden PNG- und JPG-Dateien unterstützt).

CSS

CSS Triggers

Eine Website zur Ermittlung, welche CSS-Eigenschaften die Layout-, Paint- und Composite-Vorgänge eines Browsers beeinflussen.

Sie können mehr über CSS-Trigger im komplementären Erklärungsartikel lesen.

CSS Stats

Webanwendung zur Visualisierung verschiedener Statistiken über Ihr CSS.

CSS Shrink

CSS minifiziert. Weil CSS auf dem kritischen Pfad für das Rendern von Seiten liegt. Es muss klein sein! Sonst!

uncss

UnCSS ist ein Tool, das ungenutztes CSS aus Ihren Stylesheets entfernt. Es funktioniert über mehrere Dateien hinweg und unterstützt Javascript-injiziertes CSS.

Verfügbar als Grunt oder Gulp Plugin.

Critical path

Critical extrahiert & inline kritische Pfad-CSS (oberhalb des Faltbereichs) aus HTML.

Markup

HTMLMinifier

HTMLMinifier ist ein hochgradig konfigurierbarer, gut getesteter, JavaScript-basierter HTML-Minifier mit lint-ähnlichen Fähigkeiten.

gulp-htmlmin

Gulp-Plugin zum Minifizieren von HTML.

grunt-contrib-htmlmin

HTML minifizieren

JavaScript

uglifyjs

JavaScript-Parser, Mangler/Kompressor und Beautifier-Toolkit.

Auch als Gulp oder Grunt Plugin erhältlich.

jQuery Plugins, die Sie vielleicht nicht benötigen

jQuery und seine Cousins sind großartig, und benutzen Sie sie auf jeden Fall, wenn die Entwicklung Ihrer Anwendung dadurch erleichtert wird.

Wenn Sie hingegen eine Bibliothek entwickeln, nehmen Sie sich bitte einen Moment Zeit, um zu überlegen, ob Sie jQuery tatsächlich als Abhängigkeit benötigen. Vielleicht können Sie ein paar Zeilen Utility-Code einfügen und auf die Anforderung verzichten. Wenn Sie nur neuere Browser anvisieren, benötigen Sie möglicherweise nichts weiter als das, was der Browser mitliefert.

---

Weitere Informationen zur Leistung

• Usertiming API
• Jank Frei
• Scrolling Leistung
• Mobile Web Performance Auditing
• Verschwunden in 60 Bildern pro Sekunde
• Udacity Kurs über Rendering Leistung