fucking awesome wpo
1.0.0
Willkommen in der kuratierten Liste der Ressourcen für Webleistungoptimierungsoptimierungsressourcen. Dieses Repository zielt darauf ab, die besten Tools, Artikel, Blogs, Bücher und Gespräche zur Optimierung der Website -Leistung zu sammeln. Egal, ob Sie Entwickler, Designer oder Performance -Enthusiast sind, Sie finden hier wertvolle Inhalte, um Ihre Webprojekte zu bewahren.
Tolle WPO / Artikel
? Tolle WPO / Blogs
Tolle WPO / Bücher
Tolle wpo / docs
? Tolle WPO / Events
? Tolle WPO / Gespräche
Hier finden Sie einen kurzen Überblick über die in dieser Sammlung behandelten Kategorien:
Gehen Sie zu Artikeln.md.
Gehen Sie zu Blogs.
Beste Bücher über WPO
Weil die Gemeinschaft wichtig ist!
Sie werden in Inhalt/Meetups.md eingeteilt.
Sie werden in Inhalt/Gespräche eingeteilt.
872 100? Gestehen) - verwendet Phantomjs, um Webseiten kopflos zu analysieren und Manifests zu generieren.28533 9406? Lighthouse) - Tool für Prüf- und Leistungsmetriken für progressive Webanwendungen.2205 382? YSLOW) - YSLOW analysiert Webseiten und schlägt Möglichkeiten vor, ihre Leistung auf der Grundlage einer Reihe von Regeln für leistungsstarke Webseiten zu verbessern.35 3? Grunzen -Webpagetest) - Grunzen -Plugin zur kontinuierlichen Messung von WebPagetest. (Demo)91 15? GrunT -yslow) - Grunzenaufgabe zum Testen der Seitenleistung mithilfe von Phantomjs, einem kopflosen Webkit -Browser.856 37? GrunT -Perfbudget) - Eine Grunn.js -Aufgabe zur Durchsetzung eines Leistungsbudgets? Mehr zu Leistungsbudgets).2641 200? Web Tracing Framework) - Web Tracing Framework ist eine Reihe von Bibliotheken, Tools und Visualisierern für die Verfolgung und Untersuchung komplexer Webanwendungen2469 280? Yandex.tank) - Ein erweiterbares Open -Source -Last -Test -Tool für erweiterte Linux -Benutzer, das als Teil einer automatisierten Lasttestsuite besonders gut ist.1865 23? Speed Racer) - Erfassen Sie Leistungsmetriken für Ihre Bibliothek/Anwendung mit Chrome Headless.9 6? Node -yslowjs) - yslow.js auf node.js ist ein einfacher node.js -Wrapper zum programmgesteuerslichen Ausführen von Phantomjs yslow.js.3105 126? PSI) - PageSpeed -Erkenntnisse für node.js - mit der Berichterstattung.4474 180? Bundleze) - Halten Sie Ihre Bündelgröße in Schach.3846 101? Source-MAP-Explorer)-Analyse und Debugg-Bündel-Raumnutzung durch Quellkarten.12605 489? Webpack -Bundle -Analysator) - Webpack -Plugin- und CLI -Dienstprogramm, das Bündelinhalt als bequemes interaktives zoomable Treemap darstellt.4 1? Lasso -Analyzer) - Analysieren und visualisieren Sie Projektbündel von Lasso.1413 108? Komprimierungs -Webpack -Plugin) - Bereiten Sie komprimierte Versionen von Assets vor, um sie mit Inhaltskodierung zu bedienen.583 20? Bundlestats) - Bündelbericht erstellen (Bündelgröße, Vermögenswerte, Module, Pakete) und vergleichen Sie die Ergebnisse zwischen verschiedenen Builds 573 21? CSS -perf) - völlig unwissenschaftliche Art, CSS -Leistung zu testen. Die meisten dieser Tests drehen sich um Methoden und Techniken zur Bestimmung der effektiven CSS -Architektur. Anders ausgedrückt, ich möchte wissen, was angesichts eines bestimmten Vergleichs von CSS -Strategien am besten funktioniert. Eine Reihe von Tools zum Erstellen von Testfällen und zum Vergleich verschiedener Implementierungen in JavaScript.
Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537166 15? JSLITMUS) - JSlitmus ist ein leichtes Tool zum Erstellen von Ad -hoc -JavaScript -Benchmark -Tests.563 37? Matcha) - Mit Matcha können Sie Experimente entwerfen, die die Leistung Ihres Codes messen. Es wird empfohlen, dass sich jede Bank auf einen bestimmten Auswirkungenpunkt in Ihrer Anwendung konzentriert.1496 113? Timing.js) - Timing.js ist eine kleine Reihe von Helfern für die Zusammenarbeit mit der Navigations -Timing -API, um festzustellen, wo Ihre Bewerbung ihre Zeit verbringt. Nützlich als eigenständiges Skript, Devtools Snippet oder Lesezeichen.8780 1201? STATS.JS) - Diese Klasse bietet ein einfaches Info -Feld, mit dem Sie Ihre Codeleistung überwachen können.1 0? Perftests) - Leistungstests von JavaScript -Vererbungsmodellen.2094 105? Memory -Stats.js) - Minimaler Monitor für die JS -Haufengröße über den Leistungsspeicher. 53 4? Phpench) - Phpench erstellt eine grafische Ausgabe für einen PHP -Benchmark. Zeichnen Sie die Laufzeit jeder Funktion in Echtzeit mit Gnuplot und erstellen Sie ein Bild aus dem Ergebnis.13 1? PHP -Bench) - Benchmark- und Profil -PHP -Codeblöcke bei der Messung des Leistungsfußabdrucks. 3790 126? PerfMap) - Ein Lesezeichen zum Erstellen einer Frontend -Performance -Heatmap von Ressourcen, die mit der Ressourcen -Timing -API im Browser geladen sind.559 52? DOM Monster)-Ein plattformübergreifendes Cross-Browser-Lesezeichen, mit dem die DOM & anderen Funktionen der Seite, auf der Sie sich befinden, analysiert und Ihnen seinen Gesundheitszustand geben.1143 86? Performance -Bookmarklet) - Analysieren Sie die aktuelle Seite über die Ressourcen -Timing -API, die Navigations -Timing -API und die Art von User Timing - Art von Light Live -WebPagetest. Als ? Chromverlängerung und? Firefox-Add-On unter dem Namen Performance-Analyseur. Ein Content Delivery Network oder Content Distribution Network (CDN) ist ein großes verteiltes System von Servern, die in mehreren Rechenzentren im Internet bereitgestellt werden. Das Ziel eines CDN ist es, Inhalte für Endbenutzer mit hoher Verfügbarkeit und hoher Leistung zu bedienen. Siehe eine große Liste von CDN in Wikipedia.
5705 2060? JSDELIVR) - Ähnlich wie bei Google gehostete Bibliotheken ist JSDelivr ein Open -Source -CDN, mit dem Entwickler ihre eigenen Projekte hosten können, und jeder, der auf unsere gehosteten Dateien auf ihren Websites verlinkt wird.Um nützliche Informationen zu finden, die Sie für die richtige Wahl zwischen kostenpflichtigen CDNs treffen können, besuchen Sie bitte CDNPlanet.
82 6? Gulp-Google-CDN)-Ersetzt Skriptreferenzen durch Google CDN. 131 7? Browserkalorien) - Der einfachste Weg, Ihr Leistungsbudget zu messen. 35 2? ATBUILD) - JavaScript -Code -Erzeugungs -Tool, mit dem Sie JavaScript schreiben können, das JavaScript ausgibt. Gut, um Schleifen abzuwickeln und Bibliotheken zu schreiben, die die Laufzeit abbauen2550 169? Kleber) - Kleber ist ein einfaches Befehlszeilen -Werkzeug, um Sprites zu generieren:19 3? Pitomba -Sprüster) - Spriter ist ein einfacher und flexibler dynamischer Sprite -Generator für CSS unter Verwendung von Python. Es kann CSS sowohl synchron als auch asynchron verarbeiten, da es Klassen in Ihrem Python -Code sowie einen Beobachter bietet, der Ihr Dateisystem hört und CSS und Sprite ändert, sobald eine Statik geändert wird.1133 92? Grunzen -Sprühschaft) - Grunzaufgabe zum Konvertieren eines Bildersatzes in ein Sprite -Blatt und entsprechende CSS -Variablen.15 1? GULP -FRITE) - GULP -Aufgabe zum Erstellen eines Bildsprites und der entsprechenden Stilblätter für Schlupf.334 45? GULP-SVG-FRITE)-GULP-Aufgabe zum Erstellen von SVG-Sprites.2 1? SVGTOCSS) - Optimiert und rendert SVG -Dateien in CSS / Sass Sprites.36 6? AssetGraph-Sprite)-AssetGraph-Transformation für automatische generierende Sprites basierend auf dem CSS-Abhängigkeitsdiagramm.481 72? RRITY) - Ein modularer Bild Sprite -Generator mit vielen Funktionen: Unterstützt Retina Sprites, unterstützt verschiedene Ausgangsformate, erzeugt Sprites und richtige Style -Dateien aus einem Bilderverzeichnis usw.621 76? Sprite Factory) - Die Sprite -Fabrik ist eine Ruby -Bibliothek, mit der CSS -Sprites erzeugt werden kann. Es kombiniert einzelne Bilddateien aus einem Verzeichnis in ein einzelnes einheitliches Sprite -Bild und erstellt ein geeignetes CSS -Stilblatt für die Verwendung in Ihrer Webanwendung. So entfernen Sie all diese unnötigen Daten und geben Ihnen eine Datei ohne Abbau der Qualität.
83 18? Grunzen -Seudit) - Grunz -Plugin zum Entfernen unnötiger Bytes von PNG und JPG mit Yahoo Smushit.33 2? Gulp -Seudit) - Gulp -Plugin, um PNG und JPG mit Yahoo Smushit zu optimieren. Über Smosh gemacht.5594 257? Imagemin) - Bilder nahtlos mit node.js.29505 1302? Sharp)-Das typische Anwendungsfall für dieses Hochgeschwindigkeitsknoten.JS-Modul besteht darin, große Bilder vieler Formate in kleinere, webfreundliche JPEG-, PNG- und Webp-Bilder mit unterschiedlichen Dimensionen umzuwandeln.6966 616? GM) - GraphicsMagick und Imagemagick für Node.js.12734 1178? EXEXIF) - Pure Elixir Library zum Extrahieren von TIFF- und EXIF -Metadaten aus JPEG -Dateien.1215 175? Grunzen-Contrib-Imagemin)-PNG- und JPEG-Bilder für Grunzen minifieren.1905 156? Gulp -Imagemin) - PNG-, JPEG-, GIF- und SVG -Bilder mit Imagemin für Schlupf.118 16? Grunzen -Webp) - Konvertieren Sie Ihre Bilder in das Webp -Format.220 18? GULP -WEBP) - Bilder in WebP für Gulp konvertieren.479 18? Grunzen -ImageOptim) - Machen Sie ImageOptim, ImagealPha und JPegmini einen Teil Ihres automatisierten Build -Prozesses.3461 127? ImageOptim -cli) - Automatisiert ImageOptim, ImagealPha und JPegmini für Mac, um die Batch -Optimierung der Bilder zu einem Teil Ihres automatisierten Build -Prozesses zu machen.21 3? TAPNESH -CLI) - TAPNESH ist ein CLI -Tool, mit dem alle Ihre Bilder parallel einfach und effizient optimiert werden!5495 417? Mozjpeg) - Verbesserter JPEG -Encoder.1608 120? Jpegoptim) - Dienstprogramm zur Optimierung/Komprimierung von JPEG -Dateien.3447 329? ZOPFLIPNG) - Ein Befehlszeilenprogramm zur Optimierung von PNG -Bildern.835 75? Leanify) - Leichter verlustfreier Dateiminifikator/Optimierer.944 24? Optimizt) - CLI -Bildoptimierungstool. Es kann PNG-, JPEG-, GIF- und SVG -Verlust und Verlustlos komprimieren und Webp -Versionen für Rasterbilder erstellen. 938 158? Lazyload) - LAYLOAD -Bilder, Iframes, Widgets mit einem eigenständigen JavaScript Lazyloader ~ 1KB7466 448? lozad.js) - hochdarstellerhaft, leichte ~ 0,9 KB und konfigurierbarer fauler Loader in reinem JS ohne Abhängigkeiten für reaktionsschnelle Bilder, Iframes und mehr 4156 348? Headjs)- Das einzige Skript in deinem Kopf. Für reaktionsschnelle Design, Funktionserkennung und Ressourcenbelastung.69 9? Defer.js) - Async alles: Machen Sie das Fleisch Ihrer Seiten schneller mit diesem JS -Morsel.5512 246? InstantClick) - InstantClick erstellt die folgenden Links in Ihrer Website sofort.509 32? JIT) - Ein JIT -Plugin -Lader für Grunzen (gerade rechtzeitig). Die Ladezeit von Grunzen verlangsamt sich nicht, selbst wenn es viele Plugins gibt. 2257 142? Phantome) - Phantomjs -basierte Webleistungskollektor und Überwachungstool.25 4? Bank) - Verwendung von Phantomen (ein von Phantomjs unterstützter Client -Leistungsmetriken). Benchmark eine Seite, speichern Sie die Ergebnisse in MongoDB und zeigt die Ergebnisse über den integrierten Server an.104 15? KeepFast) - Tool zur Überwachung von Indikatoren, die sich auf die Leistung einer Webseite beziehen.284 25? Grunzphantome) - Phantome für das Grunz -Plugin, um die Frontend -Leistung zu messen.0 0? Demo)).1641 173? WebPagetest -API -Wrapper für node.js) - WebPagetest -API -Wrapper ist ein NPM -Paket, das die WebPagetest -API für node.js als Modul und Befehlszeilen -Tool einhüllt. 542 73? Django-htmlmin)-django-html in einem HTML-Minifier für Python mit voller Unterstützung für HTML 5. Es unterstützt Django, Flask und jedes andere Python-Web-Framework. Es bietet auch ein Befehlszeilen-Tool, das für statische Websites oder Bereitstellungsskripte verwendet werden kann.4962 576? Htmlminifier)-htmlminifier ist ein hochkonfigurierbarer, gut getesteter HTML-Minifikator mit JavaScript-basiertem HTML-Minifikator mit fusselähnlichen Funktionen.424 68? Grunzen-contrib-htmlmin)-Ein Grunz-Plugin zum Minimieren von HTML, das HTMLMinifier verwendet.726 57? Gulp -htmlmin) - Ein Gulp -Plugin zum Minimieren von HTML, das HTMLminifier verwendet.35 6? GrunT -HTMLCompressor) - Grunzen -Plugin für die HTML -Komprimierung unter Verwendung von HTMLCompressor.12 7? Html_minifier) - Ruby -Wrapper für Kangax HTML -Minifier.35 7? HTML_Press) - Ruby Gem zum Komprimieren von HTML, das alle Whitespace -Junk entfernt und nur HTML verlässt.31 6? KOA HTML -Minifier) - Middleware, die Ihre HTML -Antworten mithilfe von HTML -Minifikator mindert. Es verwendet die Standardoptionen von HTML-Minifier, die standardmäßig alle ausgeschaltet sind. Sie müssen also die Optionen festlegen, sonst wird es sonst nichts bewirken.162 18? Minimize)-Minimize ist ein HTML-Minifikator, der auf dem Node-HTMLParser basiert. Derzeit ist HTML-Minifikator nur die server-Seite. Die kundenseitige Minifikation wird in einer zukünftigen Veröffentlichung hinzugefügt.133 86? HTML-Minifier)-Ein einfaches Windows-Befehlszeilen-Tool zum Minimieren Ihrer HTML, Rasierer- und Webformulare-Ansichten 3016 665? Yui -Kompressor) - JavaScript -Kompressor, der zusätzlich zum Entfernen von Kommentaren und weißen Spaces lokale Variablen mit dem kleinstmöglichen variablen Namen verschleiert. Diese Verschleierung ist sicher, selbst wenn Konstrukte wie "eval" oder "mit" verwendet werden (obwohl die Komprimierung nicht optimal ist) im Vergleich zu JSmin sind die durchschnittlichen Einsparungen bei etwa 20%.13204 1246? UGLIFYJS2) - Uglifyjs ist ein JavaScript -Parser, Minifier, Kompressor oder Verschönerungs -Toolkit, geschrieben in JavaScript.3768 186? CSSO) - CSS -Minimierer im Gegensatz zu anderen. Zusätzlich zu den üblichen Minifikationstechniken kann es die strukturelle Optimierung von CSS -Dateien durchführen, was zu einer geringeren Dateigröße im Vergleich zu anderen Minifikern führt.76 36? Cssmin.js) - cssmin.js ist ein JavaScript -Port des CSS -Minifikators von Yuicompressor.812 170? Grunzen-Contrib-concat)-Ein Grunz-Plugin zur Verkettung von Dateien.1481 348? Grunzkontrib-UKLIFY)-Ein Grunz-Plugin zur Verkettung und Minimierung von JavaScript-Dateien.4178 323? Clean-CSS)-Ein schneller, effizienter und gut getesteter CSS-Minifikator für Node.js.2811 601? Django -Compressor) - Komprimiert mit verknüpften und inline -JavaScript oder CSS in eine einzelne zwischengespeicherte Datei.1520 371? Django-Pipeline)-Pipeline ist eine Asset-Verpackungsbibliothek für Django, die sowohl CSS- als auch JavaScript-Verkettung und -Komprimierung, integrierte JavaScript-Vorlagenunterstützung sowie optionales Data-URI-Bild und Schriftbettierung bereitstellt.750 150? JShrink) - JShrink ist eine PHP -Klasse, die JavaScript so mindert, dass sie schneller an den Kunden geliefert werden kann.1052 81? CSSSHRINK) - Weil CSS den kritischen Weg zum Rendern von Seiten ist. Es muss klein sein! Oder aber!28 4? GrunT -CSSSHRINK) - Dies ist nur eine Grunzverpackung für CSS -Schrumpfungen.22 0? Gulp -CSSSHRINK) - Verkleinert CSS -Dateien mithilfe von CSSSHRINK für Gulp.6 1? Prettyugly) - Uglify (Streifenräume) oder Prettify (konsistente Leerzeichen hinzufügen) CSS -Code.795 138? Grunz-contrib-cssmin)-CSS-Minifikator für Grunzen.3825 174? Grunzen -Ocns) - Eine Grunzenaufgabe, um nicht verwendete CSS aus Ihren Projekten zu entfernen.938 40? GULP -OCNSS) - Eine Schlupfaufgabe zum Entfernen ungenutzter CSS aus Ihren Projekten. 1620 64? UCSS) - UCSS wird für Krabbeln (große) Standorte hergestellt, um nicht verwendete CSS -Selektoren zu finden, aber nicht ungenutzte CSS entfernen.343 21? Httpinvoke)-Eine HTTP-Client-Bibliothek ohne Abhängigkeit für Browser und Node.js mit einem Versprechenbasierten oder Node.JS-Rückruf-basierten API zum Fortschreiten von Ereignissen, Text- und Binärdateien-Hochladen und -download, teilweise Antwortkörper, Anforderungs- und Antwort-Header, Statuscode.10052 372? Kritisch) - extrahieren und inlinekritischer CS -CSS auf HTML -Seiten (ALPHA).12 1? CSSColorM) - Dienstprogramm, das CSS -Farben, Beispiel: min ("weiß"); // minifiert "#fff".17585 1731? Lazysize) - Hochleistungslöscher Lader für Bilder (reaktionsschnell und normal), iframes und Skripte, die alle Sichtbarkeitsänderungen erkannt, die durch Benutzerinteraktion, CSS oder JavaScript ohne Konfiguration ausgelöst werden.1631 45? TMI) - TMI (zu viele Bilder) - Entdecken Sie Ihr Bildgewicht im Web. 21150 1390? SVGO) - SVGO ist ein nodenjs -basiertes Tool zur Optimierung von SVG -Vektorgrafikdateien.433 40? Grunzen -svgmin) - SVG mit SVGO für Grunzen minifieren.1634 93? SVG Cleaner) - SVG Cleaner kann Ihnen helfen, Ihre SVG -Dateien von unnötigen Daten zu beseitigen. Es verfügt über viele Optionen für die Reinigung und Optimierung, funktioniert im Stapelmodus und bietet eine Verarbeitung von Multicore -Prozessoren mit Gewinde. 431 201? Polymer Bundler)-Polymer-Bundler ist eine Bibliothek für Verpackungsprojektvermögen für die Produktion, um die Netzwerkrounds zu minimieren.100 25? Gulp -Vulcanize) - Verkettieren Sie eine Reihe von Webkomponenten in eine Datei, die Vulcanize verwenden. 992 156? HTTPERF) - HTTPERF ist ein Tool zur Messung der Webserverleistung. Es bietet eine flexible Funktion zum Generieren verschiedener HTTP -Workloads und zur Messung der Serverleistung.179 23? Autoperf) - autoperf ist ein ruby treiber für httperf, mit dem Sie die Last- und Leistungstests einer Webanwendung für einen einzigen Endpunkt oder durch Protokoll -Wiederholung automatisieren können.13 4? Httperf.rb) - Einfache Ruby -Schnittstelle für httperf, geschrieben in Ruby.5 0? PHP -HTTPERF) - PHP -Port von httperf.rb.25 2? Httperf.js) - js Port von httperf.rb.11 8? Httperf.py) - Python -Port von httperf.rb.4 0? Gohttperf) - go port of httperf.rb.38207 2955? WRK) - Ein HTTP -Benchmarking -Tool (mit optionalem LuA -Skript für Anforderungsgenerierung, Antwortverarbeitung und benutzerdefinierte Berichterstattung)6455 631? BienenwithmachineGuns) - Ein Dienstprogramm zur Bewaffnung (Erstellen) von vielen Bienen (Mikro -EC2 -Instanzen), um (Lasttests) (Webanwendungen) anzugreifen.244 22? Webp -detekte) - webp mit Akzeptieren von Verhandlungen.will-change CSS property which allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they're needed. This way, when the actual change happens, the page updates in a snappy manner.958 25? iamakulov/awesome-webpack-perf) - A curated list of webpack tools for web performance32197 3561? bayandin/awesome-awesomeness).338979 28117? sindresorhus/awesome).823 61? imteekay/web-performance-research) - Research in Web PerformanceFor contributing, open an issue and/or a pull request.
8403 563? davidsonfellipe/awesome-wpo)
