WEBサイトを作成する上において避けて通れないのがCSSになります。今回はCSSの読込み速度という点について調べてみたので記述していきます。

外部で読み込むか内部で記述するか

CSSは外部で読み込むパターンと内部に記述するパターンがあります。

外部で読み込む例

<title>logw-ログゥ 個人的な記録用-</title>
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/reset.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/header.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/sidebar.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/contents.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/form.css">

内部で読み込む例

<title>logw-ログゥ 個人的な記録用-</title>
<style type="stylesheet"><!--
body,h1,h2,h3,p,ul,ol,table,th,td,dl,dt,dd,button,fieldset,form,input,label,legend,select,textarea{
margin:0;
padding:0;
}
--></style>

こんな感じになります。内部のコードは一部になります。このケースは一概には言えないみたいですケースバイケースです。
今回のケースだと内部の方が早いかもしれません。
外部で読み込む場合はHTTPリクエスト数が増えます。

しかし、内部に大量のCSS（100行〜1000行近く）書くと今度は外部の読み込みの方が早いと思います。ケースバイケースというのは状況によって変わってくると思うので適材適所して頂ければと思います。

まとめてファイルを読み込む方が早い

これは当たり前の事かもしれません。例を簡単にあげます。

CSSの後JavaScriptを読み込む

<title>logw-ログゥ 個人的な記録用-</title>
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/reset.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/header.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/sidebar.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/contents.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/form.css">
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/jquery-1.8.2.min.js"></script>
<script language="javascript" src="https://www.logw.jp/wp-content/themes/design/js/slides.min.jquery.js" type="text/javascript"></script>
<script language="javascript" src="https://www.logw.jp/wp-content/themes/design/js/randomimage.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/feedek.js"></script>
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/snowfall.min.jquery.js"></script>

CSSの後JavaScriptを読み込み、その後CSSを読み込む

<title>logw-ログゥ 個人的な記録用-</title>
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/reset.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/header.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/sidebar.css">
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/jquery-1.8.2.min.js"></script>
<script language="javascript" src="https://www.logw.jp/wp-content/themes/design/js/slides.min.jquery.js" type="text/javascript"></script>
<script language="javascript" src="https://www.logw.jp/wp-content/themes/design/js/randomimage.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/feedek.js"></script>
<script type="text/javascript" src="https://www.logw.jp/wp-content/themes/design/js/snowfall.min.jquery.js"></script>
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/contents.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/form.css">

この場合は上の方が早いです。読み込む順番を考えると上はCSSの後JavaScriptを読むので2回(CSS、JavaScript)ですみますが、下のケースは3回読み込むことになります。（CSS、JavaScript、CSS）となります。読む込むファイルは纏めておいた方がよいです。

※CSSは同時に読み込めますがJavaScriptは同時には読み込めないので1つ1つで読み込みます。
※例の場合はCSSを1回、JavaScriptを5回読み込む事になっています。

@importは使わない方が早い？

logwでは使っていませんが、@importを使って読み込む方法があります。

@importで読み込む

<title>logw-ログゥ 個人的な記録用-</title>
<link href="https://www.logw.jp/wp-content/themes/design/css/import.css" rel="stylesheet" />

@importの中身

@import "reset.css";
@import "header.css";
@import "sidebar.css";
@import "header.css";
@import "contents.css";
@import "form.css";

@importを使わないケース

<title>logw-ログゥ 個人的な記録用-</title>
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/reset.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/header.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/sidebar.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/contents.css">
<link rel="stylesheet" href="https://www.logw.jp/wp-content/themes/design/css/form.css">

この場合は、@importを使わないケースの方が早いです。@importを読み込むと中にCSSファイルがあります。その中のファイルは1つ1つ読み込むため、ファイル数分読み込みが発生します。@importを使わない場合は1つのまとまりとして読み込むため、1回分です見ます。
計算でいえば、1つのCSSを読み込むのに0.5秒かかった場合は@importを使うと0.5秒×6=3秒になります。@importを使わない場合は0.5秒となります。使わないケースの方が早いです。

CSSもコードは短い方が良い

今までは読み込む場合の事を書いていましたが、今回は中身の面で少し書いてみます。以下のようなソースコードがあったとします。

<header>
<h1 class="title">ConoHaのVPSのセミナーに行ってきました！</h1>
<div class="blog_info">
<!-- blog_info_start -->
<ul>
	<li>2013年11月05日</li>
</ul>
</div>
<!-- blog_info_end --></header>

こんなHTMLがあったとします。ここでは簡単にCSSを追加します。

シンプルに書いた例

h1{
font-size:1.5em;
font-weight:bold;
}

.blog_info{
font-size: 0.8em;
margin-bottom: 0.5em;
}

ul li{
list-style-type:none;
}

headerから書いた例

header h1{
font-size:1.5em;
font-weight:bold;
}

header .blog_info{
font-size: 0.8em;
margin-bottom: 0.5em;
}

header .blog_info ul li{
list-style-type:none;
}

違いはそんなにありません。この場合は上のシンプルに書いた例のほうが読み込みは早いです。CSSのコードは右から左へ読み込むため、セレクタが長いと読み込み時間がかかります。セレクタが短い方が読み込みは早いです。

備考

CSSのセレクタが長いより短い方が読み込みは早いですが、classタグを使う場合は安易にclassだけで設定すると後々コードが増えてきたときに運用面での不具合やclassだけ書いているため上書きが難しかったりします。読み込みを早くするに拘りセレクタをクラス名やID名だけにするのは間違いだと思います。

参考サイト