芸能人は歯が命であるように、ウェブサイトは軽さが命である。表示の重いサイトが私は大嫌いだ。訪問者に見てもらおうという気があるのか、と思う。このブログもチャットプログラムや鳳凰の画像やらのせいで重めですみません。バナー広告もちょっと重い気がする。以下のようなデータもあるらしい。ユーザーがページ表示に待てるのは2秒まで。3秒以上かかると40%以上のユーザーは離脱する。表示が1秒遅れるごとにコンバージョン率は7%落ちる。表示が1秒遅れるごとに顧客満足度は16%落ちる。引用元:最低2秒、目指すは1秒以内。海外SEO情報ブログやはり、表示が遅いサイトというのは誰もが嫌うものらしい。ネットサーファーはみんなせっかちである。1番や2番などはモロに私のことを指している。CSSスプライトとは?サイトの表示を早くするテクニックの一つに「CSSスプライト」というものがある。これが何かを今回は説明しよう。このブログをPCで表示させると、ページ最上部に「トップページ」、「お問い合わせ」、「仕事のご依頼」という3つのメニュー項目がある。これらの文字は毛筆体フォントで表示させるため、画像として表示している。スマホから閲覧している方はわからないと思うので、キャプチャ画像を貼り付けておきます。これら3つのメニュー項目をそれぞれ以下のような画像として用意し、これら3つの画像をページ上に並べて表示させたとしても、見た目のうえでは今と変わらないので特に問題はないように思われがちだ。同時接続数によって発生する読み込み待ち時間しかし実は、上記のやり方はあまりよくない。画像を3つサーバーから読み込むということは、HTTPリクエストが3回発生することになる。ブラウザには同時接続数というものがあり、例えば同時接続数が2の場合なら、とある2つのファイルの読み込みをしている間は別のファイルの読み込みは開始できないということになる。HTTPリクエストの数が多いと、待ち時間が多く発生しがちになる。**px;のようにbackground-positionを使ってそれぞれを表示させるほうが良い。同じ1枚の画像をbackground-positionをずらすことによって各箇所に適切な位置で表示させるわけだ。この方法ならHTTPリクエストが1回で済む。複数に分けてあった画像を1枚にまとめただけなので、画像ファイルの合計容量もさほど大きくはならない。実際にこのブログでは以下の画像を使用しており、いくつかの箇所の画像を1枚にまとめてCSSスプライトで各箇所に表示させている。(1枚であることがわかりやすいように本来は透明の部分に水色をつけてあります)かかる読み込み時間を計測する方法HTTPリクエストの数や時間がどのぐらいかかるかを確認したい場合は、Firefoxなら右クリックメニューの中の「要素を調査」、「ネットワーク」から確認したり、拡張機能の「Firebug」を使用することでも見ることができます。Chromeの場合も右クリックメニューから「要素を検証」、「ネットワーク」と選択していけば見ることができます。コンビニで缶コーヒーを飲みながらタバコを吸うのが日課の暗い人。ご質問やお便りはお問い合わせページからどうぞ。企画もの(使用に注意)全国のうんこ大好きなチビッコ達が大喜び。このボタンの詳しい説明はこちら。一度押すとスタート、もう一度押すとストップ。このボタンの詳しい説明はこちら。