2011/07/12

スマホでも使える!パフォーマンスアップの為のCSS記述方法

「CSS Lint」は、CSS記述方法によるパフォーマンスをチェックできるツールです。開発したのは、Yahoo!、 Facebook でパフォーマンスチームだった Nicole Sullivan(ニコール・サリバン)です。Web Directions East 2009 で来日したこともあります。



モバイル端末の普及によって、回線速度が十分でない3GでもWebを快適に利用する為には様々な対策を講じる必要になってきました。テキスト量の制限からCSS, HTML, JS の最適化も重要な対策事項です。


このツールは、CSSの記述方法についてのパフォーマンスの側面から検証ができます。


チェックボックスで検証したい項目を自由に選択できますので自分で意図して検証にひっかかるCSSの記述を利用している項目があれば、予めチェックを外しておくことをオススメします。



下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法

下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法
Parsing errors should be fixed - パースエラーを修正しよう

CSS Lint はデフォルトでパースエラーを表示します。パースエラーは通常はミスタイプによるブラウザがCSSの適用をしなかったプロパティやルールを意味します。パースエラーは、CSS Lint によってエラーとして表示されます。修正するべき最も大切な事項です。

Don't use adjoining classes - 隣接クラスを使わないようにしよう。

.foo.bar のような隣接クラスはCSSで利用は可能です。これらは、IE6以下では利用ですることができません。
  • ID: adjoining-classes

Remove empty rules - 空ルールを削除しよう。

ルールを含まないプロパティ、たとえば:
.foo {}

CSSソースの整理をしない結果として、空のルールが何度も表示されるのを見かける。空ルールを抹消して、ファイルサイズを小さくしてブラウザが処理するスタイル情報を削除しよう。

  • ID: empty-rules

Use correct properties for a display - Display プロパティには正しいものを

たとえ CSSルールがグループできることが出来たとしても、display プロパティで無視される指定があるでしょう。このような手法は、CSSファイルに余計なゴミデーターになります。CSS Lint は 下記のプロパティのリストをチェックします。
  • display: inlinewidth, height, margin (他の派生も), padding (ほかの派生も), もしくは floatを利用するべきではない。
  • display: inline-blockfloatを利用してはならない。
  • display: blockvertical-alignを利用してはならない。
  • display: table-*margin (他の派生も) もしくは float 利用してならない。

無視されている、もしくは問題となるプロパティは削除してファイルサイズを削減しよう。そしてパフォーマンスをアップさせよう。
  • ID: display-property-grouping

Don't use too many floats - float を沢山利用しない

floatプロパティは使わなければならないとしても良い考えとはいえない。CSS Lintは floatを10回以上利用されているかをチェックして、もし利用されていれば警告を表示します。floatを沢山利用するというのは、レイアウトに対して何らかの引き算的アプローチが必要。
  • ID: floats

Don't use too many web fonts - Webフォントをたくさん利用しない。

Webフォントは @font-face を利用して人気があります。しかしながら、ウェブフォンとの利用は 幾つかのブラウザはフォントのダウンロード中はレンダリングをストップしてしまいます。この理由から、CSS Lintは5つ以上のウェブフォントが1つのスタイルシートで利用されていると警告を表示します。
  • ID: font-faces

Don't use too may font-size declarations - font-sizeの指定はしすぎないようにしよう。

典型的なウェブサイトはfont-sizeの指定も含めて限定的でしょう。もし、10以上の font-size の指定があるようであれば、マークアップの中でフォントサイズのクラスのテンプレートを再設定できるでしょう。

  • ID: font-sizes

Don't use IDs in selectors - セレクタにIDは使わないようにしましょう。

IDはセレクタで使うべきではありません、なぜならこれらのルールはHTMLと完全に紐付けされています。再利用する可能性がありません。ページでclassをセレクタに利用することの方が好ましいのです。

  • ID: ids

Don't qualify headings - 見出しは修飾しすぎないようにしよう。

h1-h6の見出し要素はスタイルシートの最初で設定されるべきでしょう。ページの途中で特定の部分で指定されるべきではありません。例えば、これは必要以上に修飾された見出し要素の例です。





.foo h1 {
    font-size: 110%;
}


見出しは、ウェブサイトを通して同じようなサイズやデザインであるべきです。
  • ID: qualified-headings

Heading styles should only be defined once - 見出しのスタイルシートは一度だけ指定されるべきです。


Heading elements (h1-h6) should have exactly one rule on a site. CSS Lint warns if it finds more than one.
  • ID: unique-headings

Zero values don't need units - ゼロの値は単位は省きましょう。

簡単にバイト数を減らす方法として、CSSでは0には単位を省くようにしましょう。簡単にいうと、0px0は完全に同じです、なので単位は省くようにしましょう。
  • ID: zero-units

Vendor prefixed properties should also have the standard - ベンダープリフィックスプロパティはウェブ標準のバージョンも記述しましょう。


-moz-border-radiusのように、ベンダープリフィックス付きのプロパティを利用する時は、ウェブ標準での指定を忘れないようにしましょう。ウェブ標準での記述は、ベンダープリフィックス付きのプロパティの後に来るのが好ましいです。




.foo {
    -moz-border-radius: 5px;
    border-radius: 5px;
}


  • ID: vendor-prefix

CSS gradients require all browser prefixes - CSSのグラデーションの記述は全てのブラウザでベンダープリフィックスが必要です。

現在、標準でCSS gradient の採用はありません。つまり、CSS gradients をクロスブラウザで利用するには、ベンダープリフィクス付きのバージョンが多種必要になります。CSS Lintでは、グラデーションをサポートしている全てのブラウザへグラデーションが一様に指定されていない場合に警告をします。

  • ID: gradients

Avoid selectors that look like regular expressions - 正規表現を利用したセレクターを避けよう。

CSS3 複雑な属性セレクターを追加していますが、~=は遅くなります。属性セレクターを利用するときは、複雑な正規表現を利用したセレクタの 利用をさけて、パフォーマンスの負担を減らしましょう。
  • ID: regex-selectors

Beware of broken box models - 壊れたボックスモデルには注意しよう。

ボーダーとパディング は要素のコンテントの外にスペースを追加します。width height の指定をpaddingborderと一緒におこなうことは通常は間違いです。なぜなら、貴方が望んでいるような結果にはなりません。CSS Lint は widthheightpadding もしくはborderを一緒に利用されている場合に警告をだします。
  • ID: box-model
Don't use @import - @import ルールはさけよう

@import ルールは、幾つかのブラウザで並行ダウンロードを邪魔します。
(see: Don't use @import)
  • ID: import
Don't use !important - !import はさけよう

!important は 個別性の仕組みによって導かれた結果をどんな場合でも書き換えてしまいます。CSS Lint は !import を利用された場合、警告を表示します。もし、最低でも10個以上の !import ルールがある場合はエラーを表示します。
  • ID: important

まとめ

CSS Lintは非常によく出来たツールですが、できれば上記のルールをよんで普段からCSSの書き方には気をつけたいですね。