{"slug": "addyosmani--critical-path-css-tools", "title": "Critical Path Css Tools", "description": "Tools to prioritize above-the-fold (critical-path) CSS", "github_url": "https://github.com/addyosmani/critical-path-css-tools", "stars": "1.1K", "tag": "Front-End Development", "entry_count": 27, "subcategory_count": 1, "subcategories": [{"name": "Prioritize above-the-fold content first.", "parent": "", "entries": [{"name": "Penthouse", "url": "https://github.com/pocketjoso/penthouse", "description": "by Jonas Ohlsson generates critical-path CSS", "stars": "2.5k"}, {"name": "Critical", "url": "https://github.com/addyosmani/critical", "description": "by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, [Oust (⭐163)](https://github.com/addyosmani/oust) and inline-styles)", "stars": "9.6k"}, {"name": "CriticalCSS", "url": "https://github.com/filamentgroup/criticalcss", "description": "by FilamentGroup finds & outputs critical CSS", "stars": "1.7k"}, {"name": "mod\\_pagespeed", "url": "https://github.com/pagespeed/mod_pagespeed", "description": "Apache module for automatic PageSpeed optimization", "stars": "691"}, {"name": "ngx\\_pagespeed", "url": "https://github.com/pagespeed/ngx_pagespeed", "description": "Nginx module for automatic PageSpeed optimization", "stars": "4.4k"}, {"name": "grunt-penthouse", "url": "https://github.com/fatso83/grunt-penthouse", "description": "", "stars": "68"}, {"name": "grunt-critical-css", "url": "https://github.com/filamentgroup/grunt-criticalcss", "description": "", "stars": "533"}, {"name": "grunt-critical", "url": "https://github.com/bezoerb/grunt-critical", "description": "", "stars": "149"}, {"name": "critical-css-casperjs", "url": "https://github.com/ibrennan/critical-css-casperjs", "description": "CasperJS script to pull critical CSS information from pages", "stars": "68"}, {"name": "dr-css-inliner", "url": "https://github.com/drdk/dr-css-inliner", "description": "PhantomJS script to inline above-the-fold CSS on a page.", "stars": "81"}, {"name": "inline-styles", "url": "https://github.com/maxogden/inline-styles", "description": "by Max Ogden, replaces `<link>` tags with inline `<style>` tags + inlines CSS url() calls with data URIs", "stars": "24"}, {"name": "gulp-inline-source", "url": "https://github.com/fmal/gulp-inline-source", "description": "by Filip Malinowski, replaces `<link>` tags with inline `<style>` tags, and replaces `<script src=\"\">` tags with their inline content", "stars": "211"}, {"name": "inline-critical", "url": "https://github.com/bezoerb/inline-critical", "description": "by Ben Zörb, inline critical path CSS and load existing stylesheets with `loadCSS`", "stars": "106"}, {"name": "isomorphic-style-loader", "url": "https://github.com/kriasoft/isomorphic-style-loader/", "description": "", "stars": "1.2k"}, {"name": "loadCSS", "url": "https://github.com/filamentgroup/loadCSS", "description": "loads CSS asynchronously using JS. [Research](https://gist.github.com/scottjehl/87176715419617ae6994) that led to this is also available.", "stars": "6.8k"}, {"name": "async & conditional loading", "url": "https://gist.github.com/matt-bailey/602b40c77a5d3381ff26", "description": "POC script for loading CSS files asynchronously and conditionally based on body tag classes"}, {"name": "asyncLoader", "url": "https://github.com/n0mad01/asyncLoader", "description": "async script/stylesheet loader", "stars": "0"}, {"name": "basket.js", "url": "http://addyosmani.github.io/basket.js/", "description": "async script/resource loader with support for localStorage caching. Can be [extended (⭐19)](https://github.com/andrewwakeling/basket-css-example) to load stylesheets."}, {"name": "Penthouse online", "url": "https://jonassebastianohlsson.com/criticalpathcssgenerator/", "description": ""}, {"name": "Snippet", "url": "https://gist.github.com/PaulKinlan/6284142", "description": ""}, {"name": "Snippet", "url": "https://gist.github.com/scottjehl/b6129da04733e4e0f9a4", "description": ""}, {"name": "CSSVacuum", "url": "https://github.com/ndreckshage/CSSVacuum", "description": "", "stars": "45"}, {"name": "PageSpeed Insights", "url": "https://developers.google.com/speed/pagespeed/insights/", "description": "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."}, {"name": "PSI", "url": "https://github.com/addyosmani/psi", "description": "Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use [grunt-pagespeed (⭐464)](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.", "stars": "3.1k"}, {"name": "PageSpeed Insights DevTools extension", "url": "https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en", "description": "Chrome extension for running PageSpeed tests from inside the browser."}, {"name": "PageSpeed Insights Checker for mobile extension", "url": "https://chrome.google.com/webstore/detail/pagespeed-insights-checke/mkjmodmicmpjedhoekkmafdgpocdkbna?hl=en", "description": "checks Mobile PageSpeed score for every page and gives you a handy preview."}, {"name": "UnCSS", "url": "https://github.com/giakki/uncss", "description": "", "stars": "9.3k"}]}]}