991 lines
50 KiB
HTML
991 lines
50 KiB
HTML
<h1 id="awesome-wpo-awesome">Awesome WPO <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://github.com/davidsonfellipe/awesome-wpo/graphs/contributors"><img
|
||
src="https://img.shields.io/github/contributors/davidsonfellipe/awesome-wpo.svg"
|
||
alt="GitHub contributors" /></a> <a
|
||
href="https://davidsonfellipe.mit-license.org/"><img
|
||
src="https://img.shields.io/github/license/mashape/apistatus.svg?style=flat"
|
||
alt="MIT license" /></a></p>
|
||
<p>Welcome to the curated list of Web Performance Optimization
|
||
resources. This repository aims to gather the best tools, articles,
|
||
blogs, books, and talks related to optimizing website performance.
|
||
Whether you’re a developer, designer, or performance enthusiast, you’ll
|
||
find valuable content here to supercharge your web projects.</p>
|
||
<h2 id="categories">Categories</h2>
|
||
<p>:memo: <a href="#articles">Awesome WPO / Articles</a></p>
|
||
<p>:newspaper: <a href="#blogs">Awesome WPO / Blogs</a></p>
|
||
<p>:books: <a href="#books">Awesome WPO / Books</a></p>
|
||
<p>:book: <a href="#documentation">Awesome WPO / Docs</a></p>
|
||
<p>:calendar: <a href="#events">Awesome WPO / Events</a></p>
|
||
<p>:movie_camera: <a href="#talks">Awesome WPO / Talks</a></p>
|
||
<h2 id="table-of-contents">Table of Contents</h2>
|
||
<p>Here’s a quick overview of the categories covered in this
|
||
collection:</p>
|
||
<ul>
|
||
<li><a href="#analyzers">Analyzers</a></li>
|
||
<li><a href="#analyzers---api">Analyzers API</a></li>
|
||
<li><a href="#application-performance-monitoring">Application
|
||
Performance Monitoring</a></li>
|
||
<li><a href="#bundle-analyzer">Bundle Analyzer</a></li>
|
||
<li><a href="#benchmark---css">Benchmark - CSS</a></li>
|
||
<li><a href="#benchmark---javascript">Benchmark - JS</a></li>
|
||
<li><a href="#benchmark---php">Benchmark - PHP</a></li>
|
||
<li><a href="#bookmarklets">Bookmarklets</a></li>
|
||
<li><a href="#cdn">CDN</a></li>
|
||
<li><a href="#cdn---monitor">CDN - Monitor</a></li>
|
||
<li><a href="#cdn---utilities">CDN - Utilities</a></li>
|
||
<li><a href="#extensions">Extensions</a></li>
|
||
<li><a href="#image-optimizers">Image Optimizers</a></li>
|
||
<li><a href="#generators">Generators</a></li>
|
||
<li><a href="#lazyloaders">Lazyloaders</a></li>
|
||
<li><a href="#loaders">Loaders</a></li>
|
||
<li><a href="#metrics-monitor">Metrics Monitor</a></li>
|
||
<li><a href="#minifiers---html">Minifiers HTML</a></li>
|
||
<li><a href="#minifiers---js--css">Minifiers JS & CSS</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
<li><a href="#svg">SVG</a></li>
|
||
<li><a href="#web-components">Web Components</a></li>
|
||
<li><a href="#web-server-benchmarks">Web server Benchmarks</a></li>
|
||
<li><a href="#web-server-modules">Web server Modules</a></li>
|
||
<li><a href="#specs">Specs</a></li>
|
||
<li><a href="#stats">Stats</a></li>
|
||
<li><a href="#other-awesome-lists">Other Awesome Lists</a></li>
|
||
<li><a href="#contributing">Contributing</a></li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<blockquote>
|
||
<p>Go to <a href="content/ARTICLES.md">ARTICLES.md</a>.</p>
|
||
</blockquote>
|
||
<h2 id="blogs">Blogs</h2>
|
||
<blockquote>
|
||
<p>Go to <a href="content/BLOGS.md">BLOGS</a>.</p>
|
||
</blockquote>
|
||
<h2 id="books">Books</h2>
|
||
<blockquote>
|
||
<p>Best books about WPO</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="https://www.manning.com/books/http2-in-action">HTTP/2 in
|
||
Action by Barry Pollard</a> - Barry Pollard</li>
|
||
<li><a
|
||
href="https://www.manning.com/books/web-performance-in-action">Web
|
||
Performance in Action by Jeremy Wagner</a> - Jeremy L. Wagner</li>
|
||
<li><a href="https://www.bookofspeed.com/">Book of Speed</a> - Stoyan
|
||
Stefanov</li>
|
||
<li><a href="http://designingforperformance.com/">Designing for
|
||
Performance: Weighing Aesthetics and Speed</a> - Lara Callender
|
||
Hogan</li>
|
||
<li><a href="http://shop.oreilly.com/product/9780596522315.do">Even
|
||
Faster Web Sites: Performance Best Practices for Web Developers</a> -
|
||
Steve Souders</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920028048.do">High
|
||
Performance Browser Networking: What every web developer should know
|
||
about networking and web performance</a> - Ilya Grigorik</li>
|
||
<li><a href="http://shop.oreilly.com/product/9780596802806.do">High
|
||
Performance JavaScript</a> - Nicholas C. Zakas</li>
|
||
<li><a
|
||
href="http://books.google.de/books/about/High_Performance_Web_Sites.html?id=jRVlgNDOr60C&redir_esc=y">High
|
||
Performance Web Sites: Essential Knowledge for frontend Engineers</a> -
|
||
Steve Souders</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920033103.do">High
|
||
Performance Responsive Design: Building Faster Sites Across Devices</a>
|
||
– Tom Barker</li>
|
||
<li><a href="https://www.sitepoint.com/premium/books/lean-websites">Lean
|
||
sites</a> – Barbara Bermes</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920041450.do">Time Is
|
||
Money: The Business Value of Web Performance</a> – Tammy Everts</li>
|
||
<li><a href="http://shop.oreilly.com/product/0636920033592.do">Using
|
||
WebPagetest</a> - Rick Viscomi, Andy Davies, Marcel Duran</li>
|
||
<li><a
|
||
href="http://www.oreilly.com/webops-perf/free/webpage-size-speed-perf.csp">Web
|
||
Page Size, Speed, and Performance</a> - Terrence Dorsey</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Web-Performance-Daybook-Stoyan-Stefanov-ebook/dp/B008CQA8BA/">Web
|
||
Performance Daybook Volume 2</a> - Stoyan Stefanov</li>
|
||
<li><a href="http://shop.oreilly.com/product/9780596001728.do">Web
|
||
Performance Tuning</a> - Patrick Killelea</li>
|
||
<li><a
|
||
href="https://www.oreilly.com/library/view/you-dont-know/9781491905197/">You
|
||
Don’t Know JS: Async & Performance</a> - Kyle Simpson</li>
|
||
<li><a
|
||
href="https://play.google.com/store/books/details/Colin_McKinnon_Linux_Apache_MySQL_PHP_Performance?id=Z3ciBgAAQBAJ">Linux,
|
||
Apache, MySQL, PHP Performance end-to-end</a> - Colin McKinnon</li>
|
||
<li><a href="https://www.manning.com/books/web-components-in-action">Web
|
||
Components in Action</a> - Ben Farrell</li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/printed-books/image-optimization/">Image
|
||
Optimization</a> - Addy Osmani</li>
|
||
</ul>
|
||
<h2 id="case-studies">Case studies</h2>
|
||
<ul>
|
||
<li><a href="https://wpostats.com/">WPOStats</a> - Case studies and
|
||
experiments demonstrating the impact of web performance optimization
|
||
(WPO) on user experience and business metrics.</li>
|
||
<li><a href="https://developers.google.com/web/showcase">Google
|
||
Developers Case Studies</a> - Learn why and how other developers have
|
||
used the web to create amazing web experiences for their users.</li>
|
||
</ul>
|
||
<h2 id="documentation">Documentation</h2>
|
||
<ul>
|
||
<li><a href="https://browserdiet.com/en/">Browser Diet</a> - A
|
||
collaborative guide about frontend performance.</li>
|
||
<li><a
|
||
href="https://developers.google.com/speed/docs/insights/rules">PageSpeed
|
||
Insights Rules</a> - A guide created by PageSpeed Team. Deprecated. This
|
||
is deprecated and will be shut down in May 2019. Version 5 is the latest
|
||
and provides both real-world data from the Chrome User Experience Report
|
||
and lab data from Lighthouse.</li>
|
||
<li><a href="https://developer.yahoo.com/performance/rules.html">Best
|
||
Practices for Speeding Up Your site</a> - The list includes 35 best
|
||
practices divided into 7 categories, created by Yahoo! Exceptional
|
||
Performance team.</li>
|
||
</ul>
|
||
<h2 id="events">Events</h2>
|
||
<blockquote>
|
||
<p>Because community matters!</p>
|
||
</blockquote>
|
||
<h3 id="conferences">Conferences</h3>
|
||
<ul>
|
||
<li><a href="https://www.welovespeed.com/">We Love Speed</a> – We Love
|
||
Speed was born from the desire to share knowledge and experiences in web
|
||
performance as widely as possible.</li>
|
||
<li><a href="https://pwasummit.org/">PWA Summit</a> – A free, online,
|
||
single-track conference focused on helping everyone succeed with
|
||
Progressive Web Apps.</li>
|
||
<li><a href="http://conferences.oreilly.com/velocity">Velocity</a> – At
|
||
Velocity, web operations, performance, and DevOps professionals learn to
|
||
build fast, resilient, and highly available sites and apps.</li>
|
||
<li><a href="https://perfnow.nl/">performance.now()</a> – The
|
||
performance.now() conference will return to Amsterdam! We’re a
|
||
single-track conference with fourteen world-class speakers, covering
|
||
today’s most important web performance insights.</li>
|
||
<li><a href="https://perfmattersconf.com/">#PerfMatters</a> –
|
||
#PerfMatters Conference is the ONLINE web performance conference by
|
||
internationally renowned performance developers.</li>
|
||
</ul>
|
||
<h3 id="meetups">Meetups</h3>
|
||
<blockquote>
|
||
<p>They are categorized into <a
|
||
href="content/MEETUPS.md">content/MEETUPS.md</a>.</p>
|
||
</blockquote>
|
||
<h2 id="talks">Talks</h2>
|
||
<blockquote>
|
||
<p>They are categorized into <a
|
||
href="content/TALKS.md">content/TALKS.md</a>.</p>
|
||
</blockquote>
|
||
<h1 id="tools">Tools</h1>
|
||
<h2 id="analyzers">Analyzers</h2>
|
||
<ul>
|
||
<li><a href="https://web.dev/">Web.dev</a> - Get the web’s modern
|
||
capabilities on your own sites and apps with useful guidance and
|
||
analysis from web.dev.</li>
|
||
<li><a href="https://github.com/jamesgpearce/confess">Confess</a> - Uses
|
||
PhantomJS to headlessly analyze web pages and generate manifests.</li>
|
||
<li><a href="https://www.debugbear.com/">DebugBear</a> - DebugBear is a
|
||
site monitoring tool based on Lighthouse. See how your scores and
|
||
metrics changed over time, with a focus on understanding what caused
|
||
each change. DebugBear is a paid product with a free 30-day trial.</li>
|
||
<li><a href="https://developers.google.com/speed/pagespeed/">Page
|
||
Speed</a> - The PageSpeed family of tools is designed to help you
|
||
optimize the performance of your site. PageSpeed Insights products will
|
||
help you identify performance best practices that can be applied to your
|
||
site, and PageSpeed optimization tools can help you automate the
|
||
process.</li>
|
||
<li><a href="https://github.com/GoogleChrome/lighthouse">Lighthouse</a>
|
||
- Auditing and performance metrics tool for Progressive Web
|
||
Applications.</li>
|
||
<li><a href="https://screpy.com">Screpy</a> - AI-Based SEO Analysis
|
||
& Monitoring Tool</li>
|
||
<li><a href="https://github.com/marcelduran/yslow">YSlow</a> - YSlow
|
||
analyzes web pages and suggests ways to improve their performance based
|
||
on a set of rules for high-performance web pages.</li>
|
||
<li><a href="http://yslow.org/phantomjs/">YSlow for PhantomJS</a> -
|
||
YSlow for PhantomJS also introduces new output formats for automated
|
||
test frameworks: TAP (Test Anything Protocol) and JUnit.</li>
|
||
<li><a
|
||
href="https://github.com/sideroad/grunt-wpt">Grunt-WebPageTest</a> -
|
||
Grunt plugin for continuous measurement of WebPageTest. (<a
|
||
href="http://sideroad.github.io/sample-wpt-page/">Demo</a>)</li>
|
||
<li><a href="https://github.com/andyshora/grunt-yslow">Grunt-yslow</a> -
|
||
Grunt task for testing page performance using PhantomJS, a headless
|
||
WebKit browser.</li>
|
||
<li><a
|
||
href="https://github.com/tkadlec/grunt-perfbudget">Grunt-perfbudget</a>
|
||
- A Grunt.js task for enforcing a performance budget (<a
|
||
href="https://timkadlec.com/2013/01/setting-a-performance-budget/">more
|
||
on performance budgets</a>).</li>
|
||
<li><a href="https://github.com/google/tracing-framework">Web Tracing
|
||
Framework</a> - Web Tracing Framework is a set of libraries, tools, and
|
||
visualizers for the tracing and investigation of complex web
|
||
applications</li>
|
||
<li><a href="https://github.com/yandex/yandex-tank">Yandex.Tank</a> - An
|
||
extensible open-source load testing tool for advanced Linux users which
|
||
is especially good as a part of an automated load testing suite.</li>
|
||
<li><a href="http://yellowlab.tools">Yellow Lab Tools</a> - Online quick
|
||
and easy tool that audits frontend bad practices, reveals performance
|
||
issues, and profiles JavaScript.</li>
|
||
<li><a href="http://pagelocity.com/">Pagelocity</a> - A web performance
|
||
optimization and analysis tool.</li>
|
||
<li><a href="https://varvy.com/pagespeed/">Varvy</a> - Test your site to
|
||
see if it follows the Google guidelines for speed.</li>
|
||
<li><a href="http://www.webbloatscore.com/">Web Bloat Score
|
||
Calculator</a> - Compare size of a page to a compressed image of the
|
||
same page</li>
|
||
<li><a href="https://github.com/ngryman/speedracer">Speed Racer</a> -
|
||
Collect performance metrics for your library/application using Chrome
|
||
headless.</li>
|
||
<li><a href="https://speedrank.app/">Speedrank</a> - Speedrank monitors
|
||
the performance of your site in the background. It displays Lighthouse
|
||
reports over time and delivers recommendations for improvement.
|
||
Speedrank is a paid product with 14-day-trial.</li>
|
||
<li><a href="https://lightest.app/">Lightest App</a> - Webpage load time
|
||
is extremely important for conversion and revenue. Visualize web
|
||
performance against competitors.</li>
|
||
</ul>
|
||
<h2 id="analyzers---api">Analyzers - API</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/jmervine/node-yslowjs">Node-yslowjs</a>
|
||
- YSlow.js on Node.js is a simple Node.js wrapper for programmatically
|
||
running phantomjs yslow.js.</li>
|
||
<li><a href="https://github.com/addyosmani/psi">PSI</a> - PageSpeed
|
||
Insights for Node.js - with reporting.</li>
|
||
</ul>
|
||
<h1 id="application-performance-monitoring">Application Performance
|
||
Monitoring</h1>
|
||
<ul>
|
||
<li><a href="https://www.datadoghq.com/product/apm/">Datadog APM</a> -
|
||
End-to-end distributed tracing and APM at scale, correlated to all
|
||
telemetry.</li>
|
||
<li><a href="https://betteruptime.com">BetterUptime</a> - A good website
|
||
monitoring tool (bundling status page, incident notification)</li>
|
||
<li><a href="https://pingdom.com">Pingdom</a> - A tool to get the uptime
|
||
of your website (with probes from different locations)</li>
|
||
<li><a href="https://uptimerobot.com">UptimeRobot</a> - Another uptime
|
||
monitoring tool (with a generous free plan)</li>
|
||
<li><a href="https://robomiri.com">RoboMiri</a> - RoboMiri is a stable
|
||
Uptime Monitor that offers a wide range of monitors: cronjob, keyword,
|
||
website, port, ping. 25 uptime checks with 3 minutes interval checks for
|
||
free. Alerts via Phone Call, SMS, Email, and WebHook.</li>
|
||
<li><a href="https://statuslist.app">StatusList</a> - Uptime,
|
||
performance monitoring with debug details, and hosted status page in one
|
||
simple dashboard.</li>
|
||
</ul>
|
||
<h2 id="bundle-analyzer">Bundle Analyzer</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/siddharthkp/bundlesize">Bundlesize</a> -
|
||
Keep your bundle size in check.</li>
|
||
<li><a
|
||
href="https://github.com/danvk/source-map-explorer">source-map-explorer</a>
|
||
- Analyze and debug bundle space usage through source maps.</li>
|
||
<li><a href="https://bundlephobia.com/">Bundlephobia</a> - Helps you
|
||
find the performance impact of adding an npm package to your frontend
|
||
bundle.</li>
|
||
<li><a
|
||
href="https://github.com/webpack-contrib/webpack-bundle-analyzer">Webpack
|
||
bundle analyzer</a> - webpack plugin and CLI utility that represents
|
||
bundle content as a convenient interactive zoomable treemap.</li>
|
||
<li><a href="http://hughsk.io/disc/">Disc</a> - Visualise the module
|
||
tree of browserify project bundles and track down bloat.</li>
|
||
<li><a
|
||
href="https://github.com/ajay2507/lasso-analyzer">Lasso-analyzer</a> -
|
||
analyze and Visualise project bundles created by Lasso.</li>
|
||
<li><a href="https://packtracker.io">Packtracker.io</a> - Check your
|
||
webpack bundle stats on every pull request, and track them over
|
||
time.</li>
|
||
<li><a
|
||
href="https://github.com/webpack-contrib/compression-webpack-plugin">Compression
|
||
webpack plugin</a> - Prepare compressed versions of assets to serve them
|
||
with Content-Encoding.</li>
|
||
<li><a
|
||
href="https://github.com/relative-ci/bundle-stats">BundleStats</a> -
|
||
Generate bundle report(bundle size, assets, modules, packages) and
|
||
compare the results between different builds</li>
|
||
</ul>
|
||
<h2 id="benchmark---css">Benchmark - CSS</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/mdo/css-perf">CSS-perf</a> - Completely
|
||
unscientific way of testing CSS performance. Most of these tests will
|
||
revolve around methodologies and techniques for determining effective
|
||
CSS architecture. Put another way, I want to know what works best given
|
||
a particular comparison of CSS strategies.</li>
|
||
</ul>
|
||
<h2 id="benchmark---javascript">Benchmark - JavaScript</h2>
|
||
<blockquote>
|
||
<p>A set of tools for creating test cases and comparing different
|
||
implementations in JavaScript.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="http://jsperf.com/">JSPerf</a> - jsPerf aims to provide an
|
||
easy way to create and share test cases, comparing the performance of
|
||
different JavaScript snippets by running benchmarks.
|
||
<code>Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537</code></li>
|
||
<li><a href="http://benchmarkjs.com/">Benchmark.js</a> - A robust
|
||
benchmarking library that works on nearly all JavaScript platforms,
|
||
supports high-resolution timers, and returns statistically significant
|
||
results.</li>
|
||
<li><a href="https://github.com/broofa/jslitmus">JSlitmus</a> - JSLitmus
|
||
is a lightweight tool for creating ad-hoc JavaScript benchmark
|
||
tests.</li>
|
||
<li><a href="https://github.com/logicalparadox/matcha">Matcha</a> -
|
||
Matcha allows you to design experiments that will measure the
|
||
performance of your code. It is recommended that each bench focus on a
|
||
specific point of impact in your application.</li>
|
||
<li><a href="https://github.com/addyosmani/timing.js">Timing.js</a> -
|
||
Timing.js is a small set of helpers for working with the Navigation
|
||
Timing API to identify where your application is spending its time.
|
||
Useful as a standalone script, DevTools Snippet, or bookmarklet.</li>
|
||
<li><a href="https://github.com/mrdoob/stats.js">Stats.js</a> - This
|
||
class provides a simple info box that will help you monitor your code
|
||
performance.</li>
|
||
<li><a href="https://github.com/kogarashisan/PerfTests">PerfTests</a> -
|
||
Performance tests of JavaScript inheritance models.</li>
|
||
<li><a
|
||
href="https://github.com/paulirish/memory-stats.js">Memory-stats.js</a>
|
||
- minimal monitor for JS Heap Size via performance memory.</li>
|
||
</ul>
|
||
<h2 id="benchmark---php">Benchmark - PHP</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/mre/PHPench">PHPench</a> - PHPench
|
||
creates a graphical output for a PHP benchmark. Plot the runtime of any
|
||
function in realtime with GnuPlot and create an image out of the
|
||
result.</li>
|
||
<li><a href="https://github.com/jacobbednarz/php-bench">php-bench</a> -
|
||
Benchmark and profile PHP code blocks whilst measuring the performance
|
||
footprint.</li>
|
||
</ul>
|
||
<h2 id="bookmarklets">Bookmarklets</h2>
|
||
<ul>
|
||
<li><a href="https://developer.yahoo.com/yslow/">Yahoo YSlow for
|
||
Mobile/Bookmarklet</a> - YSlow analyzes web pages and suggests ways to
|
||
improve their performance based on a set of rules for high-performance
|
||
web pages.</li>
|
||
<li><a href="https://github.com/zeman/perfmap">PerfMap</a> - A
|
||
bookmarklet to create a frontend performance heatmap of resources loaded
|
||
in the browser using the Resource Timing API.</li>
|
||
<li><a href="https://github.com/madrobby/dom-monster">DOM Monster</a> -
|
||
A cross-platform, cross-browser bookmarklet that will analyze the DOM
|
||
& other features of the page you’re on, and give you its bill of
|
||
health.</li>
|
||
<li><a
|
||
href="http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling">CSS
|
||
Stress</a> - CSS Stress is a Testing and Performance Profiling.</li>
|
||
<li><a
|
||
href="https://github.com/micmro/performance-bookmarklet">Performance-Bookmarklet</a>
|
||
- Analyze the current page through the Resource Timing API, Navigation
|
||
Timing API and User-Timing - Sort of a light live WebPageTest. As <a
|
||
href="https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf?hl=en">Chrome
|
||
Extension</a> and <a
|
||
href="https://addons.mozilla.org/en-us/firefox/addon/performance-analyser/?src=cb-dl-created">Firefox
|
||
Add-on</a> under the name Performance-Analyser.</li>
|
||
</ul>
|
||
<h2 id="cdn">CDN</h2>
|
||
<blockquote>
|
||
<p>A content delivery network or content distribution network (CDN) is a
|
||
large distributed system of servers deployed in multiple data centers
|
||
across the Internet. The goal of a CDN is to serve content to end-users
|
||
with high availability and high performance. See a large list of CDN in
|
||
<a
|
||
href="http://en.wikipedia.org/wiki/Content_delivery_network#Notable_content_delivery_service_providers">Wikipedia</a>.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="https://www.cloudflare.com/cdn/">Cloudflare CDN</a> - A
|
||
content delivery network that uses next-gen tech to deliver fast,
|
||
reliable, CDN services</li>
|
||
<li><a href="https://pagecdn.com/lib">PageCDN</a> - A state-of-the-art
|
||
opensource CDN with aggressive content optimization using brotli-11
|
||
compression, HTTP/2 server push, better HTTP/2 multiplexing, and more.
|
||
Supports 100s of libraries and 2000+ WordPress themes already. Easy to
|
||
use, easy to link, and very fast.</li>
|
||
<li><a href="https://github.com/jsdelivr/jsdelivr">jsDelivr</a> -
|
||
Similar to Google Hosted Libraries, jsDelivr is an open-source CDN that
|
||
allows developers to host their own projects and anyone to link to our
|
||
hosted files on their sites.</li>
|
||
<li><a href="https://developers.google.com/speed/libraries/">Google
|
||
Hosted Libraries</a> - Google Hosted Libraries is a content distribution
|
||
network for the most popular, open-source JavaScript libraries.</li>
|
||
<li><a href="https://cdnjs.com/">CDNjs</a> - An open-source CDN for
|
||
JavaScript and CSS sponsored by CloudFlare that hosts everything from
|
||
jQuery and Modernizr to Bootstrap.</li>
|
||
<li><a href="https://aws.amazon.com/cloudfront/">Amazon CloudFront</a> -
|
||
A content delivery network by Amazon that integrates nicely with other
|
||
Amazon services or can be used standalone.</li>
|
||
<li><a href="http://code.jquery.com/">jQuery</a> - jQuery CDN – Latest
|
||
Stable Versions, powered by MaxCDN.</li>
|
||
<li>:cn: <a href="http://jscdn.upai.com/">UpYun CDN</a> - CDN provided
|
||
by upyun.</li>
|
||
<li>:cn: <a href="http://www.bootcdn.cn/">Bootstrap 中文网开放 CDN
|
||
服务</a> - Bootstrap Chinese net open CDN service (only HTTP).</li>
|
||
<li>:ru: <a href="https://tech.yandex.ru/jslibs/">Yandex CDN</a> -
|
||
Yandex Content Delivery Network hosts popular third-party JavaScript and
|
||
CSS libraries (best for use in Russia).</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>To find useful more information for you to make the right choice
|
||
between paid CDNs, please visit <a
|
||
href="http://www.cdnplanet.com/">CDNPlanet</a>.</p>
|
||
</blockquote>
|
||
<h2 id="cdn---monitor">CDN - Monitor</h2>
|
||
<ul>
|
||
<li><a href="http://www.cdnperf.com/">CDNperf</a> - finds you fast and
|
||
reliable JavaScript CDNs that make your sites snappy and happy.</li>
|
||
</ul>
|
||
<h2 id="cdn---utilities">CDN - Utilities</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/gulp-google-cdn">Gulp-google-cdn</a>
|
||
- Replaces script references with Google CDN ones.</li>
|
||
</ul>
|
||
<h2 id="extensions">Extensions</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/zenorocha/browser-calories-chrome">Browser
|
||
Calories</a> - The easiest way to measure your performance budget.</li>
|
||
</ul>
|
||
<h2 id="generators">Generators</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/jarred-sumner/atbuild">AtBuild</a> -
|
||
JavaScript code generation tool that lets you write JavaScript that
|
||
outputs JavaScript. Good for unrolling loops and writing libraries that
|
||
compile away the runtime</li>
|
||
<li><a href="https://github.com/jorgebastida/glue">Glue</a> - Glue is a
|
||
simple command-line tool to generate sprites:</li>
|
||
<li><a href="https://github.com/pitomba/spriter">Pitomba-spriter</a> -
|
||
Spriter is a simple and flexible dynamic sprite generator for CSS, using
|
||
Python. It can process CSS both synchronous and asynchronous as it
|
||
provides classes to be used in your Python code and also a watcher that
|
||
listens to your filesystem and changes CSS and sprite as soon as a
|
||
static is changed.</li>
|
||
<li><a
|
||
href="https://github.com/Ensighten/grunt-spritesmith">Grunt-spritesmith</a>
|
||
- Grunt task for converting a set of images into a sprite sheet and
|
||
corresponding CSS variables.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/grunt-sprite-css-replace">Grunt-sprite-css-replace</a>
|
||
- Grunt task that generates a sprite from images referenced in a style
|
||
sheet and then updates the references with the new sprite image and
|
||
positions.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/grunt-svg-sprite">Grunt-svg-sprite</a>
|
||
- SVG sprites & stacks galore — Grunt plugin wrapping around
|
||
svg-sprite that reads in a bunch of SVG files, optimizes them and
|
||
creates SVG sprites and CSS resources in various flavors.</li>
|
||
<li><a href="https://github.com/aslansky/gulp-sprite">Gulp-sprite</a> -
|
||
gulp task for creating an image sprite and the corresponding style
|
||
sheets for Gulp.</li>
|
||
<li><a
|
||
href="https://github.com/shakyShane/gulp-svg-sprites">Gulp-svg-sprites</a>
|
||
- gulp task for creating SVG sprites.</li>
|
||
<li><a href="https://github.com/kajyr/SvgToCSS">SvgToCSS</a> - Optimizes
|
||
and renders SVG files in CSS / Sass sprites.</li>
|
||
<li><a
|
||
href="https://github.com/assetgraph/assetgraph-sprite">Assetgraph-sprite</a>
|
||
- Assetgraph transform for auto-generating sprites based on the CSS
|
||
dependency graph.</li>
|
||
<li><a href="http://www.spritecow.com/">Sprite Cow</a> - Sprite Cow
|
||
helps you get the background-position, width, and height of sprites
|
||
within a spritesheet as a nice bit of copyable CSS.</li>
|
||
<li><a href="http://zerosprites.com/">ZeroSprites</a> - ZeroSprites is a
|
||
CSS sprites generator aimed at area minimization using algorithms used
|
||
in the field of VLSI floorplanning.</li>
|
||
<li><a href="http://css.spritegen.com/">CSS Sprite Generator</a> - CSS
|
||
sprites allow you to combine multiple images into a single file.</li>
|
||
<li><a href="https://github.com/sprity/sprity">Sprity</a> - A modular
|
||
image sprite generator with a lot of features: supports retina sprites,
|
||
supports different output formats, generates sprites and proper style
|
||
files out of a directory of images, etc…</li>
|
||
<li><a href="https://github.com/jakesgordon/sprite-factory">Sprite
|
||
Factory</a> - The sprite factory is a ruby library that can be used to
|
||
generate CSS sprites. It combines individual image files from a
|
||
directory into a single unified sprite image and creates an appropriate
|
||
CSS style sheet for use in your web application.</li>
|
||
</ul>
|
||
<h2 id="image-optimizers">Image Optimizers</h2>
|
||
<blockquote>
|
||
<p>How to remove all this unnecessary data and give you a file without
|
||
degrading quality.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a
|
||
href="https://shortpixel.com/online-image-compression">Shortpixel</a> -
|
||
Compress Your Image by removing unnecessary bytes of the image and
|
||
Convert it into WebP/AVIF</li>
|
||
<li><a href="https://github.com/heldr/grunt-smushit">Grunt-smushit</a> -
|
||
Grunt plugin to remove unnecessary bytes of PNG and JPG using Yahoo
|
||
Smushit.</li>
|
||
<li><a href="https://github.com/heldr/gulp-smushit">Gulp-smushit</a> -
|
||
Gulp plugin to optimize PNG and JPG using Yahoo Smushit. Made on top of
|
||
smosh.</li>
|
||
<li><a href="http://www.imgopt.com/">Smush it</a> - Smush it uses
|
||
optimization techniques specific to image format to remove unnecessary
|
||
bytes from image files. It is a “lossless” tool, which means it
|
||
optimizes the images without changing their look or visual quality.</li>
|
||
<li><a href="https://github.com/imagemin/imagemin">Imagemin</a> - Minify
|
||
images seamlessly with Node.js.</li>
|
||
<li><a href="https://github.com/lovell/sharp">Sharp</a> - The typical
|
||
use case for this high-speed Node.js module is to convert large images
|
||
of many formats to smaller, web-friendly JPEG, PNG, and WebP images of
|
||
varying dimensions.</li>
|
||
<li><a href="https://github.com/aheckmann/gm">Gm</a> - GraphicsMagick
|
||
and ImageMagick for Node.js.</li>
|
||
<li><a href="https://github.com/h4cc/awesome-elixir">Exexif</a> - Pure
|
||
elixir library to extract tiff and exif metadata from JPEG files.</li>
|
||
<li><a href="https://exifcleaner.com">ExifCleaner</a> - GUI app to
|
||
remove EXIF metadata from images and video files with drag and drop.
|
||
Free and open source.</li>
|
||
<li><a href="http://optipng.sourceforge.net/">OptiPNG</a> - OptiPNG is a
|
||
PNG optimizer that recompresses image files to a smaller size, without
|
||
losing any information.</li>
|
||
<li><a
|
||
href="https://github.com/gruntjs/grunt-contrib-imagemin">Grunt-contrib-imagemin</a>
|
||
- Minify PNG and JPEG images for Grunt.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/gulp-imagemin">Gulp-imagemin</a> -
|
||
Minify PNG, JPEG, GIF and SVG images with imagemin for Gulp.</li>
|
||
<li><a
|
||
href="https://github.com/somerandomdude/grunt-webp">Grunt-WebP</a> -
|
||
Convert your images to WebP format.</li>
|
||
<li><a href="https://github.com/sindresorhus/gulp-webp">Gulp-WebP</a> -
|
||
Convert images to WebP for Gulp.</li>
|
||
<li><a href="https://imageoptim.com/">Imageoptim</a> - Free app that
|
||
makes images take up less disk space and load faster, without
|
||
sacrificing quality. It optimizes compression parameters, and removes
|
||
junk metadata and unnecessary color profiles.</li>
|
||
<li><a
|
||
href="https://github.com/JamieMason/grunt-imageoptim">Grunt-imageoptim</a>
|
||
- Make ImageOptim, ImageAlpha, and JPEGmini part of your automated build
|
||
process.</li>
|
||
<li><a
|
||
href="https://github.com/JamieMason/ImageOptim-CLI">ImageOptim-CLI</a> -
|
||
Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch
|
||
optimization of images part of your automated build process.</li>
|
||
<li><a href="https://github.com/JafarAkhondali/Tapnesh">Tapnesh-CLI</a>
|
||
- Tapnesh is a CLI tool that will optimize all your images in parallel
|
||
easily and efficiently!</li>
|
||
<li><a href="https://tinypng.com/">Tinypng</a> - Advanced lossy
|
||
compression for PNG images that preserves full alpha transparency.</li>
|
||
<li><a href="https://kraken.io/web-interface">Kraken Web-interface</a> -
|
||
Optimize your images and will be available for download for 12
|
||
hours.</li>
|
||
<li><a href="https://compressor.io/">Compressor</a> - Online image
|
||
compressor for JPG, PNG, SVG and GIF.</li>
|
||
<li><a href="https://shrinkray.io">Shrinkray</a> - One-click
|
||
optimization for images in your GitHub repos</li>
|
||
<li><a href="https://github.com/mozilla/mozjpeg">mozjpeg</a> - Improved
|
||
JPEG encoder.</li>
|
||
<li><a href="https://github.com/tjko/jpegoptim">Jpegoptim</a> - Utility
|
||
to optimize/compress JPEG files.</li>
|
||
<li><a href="https://github.com/google/zopfli">ZopfliPNG</a> - A
|
||
command-line program to optimize PNG images.</li>
|
||
<li><a href="http://www.advancemame.it/doc-advpng.html">AdvPNG</a> -
|
||
Recompress PNG files to get the smallest possible size.</li>
|
||
<li><a href="https://github.com/JayXon/Leanify">Leanify</a> -
|
||
Lightweight lossless file minifier/optimizer.</li>
|
||
<li><a href="http://trimage.org/">Trimage</a> - A cross-platform tool
|
||
for losslessly optimizing PNG and JPG files.</li>
|
||
<li><a href="https://imageengine.io">ImageEngine</a> - Cloud service for
|
||
optimizing, resizing and caching images on the fly with great mobile
|
||
support.</li>
|
||
<li><a href="https://imagekit.io">ImageKit.io</a> - Intelligent
|
||
real-time image optimizations, image transformations with a global
|
||
delivery network and storage.</li>
|
||
<li><a href="https://github.com/funbox/optimizt">Optimizt</a> - CLI
|
||
image optimization tool. It can compress PNG, JPEG, GIF and SVG lossy
|
||
and lossless and create WebP versions for raster images.</li>
|
||
</ul>
|
||
<h2 id="lazyloaders">Lazyloaders</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/vvo/lazyload">lazyload</a> - Lazyload
|
||
images, iframes, widgets with a standalone JavaScript lazyloader
|
||
~1kb</li>
|
||
<li><a href="https://github.com/ApoorvSaxena/lozad.js">lozad.js</a> -
|
||
Highly performant, light ~0.9kb, and configurable lazy loader in pure JS
|
||
with no dependencies for responsive images, iframes, and more</li>
|
||
</ul>
|
||
<h2 id="loaders">Loaders</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/headjs/headjs">HeadJS</a>- The only
|
||
script in your HEAD. for Responsive Design, Feature Detections, and
|
||
Resource Loading.</li>
|
||
<li><a href="http://requirejs.org/">RequireJS</a> - RequireJS is a
|
||
JavaScript file and module loader. It is optimized for in-browser use,
|
||
but it can be used in other JavaScript environments, like Rhino and
|
||
Node.js.</li>
|
||
<li><a href="http://labjs.com/">Labjs</a> - is an open-source (MIT
|
||
license) project supported by Getify Solutions. The core purpose of
|
||
LABjs is to be an all-purpose, on-demand JavaScript loader, capable of
|
||
loading any JavaScript resource, from any location, into any page, at
|
||
any time.</li>
|
||
<li><a href="https://github.com/wessman/defer.js">Defer.js</a> - Async
|
||
Everything: Make the meat of your pages load faster with this JS
|
||
morsel.</li>
|
||
<li><a href="https://github.com/dieulot/instantclick">InstantClick</a> -
|
||
InstantClick makes the following links in your site instant.</li>
|
||
<li><a href="https://github.com/shootaroo/jit-grunt">JIT</a> - A JIT
|
||
(Just In Time) plugin loader for Grunt. The load time of Grunt does not
|
||
slow down even if there are many plugins.</li>
|
||
</ul>
|
||
<h2 id="metrics-monitor">Metrics Monitor</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/macbre/phantomas">Phantomas</a> -
|
||
PhantomJS-based web performance metrics collector and monitoring
|
||
tool.</li>
|
||
<li><a href="http://www.showslow.com/">Showslow</a> - open source tool
|
||
that helps monitor various site performance metrics over time. It
|
||
captures the results of YSlow, Page Speed Insights, WebPageTest and
|
||
dynaTrace Ajax Edition.</li>
|
||
<li><a href="https://github.com/jmervine/bench">Bench</a> - Using
|
||
Phantomas (a PhantomJS-backed client performance metrics scrapper).
|
||
Benchmark a page, store results in MongoDB, and display results via the
|
||
built-in server.</li>
|
||
<li><a href="https://github.com/keepfast/keepfast">Keepfast</a> - Tool
|
||
to monitor indicators related to the performance of a web page.</li>
|
||
<li><a href="https://gtmetrix.com/">GTmetrix</a> - GTmetrix uses Google
|
||
Page Speed and Yahoo! YSlow to grade your site’s performance and
|
||
provides actionable recommendations to fix these issues.</li>
|
||
<li><a href="https://pingbreak.com/">Pingbreak.com</a> - Free site and
|
||
SSL Monitoring with response time alerting (on Slack, Twitter,
|
||
Mattermost, Discord or custom Webhook).</li>
|
||
<li><a href="http://tools.pingdom.com/fpt/">Pingdom site Speed Test</a>
|
||
- Test the load time of that page, analyze it, and find
|
||
bottlenecks.</li>
|
||
<li><a
|
||
href="https://www.dotcom-tools.com/website-speed-test.aspx">Dotcom-tools</a>
|
||
- analyze your website’s speed in real browsers from 20 locations
|
||
worldwide.</li>
|
||
<li><a href="http://www.webpagetest.org/">WebPageTest</a> - Run a free
|
||
site speed test from multiple locations around the globe using real
|
||
browsers (IE and Chrome) and at real consumer connection speeds. You can
|
||
run simple tests or perform advanced testing including multi-step
|
||
transactions, video capture, content blocking and much more. Your
|
||
results will provide rich diagnostic information including
|
||
resource-loading waterfall charts, Page Speed optimization checks and
|
||
suggestions for improvements.</li>
|
||
<li><a href="https://www.sitespeed.io/documentation/">Sitespeed.io</a> -
|
||
Sitespeed.io is an open-source tool that will check your site against
|
||
web performance best practice rules and use the Navigation Timing API to
|
||
collect metrics. It will create XML & HTML output of the
|
||
result.</li>
|
||
<li><a
|
||
href="https://github.com/stefanjudis/grunt-phantomas">Grunt-phantomas</a>
|
||
- Grunt plugin wrapping phantomas to measure frontend performance.</li>
|
||
<li><a href="https://www.npmjs.com/package/perfjankie">Perfjankie</a> -
|
||
Runtime Browser Performance regression suite (<a
|
||
href="https://github.com/asciidisco/perfjankie-test">Demo</a>).</li>
|
||
<li><a
|
||
href="https://www.dotcom-monitor.com/website-monitor/website-speed-monitoring/">BrowserView
|
||
Monitoring</a> - Continually checks web page load times in Internet
|
||
Explorer, Chrome and Firefox from multiple points around the world.</li>
|
||
<li><a href="http://newrelic.com/browser-monitoring">New Relic Browser
|
||
Monitoring</a> - Monitor your browser-side applications in real time,
|
||
with a focus on real end users’ experiences.</li>
|
||
<li><a href="https://www.dareboost.com/">DareBoost</a> - Real Browser
|
||
Monitoring. Offers complete reports about web performance and quality
|
||
using YSlow, Page Speed and numerous custom tips.</li>
|
||
<li><a href="https://www.bytesmatter.io">Bytes Matter Real User
|
||
Monitoring</a> - Full featured Real User Monitoring solution. Free tier
|
||
for smaller sites. Includes monitoring for Google’s Core Web
|
||
Vitals.</li>
|
||
</ul>
|
||
<h2 id="metrics-monitor---api">Metrics Monitor - API</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/marcelduran/webpagetest-api">WebPageTest
|
||
API Wrapper for Node.js</a> - WebPageTest API Wrapper is an npm package
|
||
that wraps WebPageTest API for Node.js as a module and a command-line
|
||
tool.</li>
|
||
</ul>
|
||
<h2 id="metrics-monitor---email">Metrics Monitor - EMAIL</h2>
|
||
<ul>
|
||
<li><a href="https://webperformancereport.com/">WebPerformance
|
||
Report</a> - Web performance report every week in your inbox. Get a
|
||
Personalized Report on the Status of the E-commerce or Website that you
|
||
want to monitor in terms of Web performance and Web optimization, Core
|
||
Web Vitals are included.</li>
|
||
</ul>
|
||
<h2 id="minifiers---html">Minifiers - HTML</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://code.google.com/archive/p/htmlcompressor/">HTMLCompressor</a>
|
||
- HtmlCompressor is a small, fast, and very easy to use Java library
|
||
that minifies given HTML or XML source by removing extra whitespaces,
|
||
comments, and other unneeded characters without breaking the content
|
||
structure. As a result page become smaller in size and load faster. A
|
||
command-line version of the compressor is also available.</li>
|
||
<li><a
|
||
href="https://github.com/cobrateam/django-htmlmin">Django-htmlmin</a> -
|
||
django-html in an HTML minifier for Python with full support for HTML 5.
|
||
It supports Django, Flask and any other Python web framework. It also
|
||
provides a command-line tool that can be used for static sites or
|
||
deployment scripts.</li>
|
||
<li><a href="https://github.com/kangax/html-minifier">HTMLMinifier</a> -
|
||
HTMLMinifier is a highly configurable, well-tested, Javascript-based
|
||
HTML minifier, with lint-like capabilities.</li>
|
||
<li><a
|
||
href="https://github.com/gruntjs/grunt-contrib-htmlmin">Grunt-contrib-htmlmin</a>
|
||
- A grunt plugin to minify HTML that uses HTMLMinifier.</li>
|
||
<li><a
|
||
href="https://github.com/jonschlinkert/gulp-htmlmin">Gulp-htmlmin</a> -
|
||
A gulp plugin to minify HTML that uses HTMLMinifier.</li>
|
||
<li><a
|
||
href="https://github.com/jney/grunt-htmlcompressor">Grunt-htmlcompressor</a>
|
||
- Grunt plugin for HTML compression, using htmlcompressor.</li>
|
||
<li><a
|
||
href="https://github.com/stereobooster/html_minifier">HTML_minifier</a>
|
||
- Ruby wrapper for kangax html-minifier.</li>
|
||
<li><a href="https://github.com/stereobooster/html_press">HTML_press</a>
|
||
- Ruby gem for compressing html, that removes all whitespace junk, and
|
||
leaves only HTML.</li>
|
||
<li><a href="https://github.com/koajs/html-minifier">Koa HTML
|
||
Minifier</a> - Middleware that minifies your HTML responses using
|
||
html-minifier. It uses html-minifier’s default options which are all
|
||
turned off by default, so you have to set the options otherwise it’s not
|
||
going to do anything.</li>
|
||
<li><a href="http://kangax.github.io/html-minifier/">HTML Minifier
|
||
Online</a> - A HTML min tool by kangax (HTMLMinifier Creator).</li>
|
||
<li><a href="https://github.com/Swaagie/minimize">Minimize</a> -
|
||
Minimize is an HTML minifier based on the node-htmlparser,currently,
|
||
HTML minifier is only usable server-side. Client-side minification will
|
||
be added in a future release.</li>
|
||
<li><a
|
||
href="https://github.com/deanhume/html-minifier">Html-minifier</a> - A
|
||
simple Windows command-line tool to minify your HTML, Razor views &
|
||
Web Forms views</li>
|
||
</ul>
|
||
<h2 id="minifiers---js-css">Minifiers - JS & CSS</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/yui/yuicompressor">YUI Compressor</a> -
|
||
JavaScript compressor which, in addition to removing comments and
|
||
white-spaces, obfuscates local variables using the smallest possible
|
||
variable name. This obfuscation is safe, even when using constructs such
|
||
as ‘eval’ or ‘with’ (although the compression is not optimal is those
|
||
cases) Compared to jsmin, the average savings is around 20%.</li>
|
||
<li><a href="https://github.com/mishoo/UglifyJS2">UglifyJS2</a> -
|
||
UglifyJS is a JavaScript parser, minifier, compressor or beautifier
|
||
toolkit, written in JavaScript.</li>
|
||
<li><a href="https://github.com/css/csso">CSSO</a> - CSS minimizer
|
||
unlike others. In addition to usual minification techniques, it can
|
||
perform structural optimization of CSS files, resulting in smaller file
|
||
size compared to other minifiers.</li>
|
||
<li><a
|
||
href="https://github.com/stoyan/yuicompressor/blob/master/ports/js/cssmin.js">CSSmin.js</a>
|
||
- cssmin.js is a JavaScript port of YUICompressor’s CSS minifier.</li>
|
||
<li><a
|
||
href="https://github.com/gruntjs/grunt-contrib-concat">Grunt-contrib-concat</a>
|
||
- A Grunt plugin to concatenate files.</li>
|
||
<li><a
|
||
href="https://github.com/gruntjs/grunt-contrib-uglify">Grunt-contrib-uglify</a>
|
||
- A Grunt plugin to concatenate and minify JavaScript files.</li>
|
||
<li><a href="https://github.com/jakubpawlowicz/clean-css">Clean-css</a>
|
||
- A fast, efficient, and well-tested CSS minifier for node.js.</li>
|
||
<li><a
|
||
href="https://github.com/django-compressor/django-compressor">Django-compressor</a>
|
||
- Compresses linked and inline JavaScript or CSS into a single cached
|
||
file.</li>
|
||
<li><a
|
||
href="https://github.com/cyberdelia/django-pipeline">Django-pipeline</a>
|
||
- Pipeline is an asset packaging library for Django, providing both CSS
|
||
and JavaScript concatenation and compression, built-in JavaScript
|
||
template support, and optional data-URI image and font embedding.</li>
|
||
<li><a href="https://github.com/tedious/JShrink">JShrink</a> - JShrink
|
||
is a PHP class that minifies JavaScript so that it can be delivered to
|
||
the client quicker.</li>
|
||
<li><a href="http://jscompress.com/">JSCompress</a> - The most
|
||
minimalistic online JS Compress tool.</li>
|
||
<li><a href="https://github.com/stoyan/cssshrink">CSSshrink</a> -
|
||
Because CSS is ospon the critical path to rendering pages. It must be
|
||
small! Or else!</li>
|
||
<li><a
|
||
href="https://github.com/JohnCashmore/grunt-cssshrink">Grunt-cssshrink</a>
|
||
- This is just a grunt wrapper for CSS Shrink.</li>
|
||
<li><a
|
||
href="https://github.com/torrottum/gulp-cssshrink">Gulp-cssshrink</a> -
|
||
Shrinks CSS files using cssshrink for Gulp.</li>
|
||
<li><a href="https://github.com/stoyan/prettyugly">Prettyugly</a> -
|
||
Uglify (strip spaces) or prettify (add consistent spaces) CSS code.</li>
|
||
<li><a
|
||
href="https://github.com/gruntjs/grunt-contrib-cssmin">Grunt-contrib-cssmin</a>
|
||
- CSS Minifier for Grunt.</li>
|
||
<li><a href="https://github.com/addyosmani/grunt-uncss">Grunt-uncss</a>
|
||
- A grunt task for removing unused CSS from your projects.</li>
|
||
<li><a href="https://github.com/ben-eb/gulp-uncss">Gulp-uncss</a> - A
|
||
gulp task for removing unused CSS from your projects.</li>
|
||
</ul>
|
||
<h2 id="miscellaneous">Miscellaneous</h2>
|
||
<ul>
|
||
<li><a href="http://socialitejs.com/">Socialite.js</a> - Socialite
|
||
provides a very easy way to implement and activate a plethora of social
|
||
sharing buttons — any time you wish. On document load, on article hover,
|
||
on any event.</li>
|
||
<li><a href="https://github.com/oyvindeh/ucss">uCSS</a> - uCSS is made
|
||
for crawling (large) sites to find unused CSS selectors, but not remove
|
||
unused CSS.</li>
|
||
<li><a href="https://github.com/jakutis/httpinvoke">HTTPinvoke</a>- A
|
||
no-dependencies HTTP client library for browsers and Node.js with a
|
||
promise-based or Node.js-style callback-based API to progress events,
|
||
text, and binary file upload and download, partial response body,
|
||
request and response headers, status code.</li>
|
||
<li><a href="https://github.com/addyosmani/critical">Critical</a> -
|
||
Extract & Inline Critical-path CSS in HTML pages (alpha).</li>
|
||
<li><a href="https://github.com/stoyan/csscolormin">Csscolormin</a> -
|
||
Utility that minifies CSS colors, example: min(“white”); // minifies to
|
||
“#fff”.</li>
|
||
<li><a href="https://github.com/aFarkas/lazysizes">Lazysizes</a> -
|
||
High-performance lazy loader for images (responsive and normal),
|
||
iframes, and scripts, that detects any visibility changes triggered
|
||
through user interaction, CSS or JavaScript without configuration.</li>
|
||
<li><a href="http://perf-tooling.today/">Perf-Tooling</a> - Perf Tooling
|
||
is a shared resource to keep track of new and existing performance
|
||
tools.</li>
|
||
<li><a href="https://github.com/addyosmani/tmi">TMI</a> - TMI (Too Many
|
||
Images) - discover your image weight on the web.</li>
|
||
</ul>
|
||
<h2 id="svg">SVG</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/svg/svgo">SVGO</a> - SVGO is a
|
||
Nodejs-based tool for optimizing SVG vector graphics files.</li>
|
||
<li><a href="https://jakearchibald.github.io/svgomg/">SVG OMG</a> -
|
||
SVGOMG is SVGO’s Missing GUI, aiming to expose the majority, if not all
|
||
the configuration options of SVGO.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/grunt-svgmin">Grunt-svgmin</a> -
|
||
Minify SVG using SVGO for Grunt.</li>
|
||
<li><a href="https://www.npmjs.com/package/gulp-svgmin">Gulp-svgmin</a>
|
||
- Minify SVG with SVGO for Gulp.</li>
|
||
<li><a href="http://www.codedread.com/scour/">Scour</a> - Scour is an
|
||
open-source Python script that aggressively cleans SVG files, removing a
|
||
lot of ‘cruft’ that certain tools or authors embed into their
|
||
documents.</li>
|
||
<li><a href="https://github.com/RazrFalcon/SVGCleaner">SVG Cleaner</a> -
|
||
SVG Cleaner could help you to clean up your SVG files from unnecessary
|
||
data. It has a lot of options for cleanup and optimization, works in
|
||
batch mode, and provides threaded processing on multicore
|
||
processors.</li>
|
||
</ul>
|
||
<h2 id="web-components">Web Components</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/Polymer/tools/tree/master/packages/bundler">Polymer
|
||
Bundler</a> - Polymer-bundler is a library for packaging project assets
|
||
for production to minimize network round-trips.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/gulp-vulcanize">Gulp-vulcanize</a>
|
||
- Concatenate a set of Web Components into one file that use
|
||
Vulcanize.</li>
|
||
</ul>
|
||
<h2 id="web-server-benchmarks">Web server Benchmarks</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/httperf/httperf">HTTPerf</a> - httperf
|
||
is a tool for measuring web server performance. It provides a flexible
|
||
facility for generating various HTTP workloads and for measuring server
|
||
performance.</li>
|
||
<li><a href="http://jmeter.apache.org/download_jmeter.cgi">Apache
|
||
JMeter</a> - Open source load testing tool: It is a Java platform
|
||
application.</li>
|
||
<li><a href="http://locust.io">Locust</a> - An open-source load testing
|
||
tool. Define user behaviour with Python code, and swarm your system with
|
||
millions of simultaneous users.</li>
|
||
<li><a href="https://github.com/igrigorik/autoperf">Autoperf</a> -
|
||
Autoperf is a ruby driver for httperf, designed to help you automate
|
||
load and performance testing of any web application - for a single
|
||
endpoint, or through log replay.</li>
|
||
<li><a href="https://github.com/jmervine/httperfrb">HTTPerf.rb</a> -
|
||
Simple Ruby interface for httperf, written in Ruby.</li>
|
||
<li><a href="https://github.com/jmervine/php-httperf">PHP-httperf</a> -
|
||
PHP Port of HTTPerf.rb.</li>
|
||
<li><a href="https://github.com/jmervine/httperfjs">HTTPerf.js</a> - JS
|
||
Port of HTTPerf.rb.</li>
|
||
<li><a href="https://github.com/jmervine/httperfpy">HTTPerf.py</a> -
|
||
Python Port of HTTPerf.rb.</li>
|
||
<li><a href="https://github.com/jmervine/gohttperf">Gohttperf</a> - Go
|
||
Port of HTTPerf.rb.</li>
|
||
<li><a href="https://github.com/wg/wrk">wrk</a> - A HTTP benchmarking
|
||
tool (with optional Lua scripting for request generation, response
|
||
processing, and custom reporting)</li>
|
||
<li><a
|
||
href="https://github.com/newsapps/beeswithmachineguns">beeswithmachineguns</a>
|
||
- A utility for arming (creating) many bees (micro EC2 instances) to
|
||
attack (load test) targets (web applications).</li>
|
||
<li><a href="https://k6.io/">k6</a> - An open-source load testing tool
|
||
built for developers. Easy to integrate into CI pipelines. Tests are
|
||
written in ES6 JS and you can test APIs, microservices and sites using
|
||
HTTP/1.1, HTTP/2 and WebSocket.</li>
|
||
</ul>
|
||
<h2 id="web-server-modules">Web server Modules</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/speed/pagespeed/module/download">PageSpeed
|
||
Module</a> - PageSpeed speeds up your site and reduces page load time.
|
||
This open-source web server module automatically applies web performance
|
||
best practices to pages and associated assets (CSS, JavaScript, images)
|
||
without requiring that you modify your existing content or workflow.
|
||
PageSpeed is available as a module for Apache 2.x and Nginx 1.x.</li>
|
||
<li><a href="https://github.com/igrigorik/webp-detect">WebP-detect</a> -
|
||
WebP with Accept negotiation.</li>
|
||
</ul>
|
||
<h1 id="specs">Specs</h1>
|
||
<ul>
|
||
<li><a href="http://www.w3.org/2010/webperf/">Web Performance Working
|
||
Group</a> - The mission of the Web Performance Working Group, part of
|
||
the Rich Web Client Activity, is to provide methods to measure aspects
|
||
of application performance of user agent features and APIs.</li>
|
||
<li><a href="http://www.w3.org/TR/page-visibility/">Page Visibility</a>
|
||
- This specification defines a means for site developers to
|
||
programmatically determine the current visibility state of the page in
|
||
order to develop power and CPU-efficient web applications.</li>
|
||
<li><a href="https://w3c.github.io/navigation-timing/">Navigation
|
||
Timing</a> - This specification defines a unified interface to store and
|
||
retrieve high resolution performance metric data related to the
|
||
navigation of a document.</li>
|
||
<li><a href="http://www.w3.org/TR/resource-timing/">Resource Timing</a>
|
||
- This specification defines an interface for web applications to access
|
||
the complete timing information for resources in a document.</li>
|
||
<li><a href="http://www.w3.org/TR/user-timing/">User Timing</a> - This
|
||
specification defines an interface to help web developers measure the
|
||
performance of their applications by giving them access to
|
||
high-precision timestamps.</li>
|
||
<li><a href="http://www.w3.org/TR/performance-timeline/">Performance
|
||
Timeline</a> - This specification defines a unified interface to store
|
||
and retrieve performance metric data. This specification does not cover
|
||
individual performance metric interfaces.</li>
|
||
<li><a href="https://drafts.csswg.org/css-will-change/">CSS
|
||
will-change</a> - This specification defines the
|
||
<code>will-change</code> 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.</li>
|
||
<li><a href="http://www.w3.org/TR/resource-hints/">Resource Hints</a> -
|
||
This specification defines the dns-prefetch, preconnect, prefetch, and
|
||
prerender relationships of the HTML Link Element (<link>). These
|
||
primitives enable the developer, and the server generating or delivering
|
||
the resources, to assist the user agent in the decision process of which
|
||
origins it should connect to, and which resources it should fetch and
|
||
preprocess to improve page performance.</li>
|
||
</ul>
|
||
<h1 id="stats">Stats</h1>
|
||
<ul>
|
||
<li><a href="http://httparchive.org/index.php">HTTP Archive</a> - It’s a
|
||
permanent repository of web performance information such as size of
|
||
pages, failed requests, and technologies utilized. This performance
|
||
information allows us to see trends in how the Web is built and provides
|
||
a common data set from which to conduct web performance research.</li>
|
||
</ul>
|
||
<h1 id="other-awesome-lists">Other Awesome Lists</h1>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/iamakulov/awesome-webpack-perf">iamakulov/awesome-webpack-perf</a>
|
||
- A curated list of webpack tools for web performance</li>
|
||
<li><a
|
||
href="https://github.com/bayandin/awesome-awesomeness">bayandin/awesome-awesomeness</a>.</li>
|
||
<li><a
|
||
href="https://github.com/sindresorhus/awesome">sindresorhus/awesome</a>.</li>
|
||
</ul>
|
||
<h1 id="contributing">Contributing</h1>
|
||
<p>For contributing, <a
|
||
href="https://github.com/davidsonfellipe/awesome-wpo/issues">open an
|
||
issue</a> and/or a <a
|
||
href="https://github.com/davidsonfellipe/awesome-wpo/pulls">pull
|
||
request</a>.</p>
|