今回、本ブログをリニューアルし(トップページの)表示速度を上げるにあたって、必ず対処すべきだったのが画像でした。CSSスプライトを活用したのですが、これによって本ブログで例としてご紹介しやすくなりましたので、今回はCSSスプライトについてお話しさせていただこうかと思います。

ハサミ

CSSスプライトとは

簡単に言いますと、いくつも細かく存在する画像をひとまとめの画像1枚(＝スプライトシート)にして、表示したい画像部分だけをCSSで指定する手法です。これによって、Googleのクローラーがいちいち画像ファイルを探しに行く手間が省けるだけでなく、画像そのもののファイル数も減るため、レスポンスと表示速度が速くなります。

例えば以下のようにスプライトシートを設置しておき…

スプライトシート

表示させたい部分だけ位置とサイズ設定し、表示させます。

こんな感じで実際にこのブログでも対応しています。

懸念点

但し、CSSスプライトを行うには以下の点に注意が必要です。

alt属性が使えないこと

W3Cが推奨するやり方ではない

alt属性が使えないこと

CSSスプライトするスプライトシートにはalt属性が使えません。しかしCSSスプライトは本来、細かなアイコンや(背景をはじめとした)補助的な画像のみに使用するものです。クリックしてリンクするような画像についてはimgタグで画像を出力し、alt属性を使用すべきだと考えます。なぜなら、Googleは内部リンクのアンカーテキストを辿りながら、サイトがどうページ展開していくかテーマ性を検知しようとするからです。

でも、私のこのブログではグローバルナビもCSSスプライトの対象として扱ってしまっています(笑)。テーマ性よりも表示速度を追求しようかと思って敢えてやってみました。内部リンクによる評価という観点では、全ページに展開しているグローバルナビのalt属性は重要なのですが、「とりあえずパンくずがあるから良いか…」という個人解釈です(笑)。

とにかく、CSSスプライトはalt属性が必要の無い画像が対象だという解釈だけ持って置くと良いでしょう。Googleに対してテーマ性を強く伝えたいなら、CSSスプライトではなくalt属性を使用した画像が良いです。

W3Cが推奨するやり方ではない

CSSスプライトを設定するには<div>を空にしなければなりません。そもそも背景画像扱いになるスプライトシートを、CSSで<div>タグによって位置指定しているため、実際の<div>タグ内は空になってしまうのです。しかし<div>の中には文章やグループ化された内容があるべきで、装飾のために<div>タグは使うべきではありませんので、空<div>の使用はW3Cでは推奨されないやり方になります。

そこで、それを防ぐために(alt属性のような働きとして)テキストを入れ込むのですが、そのテキストを表示させるわけにはいかないので“text-indent: 100%”にすることで表示から飛ばしてしまうのです。本来そこに表示されるべきテキストを表示しないことになりますので、隠しテキスト扱い(≒クローキング)される内容となってしまいます。

ただしtext-indentでテキストを飛ばす方法も、最近のGoogleでは、隠しテキスト扱いをせずに(そういう設定をした)意図を判断してくれたりするらしいので、代替策としては大きな問題にはならなそうです。まぁ、明確な意図を持ってtext-indentを使用することについては、以前ほど大きな問題として扱われていないのだと思います。

ぜひ活用を！

今回、本ブログでCSSスプライトを活用してみましたが、やはり表示速度は速いですね。今回このブログでは、グローバルナビやその他の画像までも余計にスプライトシート化しましたが、適切な対象画像を最適化することは本当にオススメしますので試してみてください。

CSSスプライトについて

Search for articles

Archives