Q&A
気になったので質問なのですが、CSSを非同期で読み込む理由は何でしょうか？
RailsでCSSの非同期読み込みを行いたいのですが、
<link_rel>の書き方なら
<link_rel="preload" href="",as="style">
や
<link rel="stylesheet" href="/" media="print" onload="this.media='all'">
などが見られたのですが、これをRailsの
<%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload' %>
でかく場合どのように書き換えたらよいのでしょうか？
<%= stylesheet_link_tag 'application',media: 'print','data-turbolinks-track': 'preload' %>
などで非同期で読み込めますか？
教えて頂けると幸いです。
追記CSS
(header.scss)
#nav-drawer {position: relative;float: right;margin-right: 25px; .nav-unshown {display:none;} #nav-open {display: inline-block;width: 30px;height: 40px;vertical-align: middle;} #nav-open span, #nav-open span:before, #nav-open span:after {position: absolute;height: 3.1px;width: 3em; border-radius: 3px; background: rgb(255, 255, 255); display: block; content: ''; cursor: pointer; margin-top: 10px;} #nav-open span:before { bottom: -8px;} #nav-open span:after {bottom: -16px;} #nav-close {display: none;position: fixed;z-index: 99;top: 0;left: 0;width: 100%;height: 100%;background: black;opacity: 0;transition: .3s ease-in-out;} #nav-content {overflow: auto;position: fixed; top: 0; left: 0; z-index: 9999;width: 90%;max-width: 430px;height: 100%;background: #fff; transition: .3s ease-in-out;-webkit-transform: translateX(-105%);transform: translateX(-105%); .footerpolicy{font-weight: bold;border-top: 2px solid rgb(19, 18, 18);} .footerlogo{height:300px;background-color: rgb(43, 42, 42);text-align: center; h2{font-size: 20px;padding-top: 19px;line-height:100px;} p{font-size: 6px;}} .coming-soon{margin: 0;padding:0; h4{font-size: 1.8em;margin: 0;width: 100%;display: block;text-align: center;height: 9em;line-height:9em;background-color: rgb(20, 19, 19);color: white; img{ padding-left:1px;margin-bottom: 3px;}}} p{width: 100%;height: 6em;margin-top: 0;margin-bottom: 0;font-size: 1.5em;line-height: 6em;letter-spacing: 4px; a{color: rgb(43, 41, 41);width: 100%;display: block;padding-left: 2em;} a:hover{background-color:#2b2929; color:white;} img{margin:0;padding:0;vertical-align:middle;} span{ font-weight:bold;vertical-align:middle; padding-left:4%;}}} #nav-input:checked ~ #nav-close {display: block;opacity: .5;} #nav-input:checked ~ #nav-content {-webkit-transform: translateX(0%);transform: translateX(0%);/*中身を表示（右へスライド）*/box-shadow: 2px 2px 23px 3px rgba(68, 66, 66, 0.7);} #nav-content::-webkit-scrollbar { width: 5px;} #nav-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.973); border-radius: 10px;} #nav-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.877);}}}}
<!DOCTYPE html> <html> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <title>Volvordnews</title> <style></style> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <meta name="theme-color" content="#323a47"> <meta name="description" content="/" /> <meta property="og:url" content= "https://www.volvordnews.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content= "volvord" /> <meta property="og:description" content= "/" /> <meta property="og:site_name" content="volvordnews" /> <%# <meta property="og:image" content="<%= asset_url('volvordnews.png')%> <meta property="og:image" content='http://www.volvordnews.com/assets/volvordnews.png' /> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:site" content="@mbaby__8"/> <meta name="twitter:title" content="volvordnews"/> <meta name="twitter:description" content="View the album on Flickr." /> <meta name="twitter:image" content="<%= asset_url('volvordnews.png')%>"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <meta property="fb:app_id" content="250609959307951" /> <meta name="apple-mobile-web-app-title" content="volvordnews"> <%# <%= favicon_link_tag '/volvord-logo-3-true.png' %> <%= favicon_link_tag('favicon.ico') %> <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-touch-icon57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-touch-icon60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-touch-icon72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-touch-icon76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-touch-icon114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-touch-icon120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-touch-icon144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-touch-icon152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon180.png"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <%# <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script> %> <script data-ad-client="ca-pub-1052638481967815" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> </head> <body id="<%= controller.controller_name %>"> <div id="container"> <header><%= render "shared/header" %></header> <aside><%= render "shared/sidebar" %></aside> <main><%= yield %></main> </div> </body> </html>
サイトの表示速度を上げたいのと、ページを表示したときにハンバーガーメニューとメニューバーの内容が一瞬クリックしていないのに表示されてしまうので、非同期にしようかと。
サイトの表示速度をあげるためにCSSを非同期で読み込むというのは、よほど長いページで、かつ、非効率なCSSを書いていない限り、期待したほどの効果がないかと思います。
それより > ページを表示したときにハンバーガーメニューとメニューバーの内容が一瞬クリックしていないのに表示されてしまうというところへのアプローチが必要かと思います。
これはそんなに難しくないはずなのでJSと、該当するCSSをご提示いただければ確認しますよ。
ありがとうございます。
ハンバーガーメニューのCSS追記させてもらいました。
jsなしでCSSのみで書いてあります。
ボックスにチェックが入ったか入っていないかで表示、非表示させていた気がします。
追加頂いたCSSを含むファイル名と、application.html.erbを追記いただけないでしょうか？
追記しました。
CSSを見た限りでは問題ないような気がします。
事前にCSSを読み込まれている＝header.scssがstylesheet_link_tagで読み込まれている状態であれば、
> 一瞬クリックしていないのに表示されてしまう
のような動作はしないはずです。
この動作から考えられるのは、
①js側でなにかしている
②CSSの読み込みが順序が遅い
といったことが考えられるのでもう一度確認いただくとよいかと思います。
また表示速度の件ですが
Turbolinksを利用しているのであれば、jQueryはCDNで読み込むと効果を実感しにくいです。
またjQueryのバージョンは理由がなければ3系にしたほうがよいです。
fontawesomeやMaterialIconなどもCDNを利用せずに実装することをおすすめします。
例えば、icomoonなどでダウンロードした画像を表示するなどの工夫が必要になるかと思います。
ありがとうございます！
これから試してみます。
ごめんなさい。テストしたら上記コメントは間違っていました。
jQueryやfontawesomeなどはCDNで利用しても、サブセットとしてもあまり変わらないです。
もし修正をかけていたら本当に申し訳ないです。
大丈夫です！
わざわざありがとうございます。
あなたの回答
tips
プレビュー
