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

CSS スピードアップ

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

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

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

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

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

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

などなど。

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

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

wp_dequeue_style( '名前' );

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

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

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

やり方:其の1

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);

やり方:其の2

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 文法エラーになる。

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

IT・ICT

Posted by るな