最新情報をお届け
メルマガ登録はこちら➔

とっても手軽なページ表示速度改善テクニック: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スプライト結果

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


最新のコラム

Contact us

お問い合わせ

少しでも不明点等ございましたら
お気軽にお問い合わせください。

※こちらからの営業目的の連絡はご遠慮ください。

会社名
ご担当者名
ふりがな
電話番号
メールアドレス
対象URL
お問合せ内容
ご予算

1.弊社からのご案内を希望されるお客様を除き、ご記入いただいた情報はお問い合わせに対するご案内以外には使用しません。
2.弊社からのご案内を希望されるお客様には、弊社からセミナーやキャンペーンに関する情報のご案内やアンケートのご協力をお願いする場合があります。
3.詳細なご相談内容については、必要に応じて別途NDA(機密保持契約)の締結をさせていただきます。
4.弊社は皆様のプライバシーを尊重し、個人情報を保護するために細心の注意を払っています。詳細は、以下のリンクよりご確認ください。

個人情報保護方針(別ウィンドウで開きます)
情報セキュリティ基本方針(別ウィンドウで開きます)

当サイトでは、実在性の証明とプライバシー保護のため、セコムトラストネット株式会社のSSLサーバ証明書を使用し、SSL暗号化通信を実現しています。
GlobalSignステッカーをクリックすると、サーバ証明書の検証結果をご確認いただけます。

Top