フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【メモ】レンダリングをブロックするCSSをどうにかする方法【暫定】

HEAD内にファーストビューで見える部分のCSSを書きつつ
閉じBODY付近に以下を。
Google先生が提案している方法なので問題ないと思う。

    <noscript id="deferred-styles">
    <!-- 読み込むCSSにあわせて適宜書き換え -->
    <%= stylesheet_link_tag "jumbo/bounenkai/style" %>
    <!-- ここまで -->
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>

今後、ウェブ プラットフォームで JavaScript を用いずに 「HTML Imports」 を使用して、レンダリングをブロックすることなくスタイルシートを読み込めるようになる予定です。

とのこと

[紹介元] CSSタグが付けられた新着投稿 – Qiita 【メモ】レンダリングをブロックするCSSをどうにかする方法【暫定】

コメント

記事に戻る

コメントを残す