ECサイトの開発運用に必要になった技術メモ: 小さなCSSのインライン化で読み込み時間を短縮する

2014年11月20日木曜日

CSSのインライン化

小さなCSSに限っての話になりますが、外部ファイル化せずに、そのままHTML内に記述した方が、読み込み時間を短縮できます。

test.html

<html>
  <head>
   <link href="/css/home.css" media="all" rel="stylesheet" type="text/css">
  </head>
  ....

/css/home.css

p {
  font-size: 20px;   
}

test.html

<html>
  <head>
    <style type="text/css">
        .p {
          font-size: 20px;   
        }  
    </style>
  </head>
  ....

CSSのサイズと可読性にも影響してくるので一概にメリットだけとは思いませんが、とことんスピードを追求したい人は是非お試しください。