【CSS/JavaScript】CSS/JavaScript高速化のためのまとめ

読了: 約 8 分

現在、現職の制作会社でマークアップと簡単なJavaScriptを仕事で行う中、最近機会があって、某ヒカリエに所属するフロントエンドの方と話しをした際
もっとスピードを意識した方が良いなと個人的に感じたのでその辺りを纏めておきます。

photo credit: Express Monorail via photopin cc

概要

1 CSSの高速化について
2 4．JavaScript高速化について
- 2.1 Google I/O 2012発 JavaScript高速化Tips集の日本語訳
- 2.2 jQueryの高速化について
3 5．JavaScript高速化のためのTips
- 3.1 ツール
- 3.2 書き方について
4 6．他ページ高速化についての参考記事
- 4.1 ページ高速化についてのサーバー側の設定
- 4.2 HTML関連のページ最適化

CSSの高速化について

CSSの高速化ですが、色々な角度からアプローチというか見なければなりませんよね。
ざっと挙げて行きたいと思います。

１．CSS Spriteの使用

⇒ text-indentは使用しないりーフィーラングリッジ法を使用する事。

スマートフォンでは特に重要
前記事でも挙げましたが、サイバーエージェントのAmeba、DeNAのmobageは凄く参考になります。
Spriteで表示させた時のHTMLの構造や、他のCSSのプロパティ等学ぶ事が多いですね。
Amebaはアイコンを使うような構造には、下記のように記述して、class=”i”
のi:beforeセレクタに、content:”R”;等として、その中にあるR自体を独自に設けてた、
Amebafontというもので違う文字(画像のように見えるもの)に置換しています。
または、画像の場合は通常のスプライトで画像置換しています。

<span class="i"></span>テキスト<span class="r"></span>

２．CSSのセレクタを長くしない事

⇒ CSSのセレクタは右から左へ読みこまれてしまうから。

下記の様なCSSのソースがあった場合、liからul、そして親要素の#mainと呼ばれるので3段階を経なければいけません。
さらに、たまにみるのが、一番外のdiv#containerやdiv#wrapとかから書いているパターン。
要素名から書くのも完全に無駄なのでやめましょう。

#main ul li{
  //
}

・ウェブページ高速化に効果的なCSSセレクタ

※上記を読んでいて、鋭い方は分かるかもしれませんが、liから読まれるという事は全てのliから読まれ始めます。
グローバルナビ、サイドバー、フッター、時にはパンくず等良く使われますよね。
ただ、liだと全てのものを読んだ後に親を探しにいくため、遅くなってしまいます。なので、liにはclassかidを振った方が良さそうです。
あくまで、理想論であり、HTMLのソースが汚くなってしまうので、そこは考えようですね。

コーディングは宗教戦争である

誰かが残した名言だと思います笑

・CSSセレクタの高速化の話し
・jQueryを高速に使うCSSセレクタの書き方

3．3つのアプローチが実は必要

１．サーバー環境
２．クライアント環境
３．ウェブページに表示される構成要素、コンテンツ

Webサイトの表示高速化に必要な3種類のチューンアップ要素

大変参考になる記事を見つけたためご紹介
ウェブページの高速化のために読んでおきたいサイトのまとめ

HTTPリクエスト数を減らすというのは、上記しているCSS Sprite関連なのですが、
他のサーバー環境やApache、.htaccessの設定等参考になる事も多いです。

4．JavaScript高速化について

・jQueryの高速化に関するまとめ
⇒個人的にjQueryは結構使うので勉強になりました。
特にDOM操作に関する所で、prepend(),append(),after()等は重くなるから使わないほうが良いという事。
実際使ってどの位重くなるのか、スピードテストしていないのでわかりませんが、この辺も余力があれば追記していきます。

※生のJavaScriptとjQueryでjQueryの早いという事象があれば、そちらの方が良いかと思います。

上記記事の原文で、参考コードも載っているのでおススメの記事
・
10 Ways to Instantly Increase Your jQuery Performance

・JavaScriptを高速化する6つのテクニック

・javascriptの高速化テク
Tips的な感じで参考のコードも書かれているので良いですね。

・javascript高速化のポイント12
７．ドット演算を減らす。また、DOMのproperty, attributeへのアクセスを減らしてキャッシュする。
見た目も綺麗になりますし、こちらのほうが良いですね。

・一行で IE の JavaScript を高速化する方法
amachang氏のブログから、こんな書き方あったんですね！
以下の一行をすべての JavaScript の前に読み込む

/*@cc_on _d=document;eval('var document=_d')@*/

この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。
らしいです。凄い。

