表示速度を上げるCSSスプライト

第17回　～サイトの表示速度を上げて基準をクリアするCSSスプライト～

専門的な部分になりますが、とても重要です。ホームページを使ってWEB戦略を行う場合、突き抜けて受注を獲得する場合、その地域で驚異的にブランディングを成功させる場合には、今回の俗に言うページの最適化（その中でも表示速度）が必須です。

　サイトの表示速度を上げることで、Googleの評価基準の１つになっているといわれている。

　「お客様に必要な情報を早く提供する」　「ページの表示スピードを上げること」をクリアするための方法です。

　きちんと理解しているサイトは必ず実践しています。もしかしたら、ホームページのリニューアルを３回も４回も繰り返して、いまだにうまくいかないというサイトは、今回のこの部分が未実装なのかもしれません。

　組み込んでいる内部の画像やファイル、CSSなど、表示速度を早くするために、たとえばメインのメニューのメニュー画像が６個配置しているとしたらロールオーバーを含めて12個の画像ファイルを組み込んでいるはずです。

　この12個の画像ファイルを１枚の画像として作れば、12回の画像ファイルを読み込みに行くアクセス回数が、１回で済みます。
　この手法をＣＳＳスプライトといいます。

　画像を探しに行く時間は単純に12分の１になるのでページの表示開始が早くなり、また、画像容量は単純に12倍になるわけではなく、それぞれのヘッダー情報やメタ情報が省略できるので結果的に表示速度が上がり、ＣＳＳスプライトを使うと効果的なのがお分かりになると思います。

参考サイト：http://lifeplan-seminar.jpを使ってわかりやすくご説明すると

1．トップページを右クリック→プロパティをクリック

2．上記のアドレス （画像のURL）をコピーしてブラウザのアドレス欄に貼り付けて、エンターを 押してください。

　ページを見て、それぞれのボタンをクリックしても、独立して動いています。リンクもそれぞれ別のページが開きますよね。驚かれていると思いますが、実は、12枚の画像を１枚の画像として扱っているのです。ＣＳＳスプライトといいます。きれいなソースコードです。

　それともう１点、これらをさらに大きく考えて対策すると、ヘッダーのＣＳＳ、サイドバーのＣＳＳ、フッターのＣＳＳ、各ページのコンテンツのＣＳＳをそれぞれ分けて作る人が多いのですが、それでは４回のＣＳＳを探しに行って読み込む作業が発生します。

　これを１個のＣＳＳにまとめて書くと、探しに行く時間が４分の１になり、表示スピードの向上が達成します。スマホで閲覧する場合でも、スムーズにページが表示されるので、ストレスフリーとなり、多くのページを閲覧してもらえることになります。

　ただ、単純に「見やすさ」だけではなく、私たちが欲張って求めているもの、それが、ＧＯＯＧＬＥの表示速度の評価基準であり、ＧＯＯＧＬＥが好きなビューティフルコードといわれている部分です。

≪ Profile ≫

集客と売り上げアップにつながるホームページ構築技術（PHP・SEO・CSS・MYSQL）により、帝国データバンクと業務提携。日本全国から引き合いが多い。帝国データバンク主催のWEBセミナー講師、パナソニックエコソリューションズ創研のWEBセミナー講師として、全国でセミナーを展開中。VPN構築と社内インフラ設計、アプリ開発を行う。

有田電器情報システム　有田栄公 社長