Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@addyosmani

addyosmani/critical-notes.md

Created August 2, 2016 15:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save addyosmani/2124b5dfb99da3c0740ff298dd212c26 to your computer and use it in GitHub Desktop.
Save addyosmani/2124b5dfb99da3c0740ff298dd212c26 to your computer and use it in GitHub Desktop.
Download ZIP
critical-across-site-with-slightly-different-pages.md
Raw
critical-notes.md

Problem: "Is there a nice pattern for using Critical via Gulp for CSS across a site with many pages which might be subtly different?"

The way I've tackled this in the past is breaking down the pages that might be slightly different into groups which each have their own Gulp task. For the sake of simplicity, we could have a set of pages that fall under red-theme, blue-theme etc. For each group, run critical.generate() against the set of URLs for the group (so, red-theme URLs) and allow it to inline the CSS for just that group. The benefit of thinking about this problem in a group for each task is if you need to apply additional customisations, config or build-time fixes per variation of page/theme, it's pretty trivial to do so. You then just run all of the critical group tasks near the end of your build and this should work.

@philhawksworth
Copy link

Thanks for this. Makes sense.

So you have Gulp tasks to pipe a group of html files into the critical.generate() task, or is there a nice way to use a glob as the source to inspect?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment