HTMLの読み込みを高速化する手段は幾つかありますが、時代の流れとともに、技術が陳腐化したり更に効率のいい技術が登場したりでなかなか着いて行くのが大変な分野です。
このエントリーでは高速化の基本と最近流行っているシンボルフォントの技術的なベース部分と利用法について解説します。
その昔、HTMLにはCSSといった概念はなく、見栄えをどうこうといった事はあまり気にしない時代がありました（ある意味いい時代ですね）。
しかし、最近では、見た目がダサいサイトや読みにくいサイトなんて、よっぽど有用な情報が載ってない限り、すっ飛ばされたり途中で離脱されたりと、見てもらえない可能性さえあります。
見る人に情報を届くがどうかはいかにスタイリッシュかつインタラクティブに仕上げるかによって決まってくるといっても過言ではないでしょう。
以下の内容は、その基本の部分になります。
言うまでもない内容ですが、いまだにテーブルレイアウトを多用してブラウザに負担を掛けている古いサイトもありますし、gifスペーサーなんてCSSでマージンを設定すればまったくもって無駄なパケット転送に他なりません。
fontタグの利用については、やりたくなる心情も分からなくもないですが、文書と見た目を分離する観点からいうと、利用は控えたいところです。
DNSは少しサーバー寄りの技術ですので、ウェブデザイナーと称される方々には避けて通りたい内容かもしれません。しかし、DNSはHTMLの転送に先立って行う部分で、DNSによる名前解決が終わらないと転送さえできません。
鈍重なDNSサーバーを介すと、必然的に通信速度は低下します。
キャッシングとは、もちろん画像などのデータをローカル上にキャッシュする行為を指しますが、キャッシュすれば転送量も減り表示速度は上がります。
しかし何でもかんでもキャッシュすると、サイトを更新してもキャッシュを読み込んでしまって思わぬ不具合が出たりもします。データのキャッシュもコントロールすべきです。
CSSスプライトについては、もう一般的な手法だとは思いますが、画像を一つ一つダウンロードする場合のオーバーヘッドをなくして全体のダウンロード速度を上げる方法です。
スプライト画像の作り方には少々コツが必要で、CSSの指定も複雑になりますが、画像の点数が多いと効果はてきめんです。
シンボルフォントとはなんぞ？って感じですが、一言で言えば、携帯の絵文字のようなもので、画像ではないけれど、画像みたいな文字の事です。
シンボルフォントのいいところは、画像（のように使える）だけれどフォントの特性を持つところです。
フォントのいいところは
といった感じです。グラフィックフォントというものもありますが、それらは利用を想定した文字サイズというのがあって、サイズの自由が効きません。
今回利用するフォントはそういうフォントではなく、ベクターデータで構成されたベクターフォントといわれるものです。
これらの利点がどう有効なのかというと、例えば解像度が違うデバイスへの対応の容易さ。
フォントはCSSで簡単に指定出来ますし、IE6のような古いブラウザでも思った通りに表示できるのは嬉しいですね。
過去のシンボルフォントは、アスキーコード上にマッピングされていて、「f」と打てばfacebookのロゴが表示されたり、「t」と打てばtwitterのロゴが表示されたりと、通常使う文字に対して設定されていました。
これは、CSSやJavaScriptが利用できないブラウザだと前後の単語にこれらの文字がくっついてしまい、文脈が壊れる可能性を孕んでいました。検索エンジンのスパイダー（ロボット）もうまく解釈せず、正しくインデックスされない問題もありました。
最新のシンボルフォントは、UNICODEのプライベート領域（外字部分）に設定されているので、一般的な文字コード領域（アルファベットやひらがな、カタカナ、漢字などの部分）とはバッティングせず、シンボルフォントが用意されていない環境ですと何も表示されず、インデックスもされないということで、シンボルフォントのウィークポイントとも言える部分がすっきりしたものです。
そのシンボルフォントで有名なものでは、githubが提供しているOcticonsというのがあります。
しかし、シンボルフォントは更によい利用法があります。
それは、文字の組み合わせ（=合字）ごとシンボルフォントに変換してしまう方法。
どういうことかというと、「Home」や「Cart」という文字をそのまま、HomeアイコンやCartアイコンに書き換えるというもので、UNICODEのプライベート領域を使った方法だと、未対応の端末やブラウザからは何も表示されない事になっていましたが、この方法を使うとそのアイコンのテキスト情報がそこに入るということです。
一見は百聞に如かずなので、以下のサイトを見てみてください。
国産のもので、合字に対応したシンボルフォントがありましたので紹介しておきます。
また変わり種でいうと、時間の表示をまるごと置き換えるCSSも既に存在していて、以下のサイトを見れば、12:34:56という時間表示がリアルなアナログ時計に置き換えられているのが分かります。
（このスクリプトはこの原稿を書いている時点では「The Future Is Near」というパターンは無料でダウンロード可能）
Timepiece Rounded
そういう場合は、自分でシンボルフォントを作ってしまうに限ります！
シンボルフォントの作り方は以下のサイトが参考になるでしょう！
githubのOcticonsの製作過程（英語ですが）。 → The Making of Octicons
Ligature Symbolsの制作を通じてFontforgeの使い方まで載っています（便利！） → 【完全版】Ligature Symbols フォントセットの自作方法
フォントを作れと言われると、途端に作業のハードルが上がったような気がしますが、実際の作業は絵を書いて、fontforgeなどのソフトでフォント化するだけ（ではないですが）なのでイラストレーターを起動して絵を書いてフォトショップで加工するのと大差ない作業量とも言えなくないです（言えないか・・・。:-P）。
シンボルフォントをキャッシュしてしまえば、転送量は格段に落ちます（フォントファイルさえ転送してしまえば、後で転送するのは文字コードだけですから）。フォントファイルをバージョンアップする事を前提にキャッシュコントロールしさえすれば、何も怖くありません！
作業量とパフォーマンスの兼ね合いから言うと、かなり中～大規模なサイトで利用するのが吉と出るようです。
このエントリーでは高速化の基本と最近流行っているシンボルフォントの技術的なベース部分と利用法について解説します。
その昔、HTMLにはCSSといった概念はなく、見栄えをどうこうといった事はあまり気にしない時代がありました（ある意味いい時代ですね）。
しかし、最近では、見た目がダサいサイトや読みにくいサイトなんて、よっぽど有用な情報が載ってない限り、すっ飛ばされたり途中で離脱されたりと、見てもらえない可能性さえあります。
見る人に情報を届くがどうかはいかにスタイリッシュかつインタラクティブに仕上げるかによって決まってくるといっても過言ではないでしょう。
簡単なところ
既存のHTMLとCSSをいじる事によって、HTMLとCSSの構成を最適化するところから始めましょう。以下の内容は、その基本の部分になります。
- テーブル（レイアウト）の撤去
- gifスペーサの排除
- fontタグなどの装飾要素をCSSに移動
- ページサイズの削減
- 文書とスタイルの分離
言うまでもない内容ですが、いまだにテーブルレイアウトを多用してブラウザに負担を掛けている古いサイトもありますし、gifスペーサーなんてCSSでマージンを設定すればまったくもって無駄なパケット転送に他なりません。
fontタグの利用については、やりたくなる心情も分からなくもないですが、文書と見た目を分離する観点からいうと、利用は控えたいところです。
次の一手
先ほどより、更に突っ込んだ効率化を求めるなら、以下の手法も採用すべきです。- DNSリクエストの検証
- キャッシングの効率化
- ファイル読み込み数とCSSスプライトの導入
- 細かい画像を背景画像にしてCSSで定義
DNSは少しサーバー寄りの技術ですので、ウェブデザイナーと称される方々には避けて通りたい内容かもしれません。しかし、DNSはHTMLの転送に先立って行う部分で、DNSによる名前解決が終わらないと転送さえできません。
鈍重なDNSサーバーを介すと、必然的に通信速度は低下します。
キャッシングとは、もちろん画像などのデータをローカル上にキャッシュする行為を指しますが、キャッシュすれば転送量も減り表示速度は上がります。
しかし何でもかんでもキャッシュすると、サイトを更新してもキャッシュを読み込んでしまって思わぬ不具合が出たりもします。データのキャッシュもコントロールすべきです。
CSSスプライトについては、もう一般的な手法だとは思いますが、画像を一つ一つダウンロードする場合のオーバーヘッドをなくして全体のダウンロード速度を上げる方法です。
スプライト画像の作り方には少々コツが必要で、CSSの指定も複雑になりますが、画像の点数が多いと効果はてきめんです。
さらなる効率化を求めて
最近流行りの手法といえば、シンボルフォントの利用があります。シンボルフォントとはなんぞ？って感じですが、一言で言えば、携帯の絵文字のようなもので、画像ではないけれど、画像みたいな文字の事です。
シンボルフォントのいいところは、画像（のように使える）だけれどフォントの特性を持つところです。
フォントのいいところは
- 1文字に対して1コードが割り当てられている
- サイズが自由自在で、拡大しても綺麗に表示できる
といった感じです。グラフィックフォントというものもありますが、それらは利用を想定した文字サイズというのがあって、サイズの自由が効きません。
今回利用するフォントはそういうフォントではなく、ベクターデータで構成されたベクターフォントといわれるものです。
これらの利点がどう有効なのかというと、例えば解像度が違うデバイスへの対応の容易さ。
フォントはCSSで簡単に指定出来ますし、IE6のような古いブラウザでも思った通りに表示できるのは嬉しいですね。
過去のシンボルフォントは、アスキーコード上にマッピングされていて、「f」と打てばfacebookのロゴが表示されたり、「t」と打てばtwitterのロゴが表示されたりと、通常使う文字に対して設定されていました。
これは、CSSやJavaScriptが利用できないブラウザだと前後の単語にこれらの文字がくっついてしまい、文脈が壊れる可能性を孕んでいました。検索エンジンのスパイダー（ロボット）もうまく解釈せず、正しくインデックスされない問題もありました。
最新のシンボルフォントは、UNICODEのプライベート領域（外字部分）に設定されているので、一般的な文字コード領域（アルファベットやひらがな、カタカナ、漢字などの部分）とはバッティングせず、シンボルフォントが用意されていない環境ですと何も表示されず、インデックスもされないということで、シンボルフォントのウィークポイントとも言える部分がすっきりしたものです。
そのシンボルフォントで有名なものでは、githubが提供しているOcticonsというのがあります。
しかし、シンボルフォントは更によい利用法があります。
それは、文字の組み合わせ（=合字）ごとシンボルフォントに変換してしまう方法。
どういうことかというと、「Home」や「Cart」という文字をそのまま、HomeアイコンやCartアイコンに書き換えるというもので、UNICODEのプライベート領域を使った方法だと、未対応の端末やブラウザからは何も表示されない事になっていましたが、この方法を使うとそのアイコンのテキスト情報がそこに入るということです。
一見は百聞に如かずなので、以下のサイトを見てみてください。
- Symbolset
- いくつかのアイコンがセットになっている有料パッケージを購入するようです。
国産のもので、合字に対応したシンボルフォントがありましたので紹介しておきます。
- Ligature Symbols
- フォントファイルとCSSが同梱されているダウンロードパッケージがあります。思ったより軽量だと感じました。
また変わり種でいうと、時間の表示をまるごと置き換えるCSSも既に存在していて、以下のサイトを見れば、12:34:56という時間表示がリアルなアナログ時計に置き換えられているのが分かります。
（このスクリプトはこの原稿を書いている時点では「The Future Is Near」というパターンは無料でダウンロード可能）
Timepiece Rounded
サイトに最適化するならやっぱり・・・
自分で制作したサイトでシンボルフォントを利用する場合、既存のパッケージでは欲しいアイコンがなかったり、多すぎて逆にパフォーマンスが下がったりするのでは、元の木阿弥です。そういう場合は、自分でシンボルフォントを作ってしまうに限ります！
シンボルフォントの作り方は以下のサイトが参考になるでしょう！
githubのOcticonsの製作過程（英語ですが）。 → The Making of Octicons
Ligature Symbolsの制作を通じてFontforgeの使い方まで載っています（便利！） → 【完全版】Ligature Symbols フォントセットの自作方法
フォントを作れと言われると、途端に作業のハードルが上がったような気がしますが、実際の作業は絵を書いて、fontforgeなどのソフトでフォント化するだけ（ではないですが）なのでイラストレーターを起動して絵を書いてフォトショップで加工するのと大差ない作業量とも言えなくないです（言えないか・・・。:-P）。
シンボルフォントをキャッシュしてしまえば、転送量は格段に落ちます（フォントファイルさえ転送してしまえば、後で転送するのは文字コードだけですから）。フォントファイルをバージョンアップする事を前提にキャッシュコントロールしさえすれば、何も怖くありません！
作業量とパフォーマンスの兼ね合いから言うと、かなり中～大規模なサイトで利用するのが吉と出るようです。
コメント
コメントを投稿