ただ、創っているモノによっては使えるものと使えない物あるようなのでご注意を。

Google I/O 2012発 JavaScript高速化Tips集の日本語訳

ブクマ必須ですね！
JavaScriptのパフォーマンスを上げる13のテクニック(Google I/O 2012)
Google I/O 2012発 JavaScript高速化Tips集の日本語訳

動画はこちら

jQueryの高速化について

最近ではデザイナーの方でも使うようになってきたJavaScriptのフレームワークである『jQuery』
その高速化のTipsについてメモしておきます。

何度も同じセレクタを呼び出さない。(Domをたどわせない)
良く言われる事の1つだと思いますが、
例えば下記のようにdivのid=”header”を取得します。

$("#header")

その後、何度も$(“#header”)と書いて処理をしないという事です。
簡単に言うと変数に入れて2回目以降は処理させましょう。

ダメな例

$(function(){
  $("#header").css("","");
  $("#header").animate({
    'marginLeft': '500px'
  });
});

良い例

$(function(){
  var $header = $("#header");
  $header.css("","").animate({'':''});
});

これでspeedtestしていただくと分かるかと思います。
書籍でもパフォーマンス系の書籍は必見ですね。
var $変数名でjQueryのセレクタを格納しているよというのが分かり易くなるので
こういう変数名の付け方の方が良いですかね。

他あわせて読みたい記事
jQueryを読むために知っておきたい6つの知識

社内講習わくわくjQuery編3 – 書くようになったら気をつけたい5つのこと

5．JavaScript高速化のためのTips

ツール

スピードの計測ツール
どの書き方が一番効率よく実行できるかをウェブ上で確認出来るサービスです。
なんとありがたい…
http://jsperf.com/

下記試した例です。

var obj = { foo: "bar" }, value;
for (var i = 0; i < 1000; i++){
  value = obj.foo;
}

jsperf使用時

var obj = { foo: "bar" }, value;
with(obj){
 for (var i = 0; i < 1000; i++){
  value = foo; //obj.を省略
 }
}

withの細かい詳細について

書き方について

スマートフォンでtapした際にすぐにイベントを実行したい時がありますよね。
普通のclickイベントだと遅い。。そういう時に使えるもの。
かなりパフォーマンスが良くなるのでぜひ試してみてください。
fastclick.js

6．他ページ高速化についての参考記事

・CSS Nite LP23『表示速度最適化』にいきました。
⇒パフォーマンス向上は、費用対効果で考える。
なるほどな、と思いましたが、実際の業務に当たる上で本当そうだと思います。エンジニアだったら、リファクタリングして
コードを綺麗にすべきだと思いますが、その工数をとっている事って少ないですよね？それは別プランで提供するとか。
実際クライアントは早く、そしてなるべく安く作ってほしい、超短納期の短納期の案件もある中で全てをやるのは難しい。
そうなった時の優先度としてなにを取るべきかですよね。という意味でなるほどなと思います。
ただ、Sprite等はデザイナー的には基本だと思うので、業務のやり方次第かと思いますね。
具体的には、マークアップする前にルールとして、一緒に書き出しする物は決めておくということです。

ちなみにSassの拡張ではSpriteしたい画像をまとめてpngで吐き出してくれるものがあるそうですが
この辺りも試して効率的に良い物を作っていきたいものですね。

・CompassでCSSスプライト

ページ高速化についてのサーバー側の設定

WordPressサイト用の.htaccess例
Wordpress用なので参考になるか微妙な所ですが。

画像、CSS、JSのキャッシュ関連のものはしっかりやっておきたいですね。

HTML関連のページ最適化

CSSやJSで改行や空白を開けない、CSSとJSの読み込み位置等、基本的な事も多いですが、
圧縮関連ではこちら、CSSとJSの圧縮に使うものです。

HTTP compression

Googleのページスピード最適化に関するページ
Make the Web Faster

全て英文ですが検索エンジンを提供している元からの情報というのは大切ですね。
Web パフォーマンスに関する開発情報 -Google
Make the Web Faster というページです。そのままですね(笑

img要素にwidth,height,alt等を書くか否かの記事
img要素のwidth,height属性は指定しない
結構古い記事ですが、今だとレスポンシブウェブデザインが流行ってきて、指定してしまうと面倒になってしまいますので
書いていませんね。
レンダリングの問題で、書かない方が良いということが書かれていますが、今は書かないほうがベターな気がします。
制作上、運用上でも、ファイル名を変えるだけで変更出来るのは良いですしね。

以上、ざっくりとしたメモですが、
高速化についてJavaScriptのソースレベルで追記していきたいと思っております。