TIPS

2015.01.26
vol.14

WEB

レスポンシブWebサイトの高速化

vol.14 レスポンシブWebサイトの高速化

こんにちは。デザイナーの寺田です。
TIPS vol.13「レスポンシブWebデザインをオススメする理由」に引き続き、
今回はレスポンシブWebサイトの高速化についてお話しします。
レスポンシブWebサイトは、表示速度がPCでは気にならなくても、3Gや4Gなどのネットワーク環境のスマートフォンで見ると遅く感じることがあります。
ここでは少しでもWebサイトの表示が速くなる方法をご紹介します。

1.ブラウザキャッシュを利用する

1.ブラウザキャッシュを利用する

更新頻度の低いものはキャッシュを利用しよう!

ブラウザキャッシュとは、ブラウザが表示したサイトの情報を記憶しておく機能のことです。
Webブラウザのキャッシュを活用すると、一度読み込んだファイルはサーバーから情報を送る
必要がなくなるため、Webサイトの高速化が期待できます。
今回はアクセスしたユーザーの端末に対してキャッシュを行うようにする設定をします。
記述は.htaccessにします。
まず、キャッシュさせるファイルの拡張子を指定します。
複数指定する場合は、|で区切ります。
その次にキャッシュの有効期限を指定します。有効期限は秒数で指定します。

その他、拡張子によって設定を変える方法など詳しくキャッシュを有効にするやり方を
まとめているサイトはこちらです。
たった数分!ページ高速化のためhtaccessでキャッシュ設定はやっておきましょう!

2.ソースコードを見直そう

2.ソースコードを見直そう

HTMLの記述に誤りがないか確認しよう

HTMLの記述に誤りや不足があると、ブラウザがファイルを探すのに迷うことになります。
そのことにより、時間がかかってしまうこともあります。
誤りや不足がないようにし、ブラウザが情報を探しやすいようできるだけサイトの構造は
シンプルにしましょう。
あまり深い階層にはしないで、シンプルなディレクトリ構造にするとブラウザが階層を
たどりやすくなるので、高速化につながります。
また余分なタグがないか、画像の幅や高さの設定が適切かなど基本的なことで表示速度は
速くなります。

3. CSSでできることを活用しよう

3.CSSでできることを活用しよう

CSSスプライト

CSSスプライトは、アイコンなどのサイズの小さい画像を1枚にまとめて、
CSSで場所を表示させる方法です。
画像をまとめることにより、HTTPリクエスト(サーバーへ情報を要求すること)の回数を
減らすことができます。
サイトの高速化のために使われているCSSの技なので、活用していきましょう。
CSSスプライトについてわかりやすいサイトです。
CSSスプライトについてあれこれ。

4.画像の最適化

画像の最適化

TIPS vol.2が参考になる!

TIPS vol.2「表示速度が激変 Webサイトの高速化・最適化」では、ページの高速化について
まとめています。
そのなかにロスレス圧縮について紹介しています。
圧縮のオススメのサイトがこちらです。TinyPNG
TIPS vol.2も参考にしてみてくださいね。

まとめ

まとめ

いかがでしたでしょうか。
ユーザーがWebページの表示を待てるのは2秒までと言われています。
3秒以上かかると40%以上のユーザーがページを離れていくと調査結果もあります。
ユーザーが満足するWebサイトにするためには高速化が必要です。
良いサイト作成の参考になれば、うれしいです。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。