{"id":23430621,"url":"https://github.com/wheeyls/rails_critical_css_server","last_synced_at":"2025-04-12T23:07:49.283Z","repository":{"id":17041053,"uuid":"81043428","full_name":"wheeyls/rails_critical_css_server","owner":"wheeyls","description":"Client for critical-css-server. Eliminate render-blocking CSS in above-the-fold content.","archived":false,"fork":false,"pushed_at":"2023-03-08T19:41:21.000Z","size":55,"stargazers_count":13,"open_issues_count":13,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T23:07:28.375Z","etag":null,"topics":["above-the-fold","critical-css-server","critical-path","critical-styles","css","inline-assets","rails"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wheeyls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-06T03:19:14.000Z","updated_at":"2024-01-04T15:08:24.000Z","dependencies_parsed_at":"2024-11-19T05:01:11.531Z","dependency_job_id":null,"html_url":"https://github.com/wheeyls/rails_critical_css_server","commit_stats":{"total_commits":29,"total_committers":4,"mean_commits":7.25,"dds":0.4137931034482759,"last_synced_commit":"0dcb739439e8cfb648d2cd64a28af1cf5788054b"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Frails_critical_css_server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Frails_critical_css_server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Frails_critical_css_server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheeyls%2Frails_critical_css_server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wheeyls","download_url":"https://codeload.github.com/wheeyls/rails_critical_css_server/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643004,"owners_count":21138355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["above-the-fold","critical-css-server","critical-path","critical-styles","css","inline-assets","rails"],"created_at":"2024-12-23T09:39:03.866Z","updated_at":"2025-04-12T23:07:49.251Z","avatar_url":"https://github.com/wheeyls.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RailsCriticalCssServer\n## Eliminate render-blocking CSS in above-the-fold content in your Rails app\nIf you've run [Google Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/) on your web app, you might have seen this message:\n\n\u003e *Eliminate render-blocking JavaScript and CSS in above-the-fold content*\n\u003e\n\u003e Your page has blocking CSS resources. This causes a delay in rendering your page.\n\u003e None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.\n\nThis is a Ruby on Rails client for [Critical CSS Server](https://github.com/wheeyls/critical-css-server), designed to solve this problem for you outside of your build process.\n\n## Installation\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'rails_critical_css_server'\n```\n\nAnd then execute:\n```bash\n$ bundle\n```\n\nOr install it yourself as:\n```bash\n$ gem install rails_critical_css_server\n```\n\n## Usage\n\nIn your application layout, just wrap your CSS in a call to `Rewrite`:\n\n    \u003c%= RailsCriticalCssServer::Rewrite.call self do %\u003e\n      \u003c%= stylesheet_link_tag \"application\" %\u003e\n    \u003c% end %\u003e\n\nEvery time a new controller action is rendered, the server will begin to compile the bare-minimum CSS required to\nrender the above the fold content on that page. Eventually, once the CSS is available, the critical portion will\nbe injected, and the remainder of your CSS will be lazy-loaded with JavaScript.\n\n#### Before CSS is ready:\n\nThe header will be rendered normally:\n\n    \u003clink rel=\"stylesheet\" href=\"/assets/application.css\" /\u003e\n\n#### After CSS is compiled:\n\n    \u003cstyle\u003e/* inline css rules injected here... */\u003c/style\u003e\n    \u003cscript\u003e// loadCSS injected here...\u003c/script\u003e\n    \u003cscript\u003eloadCSS(\"/assets/application.css\");\u003c/script\u003e\n    \u003cnoscript\u003e\n      \u003clink rel=\"stylesheet\" href=\"/assets/application.css\" /\u003e\n    \u003c/noscript\u003e\n\n#### Busting the Cache\n\nEach time CSS is compile, it is cached using the cache key: `[controller, action, version]`.\n\nBy default, we used Heroku's environment variable `HEROKU_RELEASE_VERSION` to bust the version cache. This is available\nthrough the [Heroku Labs: Dyno Metadata](https://devcenter.heroku.com/articles/dyno-metadata).\n\nIf this doesn't work for you, set the `version` flag in config to some other deploy-unique id, so that new CSS can be\ngenerated for you each time you change your pages.\n\n## Configuration Options\n\nIn `config/initializers/critical_css_server.rb`:\n\n    RailsCriticalCssServer.config do |c|\n      c.host = ENV['CRITICAL_CSS_SERVER_URL'] # URL of Critical CSS Server\n      c.auth_token = ENV['CRITICAL_CSS_SERVER_AUTH_TOKEN'] # Credentials for Critical CSS Server\n      c.timeout = 0.05 # Timeout when requested critical CSS in layout.\n      c.version = ENV['HEROKU_RELEASE_VERSION'] # Unique id for the current deploy. Used to bust the cache after changes are made\n      c.width = 900 # width of viewport to optimize CSS for\n      c.height = 1200 # height of viewport to optimize CSS for\n      c.force_selectors = [] # force individual selectors to be included, even if they are not rendered on the first pass. Useful for JavaScript-enabled styles.\n    end\n\n## Under the hood:\n\n* [CriticalCSS](https://github.com/filamentgroup/criticalCSS) - used to generate CSS rules\n* [loadCSS](https://github.com/filamentgroup/loadCSS) - defer loading of remainder of CSS\n\n## License\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheeyls%2Frails_critical_css_server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwheeyls%2Frails_critical_css_server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheeyls%2Frails_critical_css_server/lists"}