今更なんだろうけども
今日、初めて「CSS sprite」なるものを覚えました。
複数の画像を1枚の画像に結合してCSSを使って表示内容を選択するというもの。
CSS sprite Generatorというサービスがあって画像を結合してくれて更にCSSまで書きだしてくれる。
アイコンやロゴをそれぞれ別のファイルにすると読み込みにそれだけ時間が掛かるのですが、1つの画像にすることによって、レンダリングの速度が上がるらしい。
それからHTMLから外部CSSを読み込むときは@importは使わない方がいいらしい。
linkを使うのが良いらしい。
Amazonの調査では「表示速度が0.1秒遅くなると、売り上げが1%減少する」らしい。
Googleの調査では「表示速度が0.5秒遅くなると、検索件数が20%減少する」らしい。
何にせよ表示速度が速いに越したことはない結果。
表示速度を改善するためのヒントをくれるのが「Page Speed」
stoker.jpさんの記事を参考にしました。
ここ数年WEBサイトを一から構築することがものすごく少なくなっていて、自分から新しい技術を取りいれることを忘れてしまっていました。
少しずつ遅れを取り戻さないといけないと。