2014/03/15 クリエイター

速度改善でコンバージョン率が40%アップ!?サイトのパフォーマンスを改善する3つのコツ

速度改善でコンバージョン率が40%アップ!?サイトのパフォーマンスを改善する3つのコツ 皆様はWebサイトの表示速度を気にしていらっしゃいますでしょうか?

質の良いユーザー体験を提供する上で欠かせないのは、情報を表示する速度をもたつかせない事。
もたついていると感じさせない事が非常に重要となってきます。

一般的に1秒サイト表示速度が遅れるたびに、CVRが7%ダウンすると言われています。
CVRや用語がイマイチわからない!と言う方は

ITエンジニア・クリエイターでも知っておきたい、Webマーケティング用語【基本編】
↑以前の記事をご覧いただければと思います。

また表示速度が「遅い」と感じたユーザーは60%以上がそのWebサイトに二度とアクセスしないと言われています。
表示に2.5秒以上かかると遅いと感じる傾向にあるようです。

背筋が凍る事実です。

スマートフォンでサイトを見るユーザーも非常に多く、サイトの速度改善は今後必須と言えるでしょう。

今回はWebサイトの表示速度を改善するポイント、フロント編をお送りいたします。
 

自分のWEBサイトの表示速度を知る

まずは問題点を正確に把握しましょう。
今回はGoogle ChromeのDeveloperToolsを使用します。Chromeを使い目的のWebサイトを開きます。

開いたらF12キーを押すと、画面下に↓



DeveloperToolsが表示されます。
右上の四角が二つ重なっているアイコンをクリックしウィンドウ表示にしたら、Networkをクリックします。



画面を切りWebサイトを表示している方に切り替えたら「Ctr + Shift + R」を押してキャッシュクリアリロードをします。
リロードしたら、また先ほどの画面に戻りましょう。
ウィンドウの下部が↓のようになっていれば成功です!



左からリクエスト数、そのページの容量、表示までかかった速度となっています。
loadは画像などを含めてかかった時間、DomContentLoadedはDOM構築にかかった時間です。

サンプルに使っているのは、scrmble.jpのトップページですが、記事コンテンツによってはこれより遅くなる事もあります。
回線速度等にももちろん影響されるのですが、もし3秒~4秒などかかってしまった場合は改善が必須と言えます。
 

画像のリサイズ・ファイルタイプの指定を適切に

正直言ってフロント部分での改善は、画像が殆どを握っていると言っても過言ではありません。
つまり容量です。1ページ全体の容量に注目しましょう。

・適切なサイズの指定
元々サイズが大きい画像を、縮小して使う場合は無駄に容量を増やしている事になります。
1280×791の画像サイズを120×74で縮小して使うのはナンセンスです。120×74で最初から書き出しましょう。
サムネイルで使うから・・・とめんどくさがらずに、二つ画像を用意しましょう!

・適切なファイルタイプの指定
基本的に写真のように、境目がはっきりしない画像はjpeg、イラストや広告のように境目がはっきりしている画像はgifが適しています。
色や再現率に細かくこだわるならpngですね。ファイルサイズは多めになるので、使用場所は考えましょう。
ファイルタイプをしっかりと選択すれば、クオリティと容量のバランスをうまく取ることができます。

・画像の圧縮
最後に、容量を圧縮してぎりぎりまでファイルサイズを小さくしましょう。
色々方法はありますが、Webサービスを使うのが簡単で早いと思います。
以下は実際に使用しているサービスです。

https://tinypng.com/
こちらはpngを圧縮するサービス。ドラッグアンドドロップで簡単に使えます。
本当に圧縮したのかと錯覚するほど劣化しません。しかもものによっては80%近く容量をカットしてくれます。

http://www.jpegmini.com/main/shrink_photo
こちらはjpegを圧縮するサービス。
低劣化で高圧縮。操作もドラッグアンドドロップで簡単です。
 

スタイルシートを工夫する

画像の最適化に比べると、効果は少し地味なのですがこちらも重要です。

・CSSファイルを分割する
共通のスタイルを定義しているcssと、そのページだけが持つcssに分割して読み込みましょう。
共通部分がキャッシュされるので、結果的に読み込むスピードがはやくなります。

・記述スタイルを工夫する
通常普通にCSSを書くとこのような記述になると思います。
.class{
  color : red;
}
.class ul{
  width : 100%;
}

これを
.class{color:red;}.class ul{width:100%}

上記のように記述すればCSSファイルの容量をかなり減らすことができます。
しかし開発中にこの表記をすると可読性が非常に悪く、非効率的なのでリリースの際にアプリケーション等を使い変換しましょう。

http://www.cssdrive.com/index.php/main/csscompressor/
↑こちらで圧縮した記述にする事が出来ます。

sassを使用している方は、コンパイラのスタイルをcompressedにしましょう。



 
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。