スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
記事URL | スポンサー広告

Webサイトを最適化(高速化)する5つのお手軽な方法

Webサイトを最適化(高速化)する5つのお手軽な方法

5 Quick and Easy Ways to Optimise Your Website

Freelance Web Designer Lee Munroeの上記エントリーにて、Webサイトを最適化する5つのお手軽な方法が掲載されているので紹介します。

以下はおおまかな意訳です。

1.CSS Spritesを利用する

CSS Spritesとは、複数の背景用画像(background-image)を1つの画像にまとめ、CSSで背景画像の表示位置を調整して利用するテクニックです。

CSS Spritesのテクニックを利用することで、画像ファイルのサイズを小さくでき、HTTPリクエストの回数を減らすことができます

例えば以下の画像の左側は、従来どおり4つの画像にわかれており、CSSで背景画像を指定するときも別々に指定しますが、右側は4つのアイコンが1つの画像となっており、これをCSSで調整して4つのアイコンのいずれかを表示させるようにします。
CSS Spritesで画像表示をコントロール

CSSの例としては以下のような感じになります。

#services ol li{
background:url(images/homeicons.gif) no-repeat;/*1つにまとめた画像*/
}

#services ol li.design{
background-position:0px -460px;/*表示位置を調整*/
}

※CSS Spritesの詳細は「独学で極める “Webデザイン”の技と心:第10回 CSS Spritesでサイトを高速化」あたりが参考になります。

2.外部のCDNを利用する

CDNとはコンテンツデリバリーネットワークのことですが、ここでは単に外部にホストされているScriptを呼び出して使用する、ということを意味します。

なぜそうしたほうがいいのかと言うと、同じScriptを使用したWebサイトをユーザーがすでに訪問済みの場合、ブラウザにScriptがキャッシュされているので、再度Scriptを読み込む手間がなくなるためです。

我々が使用できる代表的なものとして「Google AJAX Libraries API」があります。jQueryやPrototypeなどの有名なライブラリを簡単に利用できます。

3.YSlow(Firefoxアドオン)を利用する

YSlowはFirefox用のアドオンで、Webサイトのパフォーマンスに関連した様々なレポートを出してくれます。このレポートを元に改善を行うことで、Webサイトの高速化がはかれるでしょう。

YSlowを利用するにはFirebugのアドオンが必要になるので、まずはFirebugをインストールしてください。

ダウンロードとインストールは以下のリンク先からできます。
Firebug :: Add-ons for Firefox
YSlow :: Add-ons for Firefox

4.JavaScriptのコードをHTMLソースの下部に配置する

JavaScriptのコードをHTMLソースの下部に記述することで、ページの読み込みが高速化する可能性があります。

ブラウザは基本的にHTMLソースを上から順番に読み込んでいくので、ページの表示と直接関係ないScript(例:アクセス解析用のスクリプト)はHTMLソースの下部に記述した方が望ましいです。

5.Web用に画像を最適化する

Webサイトで使用する画像を最適化しましょう。画質とファイルサイズはある程度トレードオフの関係なので、最も適切と思われるものにしましょう。

Photoshopだと、「Web用に保存」という書き出し方法がありますので、これを使用します。
Web用に保存

おまけ:その他のTips

  • ページをキャッシュする
  • CSSやJavaScriptの記述は外部ファイル化する(HTMLにインラインで記述しない)
  • CSSファイルを圧縮する
  • JavaScriptファイルを圧縮する

※CSSやJavaScriptファイルの圧縮は、可読性が失われるので、元のものもバックアップしておくとよいでしょう。


2・4・5あたりはすぐにでもできそう。1のCSS Spritesはある程度の知識が必要なので、お手軽かどうかは微妙ですが、頻繁に使用する画像に関してはやっておいたほうがいいかも。

▼スポンサードリンク

記事URL | Trackback(0) | Comment(0) | Web制作全般
1つ後の記事:凸版印刷を利用した名刺デザイン33選
1つ前の記事:グラフィックデザイナーのためのデザイン性の高いフリーフォント15選


















管理者にだけ表示を許可する

トラックバックURL
http://webclipping.blog122.fc2.com/tb.php/20-5e02c897
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。