CSSスプライトについて

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

ハサミ

ふわふわ

CSSスプライトとは

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

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

スプライトシート

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

CSSスプライトした画像

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

ふわふわ

懸念点

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


    関連記事

    スマホの検索結果が無限スクロールに

    随分前から一定のIPでテストされていたと思いますが...いよいよスマホでのGoogle検索結果が無限スクロールUIに変わるようです。米国現地時間10月14日、The KeywordでGoogleが発表しています。 The Keywordの和訳 UIというか、ページ送りに関する機能性が変わるという話で ...(続きを読む)

    Googleによるファクトチェック

    先日、「About This Result」機能についてご紹介しました。要は、この検索結果に登場するWebサイトページの信憑性を測ったり、拡張して情報を得るための機能です。米国の英語圏が対象の機能ですので、まだ私たちはその機能に触れることはありませんが、その「About This Result」機能 ...(続きを読む)

    3ツールでUIと機能変更

    Google Search Consoleではお馴染みのURL検査ツールですが、実はこれと同じメカニズムで動いているのがAMPテスト、モバイルフレンドリーテスト、リッチリザルトテストのツールのようです。それが今回、この3つのツールにURL検査ツールと同じ機能を導入し、UIを統一していくと米国現地時間 ...(続きを読む)

    About This Result機能の更新情報

    まだ日本には導入されていませんが、既に英語圏では「About This Result(この検索結果について)」機能が実装されています。今回はこの機能によって知り得る情報に新しい情報が追加されたとのことで、The Keywordでその説明がされています。この「About This Result」機能は ...(続きを読む)

    コメントを書く

    コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。