気になるけど

PC関連情報、ビジネス書、IT資格などについて書いていきます。 ただいま不定期更新中です。

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Twitterでつぶやく

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

CSS Spriteの使い方がようやく理解できました

「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……
by 日経PCオンライン

以前からYoutubeなどのプレイヤーに使われている事でも知られている「CSS Sprite」というCSSのテクニックがありましたが、Yahoo!でも採用したという記事を見たことで、興味をもちました。

前にCSS Spriteの話しを耳にした時、所詮大規模サイトでのお話なのだろうから自分には関係ないと思っていましたが、確かに最近Yahoo!ニュースとかの表示が速いなと感じる事があり、どういうからくりなんだ?と好奇心で調べました。

ようするにサイトで表示する画像を一枚にまとめて、それをCSSでポジションとして指定するという技なんですね。実にシンプルな仕組みです。

そもそもこのCSS Spriteの技術のみによってWeb表示が高速化されるというわけでもなく、HTTPセッションの数を減らすというところが肝なのですね~。
目から鱗でした!

よく考えてみれば、複数枚の画像をダウンロードするのにどれだけHTTPのセッション情報がやり取りされることか、WIRESHARKなどのパケットキャプチャソフトを使えばよくわかるのですが、これを1枚の画像に集約すれば、画像のダウンロード自体は1度で済み、そもそものHTTPセッション数も一度で完了します。

CSSの記述解釈自体はブラウザとパソコン上でのお話なので、少なくともインターネットでのやり取りでのボトルネックは少なくなりますよね。

無駄を省く、賢いやり方だと思います。
サーバ側の負荷も減りますしね。

じゃあCSS Spriteを導入したいがどうすればいい?という時は、デザインウォーカーさんの記事で紹介している、

CSS Sprite Generatorというサイトがとても使えそうなのでチェックしてみました。

CSS Spriteを活用しよう
by デザインウォーカー

サイト内は日本語表示が可能で、簡単に画像を一枚にしてCSSまで作ってくれるなんていたれりつくせりです。

さらに、Yahoo!の表示高速化にはCSS Sprite以外にもまだ工夫がなされているようで、冒頭の記事で紹介してしまいますが、画像をGIFでなくPNGを採用し、さらに業界標準であるPhotoshopではなく、Optpix WebDesignerなるソフトでPNGを生成することで画像容量を減らす涙ぐましい努力をしていたり、PNGファイルに含まれる制御情報を専用ソフトで削除したりと、秒間表示にこだわったYahoo!のエンジニア魂を感じさせる、すごい工夫だと思います。

今のWeb表示はスピード時代、少しでも表示が遅ければ、見ているユーザーは「このサイトは遅くて困る」と感じてしまうのでしょうけど、Google Chromeブラウザを使うようになってから、Web表示のスピード感というものが明確に意識できるようになりましたので、これからはこういうチューニングが必要要件になってくるのかな?

「より多く」「より高速に」と、Webの世界も容量と速度を追及されるようになってきている気がしますが、既存の技術の方法を変えるだけで改善がなされるという、そういう工夫の余地があるという事を示した好例ですね。

私は単純に面白そうだという理由で、この週末にでも試してみようと思いました。
Twitterでつぶやく

| PCネタ・IT系ニュース | 19:46 | comments:0 | trackbacks:0 | TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://kininarukedo.blog84.fc2.com/tb.php/600-e8623e0b

TRACKBACK

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。