ヤフーでは、ページはyahoo.comやyahoo.co.jpのドメイン名に置いてありますが、画像ファイルはyimg.comやyimg.jpのドメイン名に置いてあります。これはなぜでしょうか？

それは、複数のドメイン名を使ったほうが、ブラウザが平行してデータをダウンロードできるからというのが1つの理由です。Webサーバーとブラウザの間の通信のルールで、1つのドメイン名に対する持続的な接続は同時に2つまでにすることが望ましいとされているのです。

もう1つの理由は不必要なクッキーによる通信量の増加を避けるためです。

訪問者の状態をユーザーのブラウザに保存しておくクッキーは重要な技術ですが、ブラウザはサーバーとやりとりをするたびに手元に保存してあるクッキーのデータをWebサーバーに送ります。送られたクッキーの情報をサーバー側で利用しない場合は、クッキーのやりとりをしないほうがパフォーマンスは良くなります。

そこで、そもそもクッキーを必要としない画像を担当するサーバーはドメイン名を別にすることでクッキーのやりとりをなくしているのです。クッキーはフォルダ名でも対象を指定できますが、多くの場合はサイト全体で利用するためにドメイン名全体に対してクッキーを指定しています。ですから、ブラウザがクッキーを送らなくするには、ドメイン名を分けるのが最善なのです。実際に、米Yahoo!が画像用に利用しているyimg.comではクッキーを利用していないません。

Yahoo!パフォーマンスチーム、最新高速化ルール20を発表

新しい20のルールはサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルの7つに分類されている。新しく紹介されたルールは次のとおり。

1. バッファは早期にフラッシュする (サーバ)
2. AJAXリクエストにGETを使う (サーバ)
3. コンポーネントのポストロード (コンテンツ)
4. コンテンツのプレロード (コンテンツ)
5. DOM要素数の削減 (コンテンツ)
6. ドメインをまたがってコンテンツを分離 (コンテンツ)
7. iframeの数を最小化 (コンテンツ)
8. 404を作ってしまわない (コンテンツ)
9. クッキーサイズを最小化 (クッキー)
10. コンポーネントに対してクッキーフリードメインを使う (クッキー)
11. DOMアクセスを最小化 (JavaScript)
12. かしこいイベントハンドラを用意 (JavaScript)
13. @importよりもlinkを使う (CSS)
14. フィルタの使用は避ける (CSS)
15. 画像を最適化 (画像)
16. CSS分割を最適化 (画像)
17. HTMLにおいて画像をスケールさせない (画像)
18. favicon.icoを小さく作成しさらにキャッシュを有効にする (画像)
19. 25KB以下にコンポーネントをキープする(モバイル)
20. コンポーネントを複数のドキュメントへパックする(モバイル)

ブラウザでチェックできるadd-on(Firefox)まで出ているとは知らなかった。これも後で試してみよう。
パフォーマンスチェックツール「YSlow」＊要Firebug

Windows版のSafariにある「開発」メニューもなかなかよさそうだけど。（ネットワークタイムラインの表示とか）

コメント: 0
トラックバック: 0

CSSによる背景画像のロールオーバー

投稿者: admin
2009年1月11日 11:50 AM
CSS | Web制作
tips

メニューボタンが画像で、それをCSSの背景画像で制御してロールオーバーさせるやつ。よくあるあれ。仕事でもけっこう使うのに、毎回思い出すのにちょっと時間をロスっているのでメモ。

マウスのロールオーバーで切り替わる画像は同一の画像で作成。いわゆるCSS SPRITEというやつ。（実際のそれはもっとたくさんの画像を一つにしてるけど）背景画像の表示位置を変化させることでロールオーバー効果を得ている。
CSS

#globalNavi a{
    display: block; /* こうしてblock要素に指定しないとa要素は背景を表示しない */
    width: 108px; /* 背景画像と同じサイズを指定して表示領域の確保 */
    height: 40px;
    text-indent: -200px; /* テキストはマイナスインデントで表示領域外へ */
    overflow: hidden; /* 表示領域外のものはhidden */
}

#globalNavi a.home{
    background: url(/statics/pc/btnGlobalNaviHome.gif);
}

#globalNavi a:hover.home{
    background-position: 0 -40px;

}

(x)html

<ul id="globalNavi">

    <li><a href="#" title="ホーム" class="home">ホーム</a></li>

<#-- /globalNavi --></ul>

コメント: 0
トラックバック: 0

YUI Reset CSSを利用したCSSの初期化

投稿者: admin
2009年1月10日 5:47 PM
CSS | Web制作
library | tips

ブラウザごとのCSSによる見栄えの差異を初期化するために、
Yahoo! UI Library:YUI の YUI Reset CSS をメモ。

コメント: 0
トラックバック: 0

YUI Fonts CSSを利用した文字サイズの制御

投稿者: admin
5:45 PM
CSS | Web制作
setting | tips

ブラウザごとの文字サイズや見栄えの違いを合わせるために YUI Fonts CSS を利用。そのためのメモ。
（それプラス、この書籍を参考に）

コメント: 0
トラックバック: 0

YUIを利用して展開する水平のメニュー

投稿者: admin
5:38 PM
JavaScript | Web制作
library | plugin

yui_menu01
YUI(Yahoo! User Interface Library)を利用して、下と横に展開する水平のメニューを実装するためのメモ。

実行サンプル（外部リンクにしてあるjsやCSSファイルはサンプル内ソースを参照のこと）

外部リンクで読み込んでいるyui_menu01.jsを編集することでメニューの数、内容を変更することが出来る。

コメント: 0
トラックバック: 0

リンクを別ウィンドウで開く

投稿者: admin
2009年1月9日 7:31 PM
Web制作
html | tips | xhtml

そういえば、リンク先を別ウィンドウで開く際によく使われる「target」指定は、標準では非推奨となっているからよろしくないっていうような記事を読んだなぁと、ふと思い出して調べてみました。ざっとですが。
続きを読む

コメント: 0
トラックバック: 0

各DTDにおけるDOCTYPE宣言

投稿者: admin
7:00 PM
Web制作
html | xhtml

HTML 4.01 Strict DTD (厳密な)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD (移行期)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD (フレームセット用)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

コメント: 0
トラックバック: 0

htmlとbodyの初期化

投稿者: admin
6:57 PM
CSS | Web制作
html | setting | tips

このブログエントリーをグイグイと参考にさせていただいて、自分用の簡易CSSライブラリに加える為、メモる。
続きを読む

コメント: 0
トラックバック: 0

ホーム > Web制作

リンク

カテゴリー

検索

フィード

ページの上部に戻る