{"id":133,"url":"https://github.com/addyosmani/critical-path-css-tools","last_synced_at":"2026-01-28T15:06:02.015Z","repository":{"id":18797313,"uuid":"22011234","full_name":"addyosmani/critical-path-css-tools","owner":"addyosmani","description":"Tools to prioritize above-the-fold (critical-path) CSS","archived":false,"fork":false,"pushed_at":"2022-07-18T03:24:14.000Z","size":11,"stargazers_count":1162,"open_issues_count":5,"forks_count":48,"subscribers_count":46,"default_branch":"master","last_synced_at":"2026-01-17T05:52:54.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/addyosmani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-19T14:19:02.000Z","updated_at":"2026-01-16T14:18:39.000Z","dependencies_parsed_at":"2022-07-22T10:22:31.293Z","dependency_job_id":null,"html_url":"https://github.com/addyosmani/critical-path-css-tools","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/addyosmani/critical-path-css-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fcritical-path-css-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fcritical-path-css-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fcritical-path-css-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fcritical-path-css-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/addyosmani","download_url":"https://codeload.github.com/addyosmani/critical-path-css-tools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/addyosmani%2Fcritical-path-css-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28624341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T02:47:06.670Z","status":"ssl_error","status_checked_at":"2026-01-21T02:45:44.886Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:12:47.258Z","updated_at":"2026-01-28T15:06:02.000Z","avatar_url":"https://github.com/addyosmani.png","language":null,"funding_links":[],"categories":["Front-End Development","Technical","前端开发","Uncategorized","Front-end Development","Style","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","Others","others","Themed Directories","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["ramanihiteshc@gmail.com","Uncategorized","CSS","Misc","Updated more than a year ago"],"readme":"Critical-path (Above-the-fold) CSS Tools [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n==========================================\n\n\u003e Tools to help prioritize above-the-fold CSS\n\n### Prioritize above-the-fold content first.\n\nFor best performance, PageSpeed Insights [recommends](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent) inlining the critical (above-the-fold) CSS of your page directly into your HTML. This eliminates additional roundtrips and allows the browser to paint the above-fold experience to your user's screen sooner. The main idea is:\n\n* Determine the above-the-fold styles for a page and write them between `\u003cstyle\u003e` tags in the head.\n* Load all other stylesheets in the footer, ideally asynchronously.\n\nThe following is a list of tools to help generate, inline and report on critical-path CSS.\n\n## Node modules\n\n\n* [Penthouse](https://github.com/pocketjoso/penthouse) - by Jonas Ohlsson generates critical-path CSS\n* [Critical](https://github.com/addyosmani/critical) - by Addy Osmani generates \u0026 inlines critical-path CSS (uses Penthouse, [Oust](https://github.com/addyosmani/oust) and inline-styles)\n* [CriticalCSS](https://github.com/filamentgroup/criticalcss) - by FilamentGroup finds \u0026 outputs critical CSS\n\n\n## Server-side modules\n\n* [mod_pagespeed](https://github.com/pagespeed/mod_pagespeed) - Apache module for automatic PageSpeed optimization\n* [ngx_pagespeed](https://github.com/pagespeed/ngx_pagespeed) - Nginx module for automatic PageSpeed optimization\n\n## Grunt tasks\n\n* [grunt-penthouse](https://github.com/fatso83/grunt-penthouse)\n* [grunt-critical-css](https://github.com/filamentgroup/grunt-criticalcss)\n* [grunt-critical](https://github.com/bezoerb/grunt-critical)\n\n## CasperJS\n\n* [critical-css-casperjs](https://github.com/ibrennan/critical-css-casperjs) - CasperJS script to pull critical CSS information from pages\n\n## PhantomJS\n\n* [dr-css-inliner](https://github.com/drdk/dr-css-inliner) - PhantomJS script to inline above-the-fold CSS on a page.\n\n## Inline sources (styles, scripts)\n\n* [inline-styles](https://github.com/maxogden/inline-styles) - by Max Ogden, replaces `\u003clink\u003e` tags with inline `\u003cstyle\u003e` tags + inlines CSS url() calls with data URIs\n* [gulp-inline-source](https://github.com/fmal/gulp-inline-source) - by Filip Malinowski, replaces `\u003clink\u003e` tags with inline `\u003cstyle\u003e` tags, and replaces `\u003cscript src=\"\"\u003e` tags with their inline content\n* [inline-critical](https://github.com/bezoerb/inline-critical) - by Ben Zörb, inline critical path CSS and load existing stylesheets with `loadCSS`\n* [isomorphic-style-loader](https://github.com/kriasoft/isomorphic-style-loader/) for Webpack - 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.\n\n## Async load CSS\n\nAsync loading should be used to fetch the rest of your site-wide styles after you've inlined your critical-path CSS.\n\n* [loadCSS](https://github.com/filamentgroup/loadCSS) - loads CSS asynchronously using JS. [Research](https://gist.github.com/scottjehl/87176715419617ae6994) that led to this is also available.\n* [async \u0026 conditional loading](https://gist.github.com/matt-bailey/602b40c77a5d3381ff26) - POC script for loading CSS files asynchronously and conditionally based on body tag classes\n* [asyncLoader](https://github.com/n0mad01/asyncLoader) - async script/stylesheet loader\n* [basket.js](http://addyosmani.github.io/basket.js/) - async script/resource loader with support for localStorage caching. Can be [extended](https://github.com/andrewwakeling/basket-css-example) to load stylesheets.\n\nNote: The Guardian currently also cache their global styles into localStorage for subsequent page loads. More info in this [comment](https://gist.github.com/scottjehl/87176715419617ae6994).\n\n## Online tools\n\n* [Penthouse online](https://jonassebastianohlsson.com/criticalpathcssgenerator/)\n\n## Bookmarklets/Extensions\n\n* [Snippet](https://gist.github.com/PaulKinlan/6284142) by Paul Kinlan. Patrick Hamann has an [exercise](http://patrickhamann.com/workshops/performance/tasks/2_Critical_Path/2_2.html) using the snippet you can try out.\n* [Snippet](https://gist.github.com/scottjehl/b6129da04733e4e0f9a4) by Scott Jehl\n* [CSSVacuum](https://github.com/ndreckshage/CSSVacuum) by ndreckshage\n\n## Render-blocking issues detection\n\n* [PageSpeed Insights](https://developers.google.com/speed/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. \n* [PSI](https://github.com/addyosmani/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.\n* [PageSpeed Insights DevTools extension](https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=en) - Chrome extension for running PageSpeed tests from inside the browser.\n* [PageSpeed Insights Checker for mobile extension](https://chrome.google.com/webstore/detail/pagespeed-insights-checke/mkjmodmicmpjedhoekkmafdgpocdkbna?hl=en) - checks Mobile PageSpeed score for every page and gives you a handy preview.\n\n## Supplementary tools\n\n* [UnCSS](https://github.com/giakki/uncss) removes unused CSS from pages, allowing you to reduce the global CSS you may need to load in for your site. Tasks are available for [Grunt](https://github.com/addyosmani/grunt-uncss), [Gulp](https://github.com/ben-eb/gulp-uncss) and [other](https://addyosmani.com/blog/removing-unused-css/) build tools.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faddyosmani%2Fcritical-path-css-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faddyosmani%2Fcritical-path-css-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faddyosmani%2Fcritical-path-css-tools/lists"}