最近ブログの読み込みの速度が気になってます。
サイトの表示を早くする方法はいろんなところで見かけますが、ちょっとしたテクニックはいくつ知ってても損はないですよね。
今日はソースの記述の仕方を工夫してページの読み込みを高速化する方法をご紹介します！
目次
CSSの書き方を改善してページの読み込みを高速化させる方法
書き方を工夫するだけでページの読み込みを高速化することができます。
初心者でもすぐできることがいくつかありますので、是非実践してみてください。
CSSは右から左に読まれていることを理解する
これを初めて知ったときは衝撃でした。
たとえば「.entry-content ul li a」って書いてあったとします。
なんとなく「エントリーの記事内に書かれたリストの中のリンク」っていう風に捉えてくれるイメージですよね？
でも実際はまず「a」を読まれて、CSSファイル内の「すべてのaタグ」を一度読みに行きます。
その後、li⇒ul⇒.entry-contentの順に読まれていくので、4周ぐらいCSSファイル内をぐるぐる回るのです。
そりゃ遅くなるわ。
解決方法
極力id名やclass名を指定しましょう。
ブログの本文中のものは難しいので諦めるしかないですけど、ヘッダーナビゲーションとかサイドバーのような箇所では極力子孫セレクタを避けるようにした方がいいですね。
idやclassに要素名をつけると遅くなる
div#content {}
ul.navigation {}
という書き方は読み込みが遅くなるそうです。
実は以前に友人からこの書き方をすると早くなるって教わって一時期使いまくってたことがあります(^^;)
まさか逆効果だったとは…。
解決方法
素直にこういう記述をするべきですね。こう書いてもほぼ意味は同じなので。
#content {}
.navigation {}
子孫セレクタは極力避ける
子孫セレクタっていうのはこういうやつです。
#content .entry-content ul li a{color:#0088cc;}
ブログの本文に記述する場合はどうしょうもないことも多いですが、出来るだけ簡略化して書けるようにしたいですね。
解決方法
省けるところは省いて書きましょう。
たとえばさっきのソースを簡略化するならこんな具合。
.entry-content li a{color:#0088cc;}
リストにclass名付けられるなら
.list-style a{color:#0088cc;}
みたいな書き方がベストですね。
HTML5だと特に子孫セレクタを使ってしまいがちですが、articleやsectionなどにも直接id名やclass名つけておく方が高速化できますね。
リンク以外に:hoverを使うと遅くなる
リンクの「aタグ」以外に「:hover」を使うと遅くなるそうです。
僕は続きを読むボタンをカスタマイズした際に「span:hover」を使ってしまってました。
これはテーマを作る際に改善することにします。
解決方法
「a:hover」以外では擬似クラスのhoverを使わないようにしましょう。
無駄なソースがあると遅くなる
これは当然ですが、無駄なソースがいちいち読み込まれますので遅くなります。
解決方法
要らないソースは消しましょう。
WordPressでテーマを自作してない方などは特に、CSSの構造を把握されてないうちは慎重に消していってください。
ヘッダーの記述の仕方を工夫する
headタグ内にCSSとjavascriptを読み込むためのソースが記述されてますが、記述されている順番がぐちゃぐちゃだと遅くなります。
またCSSは＠importで書いておくと読み込みが遅くなります。
読み込みが早くなる記述方法があるので、WordPressの方はheader.phpをいじってみてください。
解決方法
CSS⇒javascriptの順番になるように並べて記述する。
＠importは使わない。
こんな感じです。
<head> <link href="style.css"> <link href="reset.css"> <script type="text/javascript" src="./js/jquery.js" charset="utf-8"></script> </head>
[追記] jQueryの場合もだいたい同じ
あおのうまさん(@uma_blue)から情報いただきましたので追記します。
jQueryの場合は条件を絞り込むほど高速化するそうです。
ただ、読み込む順番はCSSとは逆で左から読んでいくみたいですね。
CSSとの両立を考えると
- 極力id,class名をつけてあげる
- 子孫セレクタの使用を控えめにする
- 無駄な書き方を省いてあげる
そして極論になりますが、あまり深く考えすぎないようにするっていうことですかね。
最後に
ものすごい要約すると、無駄を省いた書き方をすることを心がけるっていうことですね。
他にもCSS Spriteとか、HTTPリクエストの数を減らすとか、プラグインで出来る読み込み高速化とかいろいろありますけど、また別の機会にご紹介しますね。
僕自身も皆さんに説明するにはまだまだ勉強不足なので、しっかり検証しながら書き進めていきます。