Optimizing single page Middleman website

Single page website is even better when user downloads complete content in one HTTP request. No additional requests for CSS and JavaScript files. Middleman handles file-size optimization very well, so the only thing you must do is inlining assets. All code examples are taken from API documentation built in Slate.

Inlining assets in layout

<style media="screen"><%= sprockets.find_asset('screen.css').to_s %></style>
<style media="print"><%= sprockets.find_asset('print.css').to_s %></style>
<script><%= sprockets.find_asset('all.js').to_s %></script>

Minifying content

Use option inline to minify assets in html tags. If possible I would also gzip html file. In my case gzip saved 200kB when I activated it for API documentation.

configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
  activate :minify_html
  activate :asset_hash
  activate :gzip
end

Ignoring assets

Don't forget to ignore assets during build process. It's waste of time to build assets that are inlined. You can ignore assets directories in config.rb or use ignored directories for assets. I prefer the latter.

# ignore (public) assets directory
set :css_dir, 'assets/css'
set :js_dir, 'assets/js'
ignore 'assets/*'

# OR use excluded assets directories
set :css_dir, 'assets/_css'
set :js_dir, 'assets/_js'