You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+46-7Lines changed: 46 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -8,13 +8,16 @@ This gem assumes that you'll load the rest of the CSS asyncronously. At the mome
8
8
9
9
This gem uses [PhantomJS](https://github.com/colszowka/phantomjs-gem) and [Penthouse](https://github.com/pocketjoso/penthouse) to generate the critical CSS.
10
10
11
+
## Update
12
+
13
+
Version 0.3.0 is not compatible with previous versions. Please read the Upgrading from Previous Versions section below for more information.
11
14
12
15
## Installation
13
16
14
17
Add `critical-path-css-rails` to your Gemfile:
15
18
16
19
```
17
-
gem 'critical-path-css-rails', '~> 0.2.0'
20
+
gem 'critical-path-css-rails', '~> 0.3.0'
18
21
```
19
22
20
23
Download and install by running:
@@ -65,20 +68,56 @@ To load the generated critical CSS into your layout, in the head tag, insert:
65
68
</style>
66
69
```
67
70
68
-
A simple example using loadcss-rails looks like:
71
+
A simple example using [loadcss-rails](https://github.com/michael-misshore/loadcss-rails) looks like:
### Route-level Control of CSS Generation and Removal
84
+
85
+
CriticalPathCss exposes some methods to give the user more control over the generation of Critical CSS and managment of the CSS cache:
86
+
87
+
```ruby
88
+
CriticalPathCss.generate route # Generates the critical path CSS for the given route (relative path)
89
+
90
+
CriticalPathCss.generate_all # Generates critical CSS for all routes in critical_path_css.yml
91
+
92
+
CriticalPathCss.clear route # Removes the CSS for the given route from the cache
93
+
94
+
CriticalPathCss.clear_matched routes # Removes the CSS for the matched routes from the cache
95
+
96
+
CriticalPathCss.clear_all # Clears all CSS from the cache
97
+
```
98
+
99
+
In addition to the `critical_path_css:generate` rake task described above, you also have access to task which clears the CSS cache:
100
+
101
+
```
102
+
rake critical_path_css:clear_all
103
+
```
104
+
105
+
Careful use of these methods allows the developer to generate critical path CSS dynamically within the app. The user should strongly consider using a [background job](http://edgeguides.rubyonrails.org/active_job_basics.html) when generating CSS in order to avoid tying up a rails thread. The `generate` method will send a GET request to your server which could cause infinite recursion if the developer is not careful.
106
+
107
+
A user can use these methods to [dynamically generate critical path CSS](https://gist.github.com/taranda/1597e97ccf24c978b59aef9249666c77) without using the `rake critical_path_css:generate` rake task and without hardcoding the application's routes into `config/critical_path_css.yml`. See [this Gist](https://gist.github.com/taranda/1597e97ccf24c978b59aef9249666c77) for an example of such an implementation.
108
+
109
+
## Upgrading from Previous Versions
110
+
111
+
The latest version of Critcal Path CSS Rails changes the functionality of the `generate` method. In past versions,
112
+
`generate` would produce CSS for all of the routes listed in `config/critical_path_css.yml`. This functionality has been replaced by the `generate_all` method, and `generate` will only produce CSS for one route.
113
+
114
+
Developers upgrading from versions prior to 0.3.0 will need to replace `CriticalPathCss:generate` with `CriticalPathCss:generate_all` throughout their codebase. One file that will need updating is `lib/tasks/critical_path_css.rake`. Users can upgrade this file automatically by running:
115
+
116
+
```prompt
117
+
rails generate critical_path_css:install
118
+
```
119
+
120
+
Answer 'Y' when prompted to overwrite `critical_path_css.rake`. However, overwriting `critical_path_css.yml` is not necessary and not recommended.
0 commit comments