CSS の非同期読み込みで Web サイト高速化

CSS はレンダリングをブロックする。

なので、CSS を非同期で読み込んでやれば、レンダリングのスピードは向上する。
最低でも、レンダリングまでの時間は短縮する。

ただ、CSS 全体を非同期で読み込むとレンダリングがガタガタになる。
まぁ、当たり前。

でも、ページ全体のレイアウトに影響が無い部分のCSSなら非同期でいいじゃん。

ページ全体のレイアウトに影響が無い部分ってのは、
例えば、

  • Web フォントを読み込むための CSS
  • Lightbox などのモーダル系の CSS
  • すでにサイズが決定してるブロック要素の中身
  • 描画への影響が少ない WordPress のプラグインで挿入される CSS
  • その他、ページの部品を生成してる程度の CSS

などなど。

当サイトでは、Web fonts と Lightbox で使用してる CSS は非同期で読み込んでる。

WordPress のプラグインで挿入される系の CSS については、
挿入された CSS をそのままコピーして、勝手に挿入される部分は、

wp_dequeue_style( '名前' );

で消しちゃえばいい（管理画面で OFF にできるなら、そっちの方がはやい）。

CSS を非同期で読み込む方法

ぶっちゃけて言えば、Javascript を使って非同期で読み込む。

やり方：其の１

Google Adsense や SNS のボタンが非同期で読み込まれるのと同じ方法。
つまり、動的にスタイルシートの link 要素 を追加してやる。

(function(){
    var n = document.createElement('link');
    n.async = true;
    n.defer = true;
    n.type = 'text/css';
    n.rel  = 'stylesheet';
    n.href = 'スタイルシートのURL';
    var s = document.getElementsByTagName('script');
    var c = s[s.length - 1];
    c.parentNode.insertBefore(n, c);
})(document);

やり方：其の２

HTML のヘッダー部分の、

<link rel="stylesheet" type="text/css" href="スタイルシートのURL" />

を

<link id="hoge" type="text/css" href="スタイルシートのURL" />

という書き方にしておいて、
後から、以下の javascript で rel="stylesheet" を追加しちゃう。

(function () {
    var n = document.getElementById('hoge');
    n.rel = 'stylesheet';
})();

ただし、このやり方の場合、

「link 要素に rel が無いよ？」っていう HTML 文法エラーになる。

でも、「其の１」のやり方より速度的には、少しだけ速い。
まぁ、文法エラーは気にするほどでもないので、其の２の方法でもいいと思う。

IT・ICT

Posted by るな