スタイルシートをシンプルに効率よくすることは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繫がります。これはページのパフォーマンスを大きく向上させることに繫がります。
前回は大まかなブラウザの挙動を見ました。
今回は、そういった動きを踏まえた上で、やってしまいがちな非効率なスタイル指定を挙げてみます。そういった指定を避けることで、軽量で高速なスタイルシートを記述することができるでしょう。
なお、この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。
Continue reading…
Google Page Speedの記事から始まってしまったサイト高速化関連記事。
今回は、効率の良いスタイルを書くために、ブラウザがHTMLを解析してDOMツリーをつくり、そこにスタイルをあてていく過程を見ていきましょう。
基本的な手順がわかると、どういったcssの書き方が効率が良く、どういった書き方では迂遠であったり冗長であったりするのかが、理解できるようになると思います。
この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。そのため、この仕組みは主にMozillaエンジンについてです。IEやWebKitでは若干異なった動作をする部分もあるようです。
Continue reading…
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。
自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。
StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。
しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。
Continue reading…
前回のブラウザキャッシュの最適化に引き続き、今回は外部ファイルの取り込み時間の圧縮をやってみましょう。
最近立ち上げたサイトはこの辺の対応もしっかりしているのですが、ちょっと昔に作った管理サイトを見てみると、上位に要対応とされたのが実はこの2つ。
CSSやJsなど、ページがリッチになっていくにつれて取り込む外部ファイルも増えていきます。これらを小さくまとめて転送量を減らす工夫をすることは、ちょうどバイキングで何度も取りに行くよりも、一度に山盛りに盛ってきた方が効率が良いようなものです。
（そもそも、量を減らすことも考えなければいけませんが）
Continue reading…
Naohiko MORI / nao58
ITエンジニア。最近はめっきりWeb系で、言語はPHP/Javascriptがメインに。野球はドラゴンズ、音楽はHR/HM。ラグビーはオールブラックス。読むなら筒井康隆。
More
Enter the query to search and hit enter.
