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
Last synced: 4 days ago
JSON representation
-
Async load CSS
- async & conditional loading - POC script for loading CSS files asynchronously and conditionally based on body tag classes
- comment
- basket.js - async script/resource loader with support for localStorage caching. Can be [extended](https://github.com/andrewwakeling/basket-css-example) to load stylesheets.
- loadCSS - loads CSS asynchronously using JS. [Research](https://gist.github.com/scottjehl/87176715419617ae6994) that led to this is also available.
- 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.
-
Online tools
-
Bookmarklets/Extensions
-
Render-blocking issues detection
- 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.
- 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.
- 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.
- 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.
-
Server-side modules
- mod_pagespeed - Apache module for automatic PageSpeed optimization
- ngx_pagespeed - Nginx module for automatic PageSpeed optimization
-
Inline sources (styles, scripts)
- inline-styles - by Max Ogden, replaces `<link>` tags with inline `<style>` tags + inlines CSS url() calls with data URIs
- 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`
-
Supplementary tools
- UnCSS - uncss), [Gulp](https://github.com/ben-eb/gulp-uncss) and [other](https://addyosmani.com/blog/removing-unused-css/) build tools.
-
Node modules
- 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
-
Grunt tasks
-
CasperJS
- critical-css-casperjs - CasperJS script to pull critical CSS information from pages
-
PhantomJS
- dr-css-inliner - PhantomJS script to inline above-the-fold CSS on a page.
Programming Languages
Categories
Sub Categories