Skip to content

Commit 0159f27

Browse files
Add README
1 parent 3799206 commit 0159f27

File tree

1 file changed

+97
-0
lines changed

1 file changed

+97
-0
lines changed

README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# critical-path-css-rails
2+
3+
Only load the CSS you need for the initial viewport in Rails!
4+
5+
This gem give you the ability to load only the CSS you *need* on an initial page view. This gives you blazin' fast rending as there's no initial network call to grab your application's CSS.
6+
7+
This gem assumes that you'll load the rest of the CSS asyncronously. At the moment, the suggested way is to use the [loadcss-rails](https://github.com/michael-misshore/loadcss-rails) gem.
8+
9+
This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penthouse](https://github.com/pocketjoso/penthouse) to generate the critical CSS.
10+
11+
12+
## Installation
13+
14+
Add `critical-path-css-rails` to your Gemfile:
15+
16+
```
17+
gem 'critical-path-css-rails', '~> 0.1.0'
18+
```
19+
20+
Download and install by running:
21+
22+
```
23+
bundle install
24+
```
25+
26+
Create the rake task that will generate your critical CSS
27+
28+
```
29+
rails generator critical_path_css:install
30+
```
31+
32+
This adds the following file:
33+
34+
* `lib/tasks/critical_path_css.rake`
35+
36+
37+
## Usage
38+
39+
First, you'll need to configue a few variables in the rake task: `lib/tasks/critical_path_css.rake`
40+
41+
* `@base_url`: Change the url's here to match your Production and Development base URL, respectively.
42+
* `@routes`: List the routes that you would like to generate the critical CSS for. (i.e. /resources, /resources/show/1, etc.)
43+
* `@main_css_path`: Inside of the generate task, you'll need to define the path to the application's main CSS. The gem assumes your CSS lives in `RAILS_ROOT/public`. If your main CSS file is in `RAILS_ROOT/public/assets/main.css`, you would set the variable to `/assets/main.css`.
44+
45+
46+
Before generating the CSS, ensure that your application is running (viewable from a browser) and the main CSS file exists. Then in a separate tab, run the rake task to generate the critical CSS.
47+
48+
If your main CSS file does not already exist, and you are using the Asset Pipeline, generate the main CSS file.
49+
```
50+
rake assets:precompile
51+
```
52+
Generate the critical path CSS:
53+
```
54+
rake critical_path_css:generate
55+
```
56+
57+
58+
To load the generated critical CSS into your layout, in the head tag, insert:
59+
60+
```html
61+
<style>
62+
<%= CriticalPathCss.fetch(request.path) %>
63+
</style>
64+
```
65+
66+
A simple example using loadcss-rails looks like:
67+
68+
```html
69+
<style>
70+
<%= CriticalPathCss.fetch(request.path) %>
71+
</style>
72+
<script>
73+
loadCSS("<%= stylesheet_path('application') %>");
74+
</script>
75+
<noscript>
76+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
77+
</noscript>
78+
```
79+
80+
81+
## Versions
82+
83+
The critical-path-css-rails gem follows these version guidelines:
84+
85+
```
86+
patch version bump = updates to critical-path-css-rails and patch-level updates to Penthouse and PhantomJS
87+
minor version bump = minor-level updates to critical-path-css-rails, Penthouse, and PhantomJS
88+
major version bump = major-level updates to critical-path-css-rails, Penthouse, PhantomJS, and updates to Rails which may be backwards-incompatible
89+
```
90+
91+
## Contributing
92+
93+
Feel free to open an issue ticket if you find something that could be improved. A couple notes:
94+
95+
* If the Penthouse.js script is outdated (i.e. maybe a new version of Penthouse.js was released yesterday), feel free to open an issue and prod us to get that thing updated. However, for security reasons, we won't be accepting pull requests with updated Penthouse.js script.
96+
97+
Copyright Mudbug Media and Michael Misshore, released under the MIT License.

0 commit comments

Comments
 (0)