Critical css in rails

Introductie

• Vertraging bij laden van pagina
  • Laden, parsen en uitvoeren van CSS
  • Calculeren van de layout
• Critical css
  • Minimum aantal blokkerende CSS
  • Wat de gebruiker als eerste ziet (vouw)

Werking

• Twee CSS bestanden
  • Inline CSS voor boven de vouw
  • Overige CSS asynchroon
• Automatiseren

critical-path-css-rails

• Asynchrone CSS: loadcss-rails
• Critical CSS: Penthouse
• Rails implementatie

loadcss-rails

gem 'loadcss-rails', '~> 2.0.1'

//= require loadCSS
//= require cssrelpreload
//= require onloadCSS


<link rel="preload" href="<%= stylesheet_path('application') %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<%= stylesheet_path('application') %>"></noscript>

Penthouse

• Genereren van critical CSS
• Invoeren van alle CSS
• puppeteer genereert CSS via chromium:headless

critical-path-css-rails

gem 'critical-path-css-rails', '~> 3.1.0'

rails generate critical_path_css:install

config/critical_path_css.yml
lib/tasks/critical_path_css.rake

Genereren

• Draaiende server en CSS beschikbaar

rake assets:precompile

<style>
    <%= CriticalPathCss.fetch(request.path) %>
</style>

DEMO