【HTML5 Dev】ドキュメント ヘッダの最適化テクニック

「The Indispensable HTML5 Boilerplate Website Template」という記事を書くために、筆者は Paul Irish 氏による HTML5 Boilerplate インデックス ページのマークアップを調べていた。その結果、Web ページの高速読み込みと整合性のあるレンダリングを実現するベストプラクティスに対し、必要性を強く認識するようになった。Irish 氏とその同僚がそうであったように、読者も Web ドキュメントの最適化を真剣に考えているのならば、現存する無数の Web ブラウジング デバイスの要求を満たす何らかの努力が必要との結論に達するだろう。Irish 氏が懸命に努力してくれた結果、われわれも同氏のさまざまなテクニックを使ってそのメリットを享受できるようになった。今回は、index.html ページのヘッダ部分をいくつか見ながら各テクニックの目的を説明したい。それにともない、自分たちのページでの使い方を知るだけでなく、最新かつ最高の HTML ベストプラクティスに関する最先端を大まかに把握できるようになる。
DOCTYPE 宣言
まず、一番上から始める。<!DOCTYPE> 宣言は、TML ドキュメントの最初の行に置く必要があり、<!HTML> タグよりも前に来る。その目的は、その Web ページの HTML 版を Web ブラウザに渡すことだ。HTML 4.01では、3種類の <!DOCTYPE> 宣言(String、Transitional、および Frameset)があった。これは、HTML 4.01が Standard Generalized Markup Language (SGML)をベースにしているため、DTD への参照が必要だったからである。
<!DOCTYPE> 宣言は引き続き HTML5 でも必要だ。ただし、HTML5 はもはや SGML ベースでないため、DTD 参照は気にせず取ってしまえる。実際、ここではコンテンツが HTML であることだけ分かれば良い。
条件付き CSS クラス
条件付きクラスが登場する以前、異なる Web ブラウザごとにドキュメントのスタイルを指定する方法としては、条件付きスタイルシートと CSS ハックという2通りの方法が推奨されていた。
Internet Explorer(IE)用の条件付きスタイルシートの例を以下で紹介する。
また、IE および Mozilla 用の典型的な CSS ハックは以下のようになる。
条件付きスタイルシートはページの読み込みが遅く、CSS ハックはうまく機能しないため、上記方法はいずれも満足のいかないものだった。条件付きクラスは、両方法の欠点を解決する折衷案となっている。この方法では、CSS クラスを開始 HTML タグに 適用することで、同クラスがドキュメント全体に適用される。Web ブラウザがバージョンが9以降の IE と、そのほかの Web ブラウザの場合、空のクラスが適用される。
この場合、ページ読み込みが早く済む。
CSS コードはすべて同じファイルに置かれ、 正しく機能する。
Charset META タグ
HTML4 では、ドキュメントの文字エンコーディングを指定する META タグは以下のように書く。
W3C は HTML5 仕様を検討する過程で、シンタックスを覚えやすい以下のようなタグ コードに短縮することにした。
utf-8 を指定する理由
HTML5 Boilerplate のインデックス ページは、ドキュメントのエンコーディングを utf-8 に指定している。これは偶然ではなく、UTF-8 エンコーディングが最良の選択だからだ。理由の1つとして、Unicode は現在、ASCII のほか、ISO-8859-1 や Windows-1252 のような8ビット文字セットと取って代わりつつある状況が挙げられる。実際、Unicode は世界の大半の筆記システム用文字のすべてを規定する標準となっており、Unicode を使うと単一 Web ページ内で複数言語を混在させられる。Unicode のエンコーディング方法には(UTF-7、UTF-16、および UTF-32など)複数種類あるが、今のところ UTF-8の人気が最も高い。
欠かしてはならない手順
特殊な文字を一切使わないとしても、Web ページの文字エンコーディング指定を欠かしてはならない。ご存知だろうが、Content-Type ヘッダか HTML META タグで文字セットを指定していないと、HTML5 は Web ブラウザにレスポンスのバッファリングを要求する。このバッファリングは、ページ読み込みを遅くする要因だ。もう1つ、きわめて重大な問題が存在する。Charset META タグを省略すると、UTF-7 を使ったクロスサイトスクリプティング攻撃に対して Web サイトが脆弱になってしまうのだ。Web サイトで文字エンコーディングが一切定義されていない場合、Web ブラウザはデフォルト設定として UTF-7 文字エンコーディングを選択する可能性がある。この状態だと、Web サイトに不正アクセスするための UTF-7 エンコーディング スクリプトを、Web ページに挿入されかねない。
サーバーの設定や .htaccess ファイルに手を加えられる場合は、HTTP サーバー ヘッダの一部として HTML の文字エンコーディングを保存するとより安全性が高まる。Apache だと、「AddDefaultCharset UTF-8」をルート ディレクトリの .htaccess ファイルに追加すればデフォルトの文字セットを ISO-8859-1 から UTF-8 に変更ができる。この1行で、Web サイト全体の文字エンコーディングをまとめて設定できてしまう。
配置が重要
W3C は2011年初頭、文字エンコーディングの宣言を Web ページの最初の512バイト以内でなく、最初の1024バイト以内に置けるようにした。これは、Web ブラウザが行うページ コンテンツのバッファリング処理開始までに猶予を与えるためだ。ただし、Web ブラウザのベンダー各社がこの変更を採用するかどうかはまだ分からない。現時点で言えることは、IE がページのバッファリングを全く行っていないようだ、ということだ。IE の場合、デフォルトの文字セットと異なる文字セットがドキュメント内で指定し直されると、その文字セットでページを描画し直す。そこで、Charset Meta タグはできる限りドキュメントの最初の方に配置する。
まずは描画エンジン選び
IE 6 以降の IE は、さまざまな 互換性モードで HTML コンテンツをレンダリングできた。X-UA-Compatible META タグを「IE=edge」に設定すると、IE は HTML5、Cascading Style Sheets(CSS)、CSS Level 3(CSS3)、Scalable Vector Graphics(SVG)1.1(Second Edition)といった新たな各種標準に対応しようとして、利用可能なもののなかで最新のレンダリング(描画)エンジンを使う。index.html ページで2番目に定義されるコンテンツ オプションは Chrome Frame。これはIE6/7/8 用のプラグインで、IE で優れた Google Chrome レンダリング エンジンを使うためのものだ。ユーザーがこのプラグインをインストールしていれば、Web ページのレンダリングが Chrome のレンダリング エンジンで処理される。
モバイル デバイス向けの最適化
モバイル版 Safari は viewport META タグに対応しているため、表示域のサイズと縮尺を Web 開発者がコントロールできる。そして、ほかのモバイル ブラウザの多くがこのタグをサポートするようになった。ただし、公の Web 標準で同タグを採用しているものは1つもない。viewport META タグをドキュメント ヘッダに入れると、異なるサイズや解像度の携帯端末画面上でも一貫した表示でページ レンダリングが可行える。
これに関しては、Mozilla Developer サイトに詳細情報がある。
まとめ
異なる Web ブラウザ、プラットフォーム、そしてデバイス用に Web ページを最適化することは、危険の多い作業になってきた。終了タグを入れ忘れる程度が一番の心配だったのは、もう過去の話だ。ただありがたいことに、ドキュメントを素早く読み込み、存在するあらゆるデバイスで可能な限り一貫したレンダリングを行うベストプラクティスを、ほかの人たちがまとめてくれている。
もちろん、これでこのテーマが終わるわけでない。まだドキュメント本文の解説が残っている。ここでもスクリプトをより効率的に読み込み、Web サイトを Google アナリティクスに登録するなど、ありとあらゆるテクニックのメリットを享受できる。
[PR]
by pachifu | 2012-04-09 14:53