FOUC対策：ページ読み込み際に一瞬表示が崩れるのを防ぐ方法

FOUC(Flash Of Unstyled Content)：外部のCSSが呼ばれる前に一瞬スタイルが適用されてないページが表示される現象

トップページを表示する際に、一瞬でも崩れて見えるのはかなりストレスだったので対策方法を調べてみたら、対策方法は意外と簡単だった。

  <script>
    document.documentElement.className = 'no-fouc';
    $(document).ready(function () {
      $('.no-fouc').removeClass('no-fouc');
    })
  </script>

.no-fouc { display: none; }

これだけで、求める挙動になってくれたがテストしたページがすごく小さかったので大きめのページでも問題ないのか確認してみないと、、