railsでCSSをpreloadさせる

stylesheet_link_tag に preload を付与する。

PageSpeedInsight のスコアアップのために
rails で CSS をプリロードさせてファーストビューのレンダリング速度をあげたい。

stylesheet_link_tag に media onload rel preload 属性を付与してあげる。

変更前.erb

<%= stylesheet_link_tag　'app_basic', media: 'all' %>

変更後.erb

<%= stylesheet_link_tag 'app_basic', media: 'all', onload: "this.onload=null;this.rel='stylesheet'", rel: 'preload', as: 'style' %>
<noscript><%= stylesheet_link_tag 'app_basic' %></noscript>

preload に対応していないブラウザがあるため、noscriptタグで通常のCSS読み込み処理を書いてあげれば完成。

Chromeの場合は設定から、javascriptを許可しないモードにすればデバッグできます。

参考