CSSの読み込みを遅延させるJavaScriptコード

JavaScriptで外部ファイルの読み込みを遅延させる

PageSpeed Insightsでサイトの速度チェックをすると、次のような提案が出てくることがあります。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

これは、headで読み込んだJavaScriptやCSSのファイルがコンテンツの表示を遅らせているためです。

ファーストビューに影響が出ないCSSは、コンテンツの描画後に読み込ませた方が良いでしょう。

ということで、外部CSSを読み込むタイミングを遅らせて、コンテンツの表示を速くしました。

当サイトではメインのCSSをインライン化しているのですが、外部ファイルも読み込んでいます。

使っているのは、Google FontsとFont AwesomeのCSSです。

導入方法

あらかじめGoogle FontsとFont Awesomeを読み込むコードをheadから削除します。

はてなブログでGoogleフォントやFont Awesomeのアイコンを使っている場合、「設定」→「詳細設定」→「headに要素を追加」の所に読み込みコードを記述していると思います。

 

Font Awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Google Fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">

 

これを削除して、bodyの直前に以下のJavaScriptを記述します。はてなブログだったら、フッターに記述します。

<script>
  var fontawesome = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
  var googlefont = "https://fonts.googleapis.com/css?family=Open+Sans:400,600,800";
  function cb(href) {
    var link = document.createElement('link'); link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) {
    raf(function (){
      cb(fontawesome);cb(googlefont);
    });
  } else {
    window.addEventListener('load', function(){
      cb(fontawesome);cb(googlefont);
    });
  }
</script>

コードはこちらを参考にしました。

Optimize CSS Delivery  |  PageSpeed Insights  |  Google Developers

これで外部ファイルの読み込みを遅延させることができます。

ただ、Google FontsとFont Awesomeがページに反映されるまで少しだけタイムラグが発生します。

といっても、フォントやアイコンは真っ先に表示されないと困るものでもないので、当ブログで導入してみました。

 

はてなブログ向けにこのような記事もあるので、あわせて読んでみるといいでしょう。

www.naenote.net

 

他にもこんな記事書いてます。

必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG

はてなブログの読み込みを速くするために行ってきたことまとめ – SHIROMAG

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ – SHIROMAG

超初心者のためのHTML・CSS入門講座 – SHIROMAG