Webサイトの軽量化と高速化

IDIA.JP > レポート > Webサイトの軽量化と高速化
IDIA.JP

モバイルでのWebサイト閲覧が主流になり、Webサイトの軽量化と高速化が改めて求められるようになった。利用者に快適にWebサイトを利用してもらうために、Webサイトの軽量化と高速化の視点からどのような工夫ができるかをまとめた。

なぜWebサイトの軽量化と高速化が必要なのか

利用デバイスと通信環境の変化

「ブロードバンドの普及」と「PCの高性能化」により、ナローバンド時代に培われたファイル容量削減のテクニックや低性能PCを考慮した簡素なデザインや機能の制限をする必要がなくなり、Webデザイナーはより自由な表現をすることが可能になった。

しかしモバイルデバイスの普及がすすむと、PCよりも性能が低いデバイスで、なおかつ固定回線よりも速度の遅い通信で閲覧する可能性が高まり、改めて容量削減や高速化を考えたWeb制作をしなければいけなくなった。最近ではいわゆる「モバイルファースト」の考え方のもと、モバイルデバイスで閲覧されることを優先的にデザインや機能、構成を検討する必要がある。

閲覧スタイルの変化

モバイルデバイスでのWebサイト閲覧は、仕事や勉強の休憩時間、あるいは移動時間やちょっとした待ち時間に行われることが多い。PCでの閲覧に比べて、高密度な情報を短時間で提供することが求められる。このため、レスポンスの早いWebサイトが好ましい。

画像の容量増加、動画コンテンツの一般化

デジカメやスマホのカメラの高性能化に伴い、写真の容量が大きくなった。またRetinaディスプレイなどの高ppiディスプレイが登場すると、それまでの数倍以上の画像容量が必要になった。時期を同じくして動画コンテンツも一般化し、より快適に動画を閲覧できることが人気サイトの一つの条件となった。

通信量の制限と使用時間の制限

高速なモバイル通信が普及し始めると、通信事業者は毎月の通信量に制限を設けた。またモバイルデバイスで用いるバッテリーの進化が液晶やCPUの高性能化に追いつかず、使用時間に制限が生まれた。必要以上に容量の大きなコンテンツは個人が保有する通信量や電源を圧迫するため、できる限り軽くすることがユーザーのメリットとなる。

表示速度とUX

表示スピードが1秒遅くなることで、PVが11%、コンバージョンが7%、顧客満足度が16%低下するという。

参考:The Performance of Web Applications: Customers are Won or Lost in One Second

Webサイトの軽量化と高速化の具体的な方法

情報デザインと情報アーキテクチャ

コンテンツの厳選
以前はSEOやLPOの観点から、サイトやページへの滞留時間を長くしたり、包含されるキーワード数を多くしたりするために、文章や写真などのコンテンツは多い方が良い、とされた。これは現在でもリリース直後のWebサイトなどでは効果的であると思われるが、すでに十分なユーザーの集まるWebサイトでは、掲載すべき文章や写真であるかを十分に吟味し、厳選したコンテンツを掲載することが望ましい。
機能の厳選
コンテンツの厳選と同様に、利用する機能も厳選する必要がある。AJAXを使ったアニメーションや検索フォームの入力補助などは、ユーザビリティ的観点からは使った方が良い物も多い。Webサイトの目的やユーザーニーズを考えたときに、本当に必要な演出や機能かどうかを十分に検討してから実装するようにしたい。
構造の単純化
Webサイトの構造をわかりやすく、シンプルにすると、初めて訪れたユーザーも戸惑うことなく利用できる。また管理者もメンテナンスがしやすいので、将来的にもWebサイトをよりよい状態で維持することができる。
参考:シンプル

サーバーとの通信回数を減らす

1ページで全コンテンツを包含するWebサイト
パララックスなどの表現方法が広まるにつれ、1ページで全コンテンツを包含するWebサイトも多く見られる。ページ移動によるタイムラグがないので、ユーザーはストレス無く利用することができる。jQueryMobileでは一つのHTMLから擬似的に複数のページを構成することができる。
CSSスプライト
CSSスプライトは複数の画像をひとつにまとめて、CSSで表示位置を指定することによりそれぞれの画像を表示させるテクニックである。特にアクセス数の多いWebサイトでは、サーバーの負担を軽くする効果は高い。
CSS、JavaScriptの最適化、結合、圧縮
CSSやJavaScriptを外部ファイルに分けることはよく行われる。これを一つのファイルにまとめたりミニマイズすることで、通信量も通信回数も減らすことができる。

