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


    関連記事

    箸休め:コロナ禍での検索推移

    GoogleがThe Keywordでコロナ禍における気晴らしについて、ここ1年の検索がどうだったかツールを作ったようですので、和訳してご紹介します。米国視点ではありますが、コロナ禍において余暇や気晴らしをどう楽しんできたか、Googleトレンドを活かしたインタラクティブツールとなっていますので、ビ ...(続きを読む)

    商品レビューアップデート

    米国現地時間4月8日、Googleは新しいアルゴリズムを導入したことをSearch Central Blogにて発表しました。「商品レビューアップデート(Product Reviews Update)」という名称です。まだ英語圏だけの導入のようですが、ここではまず和訳文をご紹介します。 商品レビュー ...(続きを読む)

    GSCに2つの新機能

    Google Search Consoleに新しい機能が2つ追加されました。米国現地時間4月7日のSearch Central Blogにて発表されていましたので、和訳と同時に使い方をご紹介します。 Googleからの発表内容 まずは、Search Central Blogの発表内容を和訳します。お ...(続きを読む)

    CWV等に関するFAQ

    2021年5月のCore Web Vitalsを含んだページエクスペリエンスのアルゴリズム導入まで1ヶ月を切りました。そんな中、Googleが先日Search Console HelpにてCore Web Vitals及びページエクスペリエンスに関して、よくある質問をまとめていましたので、和訳してご ...(続きを読む)

    コメントを書く

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