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のCore Web Vitalsの導入が2021年5月に導入されます。伴ってページエクスペリエンスを達成しているWebページには検索結果のスニペットに何かしらのマークがされるということも発表されています。そこで、あらためてページエクスペリエンスについて記事にしておこうかと思います。 ペー ...(続きを読む)

    SEOの勉強は何から始める?

    「今年こそSEOの勉強を始めます!そこで、何から見ていけば良いでしょうか?」というご質問を結構受けます。聞く人によっては「何から見ていけば良いか、って聞いてくる段階でセンス無い」とか「依存心が強い」とか思うかもしれませんが、私はSEOの勉強を始めると言われるだけで嬉しいので、ちゃんと答えています。そ ...(続きを読む)

    GSCでGoogleニュース確認

    Googleニュースで表示された検索パフォーマンスに関して、Search Consoleで確認できるようになりました。Google検索セントラルブログで発表されています(日本語版です)。一応注意点含め私からもご紹介しておきます。 対象はGoogle検索のニュースタブ検索結果ではない 今回、Searc ...(続きを読む)

    インデックスカバレッジが改良

    Googleは米国現地時間の1月11日、Search Central BlogでSearch Consoleのインデックスカバレッジデータを改善したと発表しました。日本語版はまだですので和訳してご紹介します。 Googleからの発表内容 Search Central Blogでは以下のように案内され ...(続きを読む)

    コメントを書く

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