Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
critical-path-css-tools
Tools to prioritize above-the-fold (critical-path) CSS
https://github.com/addyosmani/critical-path-css-tools
- Penthouse - by Jonas Ohlsson generates critical-path CSS
- Critical - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, [Oust](https://github.com/addyosmani/oust) and inline-styles)
- CriticalCSS - by FilamentGroup finds & outputs critical CSS
- mod_pagespeed - Apache module for automatic PageSpeed optimization
- ngx_pagespeed - Nginx module for automatic PageSpeed optimization
- grunt-penthouse
- grunt-critical-css
- grunt-critical
- critical-css-casperjs - CasperJS script to pull critical CSS information from pages
- dr-css-inliner - PhantomJS script to inline above-the-fold CSS on a page.
- inline-styles - by Max Ogden, replaces `<link>` tags with inline `<style>` tags + inlines CSS url() calls with data URIs
- gulp-inline-source - by Filip Malinowski, replaces `<link>` tags with inline `<style>` tags, and replaces `<script src="">` tags with their inline content
- inline-critical - by Ben Zörb, inline critical path CSS and load existing stylesheets with `loadCSS`
- isomorphic-style-loader - allows to extract critical CSS for any given page/screen in React apps and inline it into HTML during server-side rendering (SSR). See [React Starter Kit](https://github.com/kriasoft/react-starter-kit) as an example.
- loadCSS - loads CSS asynchronously using JS. [Research](https://gist.github.com/scottjehl/87176715419617ae6994) that led to this is also available.
- async & conditional loading - POC script for loading CSS files asynchronously and conditionally based on body tag classes
- asyncLoader - async script/stylesheet loader
- basket.js - async script/resource loader with support for localStorage caching. Can be [extended](https://github.com/andrewwakeling/basket-css-example) to load stylesheets.
- comment
- Penthouse online
- Snippet
- Snippet
- CSSVacuum
- PageSpeed Insights - Online tool that measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
- PSI - Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use [grunt-pagespeed](https://github.com/jrcryer/grunt-pagespeed) if a Grunt user. For local testing, a write-up using this task and [ngrok](http://www.jamescryer.com/2014/06/12/grunt-pagespeed-and-ngrok-locally-testing/) is available.
- PageSpeed Insights DevTools extension - Chrome extension for running PageSpeed tests from inside the browser.
- PageSpeed Insights Checker for mobile extension - checks Mobile PageSpeed score for every page and gives you a handy preview.
- UnCSS - uncss), [Gulp](https://github.com/ben-eb/gulp-uncss) and [other](https://addyosmani.com/blog/removing-unused-css/) build tools.
Programming Languages