ファイルの容量を減らす

画像の最適化
画像はその内容や目的に応じて、適切な形式を採用する。大きさや圧縮率なども適宜変更し、最低のファイル容量で最大に近い効果を発揮できる仕様を決める。
参考:ImageOptim
画像を使わずCSSで表現する
モバイルデバイスで使うことのできるブラウザの多くはCSS3に対応している。レガシーなブラウザで表示させるために画像で表現する必要があった角丸やグラデーションなど、CSSで表現できる物は積極的にCSSを用いる。
Webフォントを使う
一般的なPCにはインストールされていないデザインフォントを使う場合には、テキストを画像化する手法が一般的であった。画像の代わりにWebフォントを用いれば、総合的なファイル容量を少なくできる。アイコンも同様に、Webフォントで代替することもできる。この手法はファイル容量が少ないだけではなく、拡大や縮小にも強いため、多様なデバイスでの閲覧を想定したWebサイト制作でのメリットは大きい。
CSS、JavaScriptによる画像の選択表示
CSSのメディアクエリーなどを使って、ブラウザのウインドウ幅に応じて読み込む画像を変えることができる。またJavaScriptで画像を出し分けたり、回線速度を判定して画像を選択表示することもできる。
gzip圧縮
HTML、CSS、JavaScriptなどはgzip形式で圧縮し、容量を小さくすることができる。ただし、サーバーによっては使用できないこともある。

コンテンツを準備しておく

キャッシュ
主流となっているWordPressを筆頭に、多くのCMSでは動的にコンテンツを生成することが多い。キャッシュ機能を用いて静的なコンテンツを用意することは、サーバーの負担軽減や高速表示に有効である。
CDN
サーバーの負荷を分散させたり、応答不能になったりするのを防ぐために、コンテンツ配信用にチューニングされたCDNを用いる。CDNを使うと、音楽や動画と言った容量の大きなコンテンツをよりスムーズに伝送することができる。
参考:アカマイCloudFlareAmazon CloudFront
画像の事前読み込み
ユーザーのアクセスする頻度が高い画像は、プリロードしておくと良い。ユーザーの動線をあらかじめ想定したり、アクセス解析からユーザーの動きを分析し、プリロードするコンテンツを決める。

体感速度をあげる

SNSボタンやJavaScriptを後で読み込む
SNSボタンのように他のサーバーとの通信が発生するものは、先方のサーバーの状態によっては表示が遅くなることもある。これをHTML読み込み終了後に読み込むようにすれば、ユーザーが操作できない時間を短縮することができる。またJavaScriptはHTMLよりも後で読み込むと、先にHTMLが表示されるため、ユーザーの体感速度が向上する。
ローディング画面や付加情報を表示
容量の大きなコンテンツを読み込ませる必要がある時は、読み込み中であることをきちんと示す。またその間に利用者にとって有益な周辺情報を表示できれば、ユーザーに待ち時間を短く感じさせることができる。
マウスオーバーの演出、画像の切り替え
マウスオーバー時、あるいは画像の切り替え時などに「ゆっくりと浮かび上がるように」とか「一瞬遅れて」などの演出を施すと、ユーザーにもっさりとした印象を与えることがある。大抵の場合、ユーザーは演出よりも短時間で表示されることを好む。
わかりやすくシンプルなサイト構造
すでに述べたように、サイトの構造はシンプルであることが好ましい。シンプルであればあるほど、ユーザーは頭の中に正しいサイトマップを描くことができる。
文章デザイン
読みやすく、文法や論理構造のしっかりとした日本語は読むのに時間がかからないため、ユーザーの体感速度の向上に役立つ。また箇条書きは同じ内容の文章よりもすばやく正確に情報を伝えることができる。
参考:明快な文章の書き方箇条書きの7原則

参考

記事のデータ

公開日2014年3月8日
カテゴリー
タグ
関連する記事

記事を共有する

ひとつ古い記事: