とっても手軽なページ表示速度改善テクニック:CSSスプライトをやってみる

ページ表示速度の順位への影響が巷で話題になっているので、
今回は(今回も?)その流行にのってページ表示速度改善に関するお話です。

そもそも、皆さんはGoogleのPageSpeedInsightsって活用されていますでしょうか?

Googleが提供しているページの表示速度改善のための分析ツールで、
表示速度を改善するための改善提案をHigh,Middle,Lowの3段階の重要度で教えてくれます。

PageSpeed Insights - Google Developers

このツールで幾つかのサイトを分析してみると、
大概どこのサイトでも同じポイントを指摘されているのですが、
その中でも特に多いのがCSSスプライトの使用です。

●CSSスプライトって?

CSSスプライトに関する解説は色々なサイトでわかりやすく記述されているため、
ここでは詳細の説明は割愛させて頂くが、簡単に言うならばサイトに表示されている
複数の画像を一つの画像にまとめることでページの表示速度改善するテクニックです。

言葉だとイメージがつかないかもしれないので、
実際に使用されているページを見て頂いたほうが早いと思います。

Googleサービス一覧ページ

上記のGoogleのページには各サービスのアイコン画像が表示されていますが、
これらのアイコン画像は実は一つの縦長の画像にまとめられています。

CSSスプライトのための縦長画像

この画像の中から必要部分だけ表示しているのですね。

●CSSスプライトを実施してみる

恥ずかしながらご覧頂いているSEO-chもPageSpeedInsightsを利用すると、
GoogleからCSSスプライトを使いなさいと指摘されてしまっています。

いわゆる、「紺屋の白袴」状態なので、このSEO-chを使って
CSSスプライトに取り組んでみたいとおもいます。

CSSスプライトには主に下記の2つが必要です。

・複数画像を一つにまとめた画像
・まとめた画像のどの部分を表示するか指定するCSSルール

手間が掛かりそうな印象ですが、これ一つのツールで簡単に出来てしまいます。
CSS Sprite Generator

必要なことは一つだけで、まとめたい画像を一つのフォルダに入れて圧縮したものを、
このツールにアップロードするだけです。細かいオプション部分は必要に応じて設定頂ければ思いますが、
基本的にデフォルト設定で問題ないかと思います。

このページの右上に表示されている人気SEO記事の順位の画像をまとめてみると、
CSSのルールが表示され、加工された画像をダウンロードすることが可能です。

CSSスプライト結果

本当に手軽なので皆さん是非実施して見てください。


Top