Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

critical-path-css-tools

Tools to prioritize above-the-fold (critical-path) CSS
https://github.com/addyosmani/critical-path-css-tools

Last synced: 2 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.

  • 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

  • PhantomJS

    • dr-css-inliner - PhantomJS script to inline above-the-fold CSS on a page.
Programming Languages
JavaScript 10 HTML 3
Categories
Async load CSS 6 Render-blocking issues detection 5 Inline sources (styles, scripts) 4 Bookmarklets/Extensions 3 Grunt tasks 3 Node modules 3 Server-side modules 2 PhantomJS 1 CasperJS 1 Supplementary tools 1 Online tools 1
Sub Categories
Keywords
css 3 critical-path 2 critical-css 2 inline 1 grunt 1 above-the-fold 1 inline-styles 1 inline-css 1 critical-path-styles 1 critical-path-css 1 web 1 puppeteer 1 performance 1 nodejs 1