MAPJP/ENTIPS2015.01.26vol.14WEBレスポンシブWebサイトの高速化B!こんにちは。デザイナーの寺田です。今回はレスポンシブWebサイトの高速化についてお話しします。レスポンシブWebサイトは、表示速度がPCでは気にならなくても、3Gや4Gなどのネットワーク環境のスマートフォンで見ると遅く感じることがあります。ここでは少しでもWebサイトの表示が速くなる方法をご紹介します。1.ブラウザキャッシュを利用する更新頻度の低いものはキャッシュを利用しよう!ブラウザキャッシュとは、ブラウザが表示したサイトの情報を記憶しておく機能のことです。Webブラウザのキャッシュを活用すると、一度読み込んだファイルはサーバーから情報を送る必要がなくなるため、Webサイトの高速化が期待できます。今回はアクセスしたユーザーの端末に対してキャッシュを行うようにする設定をします。記述は.htaccessにします。キャッシュさせるファイルの拡張子を指定します。複数指定する場合は、|で区切ります。その次にキャッシュの有効期限を指定します。有効期限は秒数で指定します。public"&lt;/Files&gt;その他、拡張子によって設定を変える方法など詳しくキャッシュを有効にするやり方をまとめているサイトはこちらです。数分!ページ高速化のためhtaccessでキャッシュ設定はやっておきましょう!2.ソースコードを見直そうHTMLの記述に誤りがないか確認しようHTMLの記述に誤りや不足があると、ブラウザがファイルを探すのに迷うことになります。そのことにより、時間がかかってしまうこともあります。誤りや不足がないようにし、ブラウザが情報を探しやすいようできるだけサイトの構造はシンプルにしましょう。深い階層にはしないで、シンプルなディレクトリ構造にするとブラウザが階層をたどりやすくなるので、高速化につながります。余分なタグがないか、画像の幅や高さの設定が適切かなど基本的なことで表示速度は速くなります。CSSでできることを活用しようCSSスプライトCSSスプライトは、アイコンなどのサイズの小さい画像を1枚にまとめて、CSSで場所を表示させる方法です。画像をまとめることにより、HTTPリクエスト(サーバーへ情報を要求すること)の回数を減らすことができます。サイトの高速化のために使われているCSSの技なので、活用していきましょう。CSSスプライトについてわかりやすいサイトです。CSSスプライトについてあれこれ。Webサイトの高速化・最適化」では、ページの高速化についてまとめています。そのなかにロスレス圧縮について紹介しています。圧縮のオススメのサイトがこちらです。vol.2も参考にしてみてくださいね。まとめいかがでしたでしょうか。ユーザーがWebページの表示を待てるのは2秒までと言われています。3秒以上かかると40%以上のユーザーがページを離れていくと調査結果もあります。ユーザーが満足するWebサイトにするためには高速化が必要です。良いサイト作成の参考になれば、うれしいです。POSTS新着TIPSvol.1012019年ロゴマークをリニューアルしたブランド5選2019年にロゴをリニューアルした企業6選vol.100BOELのスタッフが大切にしていることBOELのスタッフがオフィスでの過ごし方を通じてたいせつにしていることをご紹介します。7選WEB業界でよく使う単語の中でよくあるスペルミスと間違えやすい点をいくつかリストアップします。vol.98ブランディングで動画を活用するメリットと成功のポイント!ブランディング動画を活用するメリットや成功のポイントを事例と合わせて紹介します。幾何学フォントTOP32019年の幾何学書体トップ3をご紹介いたします。一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザインvol.43動画コーデックをマスターしよう映像データのエンコード、動画メディア配信の基礎からターゲットに合った圧縮方法vol.45すぐに使える!アコーディオンメニューの実装アコーディオンメニューをよりリッチに。日本古来より伝わる色。デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。お問い合わせをするオンライン見積もりフォームさまざまなブランディング事案に対応します。お気軽にご依頼ください。PERMISSION.。