Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8664

railsでCSSをpreloadさせる

$
0
0
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を許可しないモードにすればデバッグできます。 参考

Viewing all articles
Browse latest Browse all 8664

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>