Sebastian Kessler herrkessler

Dynamically Add Critical CSS to Your Rails App

Optimizing the delivery of CSS is one way to improve user experience, load speed and SEO of your web app. This involves determining the "critical path CSS" and embeding it into the html of your page. The rest of the CSS for the site is loaded asynchronously so it does not block the rendering of your "above the fold" content. This Gist will show you how to dynamically generate critical path CSS for your Rails app.

In this example we will use the mudbugmedia/critical-path-css gem.

Prerequisites

You will need to set up caching and Active Job in your Rails app. I recommend using a thread-safe background job manager like resque.

	--skip-active-record
	--skip-test-unit
	--skip-system-test
	--skip-turbolinks
	--skip-spring
	--skip-keeps
	--skip-coffee
	--skip-action-cable
	--skip-action-mailer
	--skip-listen

	# Ruby on Rails Development Environment
	FROM ruby:2.5.0

	# Set up Linux
	RUN apt-get update
	RUN apt-get install -y build-essential inotify-tools libpq-dev nodejs postgresql-client

	WORKDIR /app
	EXPOSE 3000

	a = (1..2).to_a
	b = (1..7).to_a
	c = (1..144).to_a
	d = (1..37).to_a
	e = (1..28).to_a
	f = (1..12).to_a
	g = (1..16).to_a

	result = Array(Array(Int32)).new
	Array.each_product([a, b, c, d, e, f, g]) do \|x\|