Web Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」

EC studio EC studio デザインブログ

EC studio
EC studio デザインブログ
EC studio デザインブログの記事一覧

2009年11月10日投稿者：赤堀　巴絵

Web Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」

2009年11月11日～13日に東京でWeb Directions East2009がはじまります。
今回のWDEでは、ニコール・サリバンさんがワークショップ・カンファレンスで
「ウェブサイトパフォーマンス」について講演をおこなわれます。

なので、その予習のために以前大阪で講演された
「パフォーマンスアップのウェブ技術 WDE-Express」をまとめたいと思います。

はじめに

今回大阪でスピーカーをおこなってくださった方は
Web Directions Eastのオーガナイザーでもある菊池さんでした。
2009年10月10日にアップルストア心斎橋でおこなわれた
「パフォーマンスアップのウェブ技術」のまとめです。

どうしてパフォーマンスアップをするのか？

サイトを最適化して早く表示させることで、
コンバージョンがあがるというデータがあるためです。
（スライドで実際のデータも見せていただきました）

ということはパフォーマンスアップすることは
サーバーの容量を軽くしコストを下げるだけでなく、
コンバージョンをあげることもできるということです。

パフォーマンスアップするには

いくつかの最適化の方法を教えていただいたので
すぐにできる非常に簡単な方法のみをここでまとめたいと思います。

画像をはpngを使おう

pngでもpng8で書き出そう。
png24などを使うとjpgやgifで書き出した方が軽くなってしまうこともあるそうです。
書き出す方法としてはFireworksをオススメされていました。

pngを圧縮しよう

pngで書き出すだけではなくさらに画像を圧縮しましょう。
何十個と画像最適化ツールを使った上で1番オススメがpunypngだそうです。

punypng
http://www.gracepointafterfive.com/punypng/

head内のCSSとJavascriptを分けてまとめよう

head内のCSSとjavascriptを読み込む順番で読み込むスピードが変わるため、
記述方法によっては読み込み方が遅くなってしまうことがあります。

早く読み込むための記述方法は
CSSを上にjavascriptを下に記述するのがいいそうです。

例：
<head>
<link rel=”stylesheet” type=”text/css” href=”base.css” />
<link rel=”stylesheet” type=”text/css” href=”content.css” />
<script type=”text/javascript” src=”rollover.js” />
<script type=”text/javascript” src=”pagescroll.js” />
</head>

上記の方法は今からでもすぐに実行できそうな最適化なので、
ぜひ試してみてはいかがでしょうか？

他にも様々な最適化方法、ツールの使い方を講演内で紹介されていました。
Web Directions Eastでワークショップ・カンファレンスをされる
ニコール・サリバンさんの紹介もされていました。

実際にやってみた

オススメされていた画像最適化ツールpunypngを
実際のEC studioのサービスサイト画像に使ってみました。

全体での30%の圧縮に成功しました。
ものによっては全然圧縮されないものもありましたが、
ほとんどの画像が圧縮されました。なかには90%…という画像も。
実際にこのブログではバナーで試してみたいと思います。

例：webanalystバナー

最適化前

最適化後（29%圧縮）

これには衝撃を受けました。
画像が重くて気になるなぁ～と思ってるサイト制作者の方は
1度やってみられると驚かれると思います。

最後に

今回の講演を聞いて、
パフォーマンスアップは1つの最適化だけおこなってもあまり実感が得られないが、
全体を少しずつ最適化していくことでよりユーザーに優しいサイトに
近づけていくことができると感じました。
パフォーマンスアップは日頃から意識してサイトを作成していくことが
大切であると気づくことができました。

もっと詳しく「ウェブサイトパフォーマンス」を知りたい方は
Web Directions East2009でニコール・サリバンさんの
ワークショップ・カンファレンスにぜひ参加してみてください。

もちろん弊社スタッフも何名か参加します。
Web Directions East2009今から楽しみにしています！

パフォーマンスアップのウェブ技術の参照記事
30分でできる！Webサイトを高速化する6大原則
http://ascii.jp/elem/000/000/457/457749/

Web Directions East
http://east.webdirections.org/wde/2009/