creatersnest53

Webサイトを高速化するためのテクニック20選


Webサイトの表示は高速なほどよいとされています。ブロードバンドが普及した現代であっても、これは不変の事実です。むしろ、ナローバンドが一般的だった昔よりも「Webはすぐに表示されるのが普通」と認識されている現代の方が速度がユーザーエクスペリエンスに与える影響は大きいとも言えます。少しでもWebサイトを高速化するためのテクニック20選をご紹介します。

アイコン、ロゴは画像を使わずWebフォントを使う

Webフォントで代用できる部分を画像で作ったままにしていませんか? Retinaディスプレイへの対応という点でもWebフォントを積極的に活用しましょう。

Google Fonts

Google Web Fonts

 

Font Awesome  the iconic font and CSS toolkit

Font Awesome

 

画像は極限まで圧縮をかける

JPEGminiTinyPNGなどのツールを使い、不必要な肥大化を防ぎましょう。Photoshopで書き出したのをそのまま使うのはNGです。

JPEGmini   Process your photo

JPEGmini

 

TinyPNG – Compress PNG images while preserving transparency

TinyPNG

 

PNG画像やGIF画像はCSSスプライトで表示する

ソースの分かりやすさという点では懸念が残りますが、画像は使用するものを1画像ファイルにまとめて、CSSで位置を指定して読み込む「CSSスプライト」テクニックを使いましょう。オンラインツールの「CSS Sprite Generator」を使えば、複数の画像ファイルをZIPで圧縮して転送するだけで、CSSスプライトのソースを作ってくれます。

CSS Sprite Generator  Editor  and Code

CSS Sprite Generator

 

CSS3でボックスやシャドウを表現する

画像ではなくCSS3で実現できることはとにかくCSS3を使いましょう。CSS3に対応していないInternet Explorerには「CSS3 Pie」などのライブラリで対応を。

CSS3 PIE  CSS3 decorations for IE

http://css3pie.com/

 

CSSやJavaScriptから改行やコメントを削除する

CSSやJavaScriptに余計な改行やコメントが入っているとわずかですがファイル容量が増えてしまいます。オンラインツールで簡単に作成できますので、制作が完了した最後に使ってみましょう。もちろん、後日の改修のために改行やコメント入りの元ファイルは別途残しておきましょう。

Compress javascript and css. Amazing code compression. Quick easy and free

Compress javascript and css

 

gzip圧縮を使って容量を減らす

サーバが対応できれば、HTML、CSS、JavaScriptなどのファイルは「gzip形式」で圧縮することで大幅に容量を削減できます。

GZIP

キャッシュを指定する

WordPressのようなCMSは静的なHTMLファイルではなく、動的にHTMLファイルを生成しています。常に動的に生成させるのでは、表示が遅くなるばかりかサーバの負荷も増えてしまいます。生成されたHTMLを静的なHTMLとしてキャッシュしてくれるプラグインがたくさんありますので、利用を検討してみましょう。

WordPress › W3 Total Cache « WordPress Plugins

w3 Total Cache

 

画像のwidthとheightは正しく指定しておく

一枚の画像を使い回すようなレスポンシブデザインのサイトでは使いづらいテクニックですが、画像は「画像ファイル」と「それを呼び出すHTML」で正しくwidthとheightを指定しておき、ブラウザに余計な処理を入れないようにしましょう。

定規

 

大量に画像がある場合は遅延読み込みにする

1ページ内に大量の画像がある場合、すべての画像においてHTTPリクエストが完了するまでページが表示されません。ページ下部にあるような画像は最初から読み込む必要がないので、「その表示領域(スクロール領域)に入ったら画像を表示する」という指定を行い、遅延読み込みにすればレンダリングのジャマをしません。jQueryプラグインのLazy Loadを使うと便利です。

Lazy Load Plugin for jQuery

Lazy Load Plugin for jQuery

 

SNS系ボタンは遅延読み込みにする

いまや必須ともいえるFacebookの「いいね!」やTwitterの「ツイートする」ボタンは読み込み完了まで非常に時間がかかります。こういった重たいものをメインのコンテンツと同列に読み込ませるとメインのコンテンツの表示に時間がかかってしまいます。明示的に「遅延読み込み」にさせて、表示を妨げないようにしましょう。「いいね!」を押すのはメインのコンテンツを読んだ後のはずです。

sns

参考:Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

 

使っていないJavaScriptやCSSは呼び出さない

コピペでHTMLを作っていると、フッターあたりに本当は使っていないJavaScriptの呼び出しが残ったままになっていることがあります。また、同じJavaScriptを重複で呼び出してしまっていることもあります。手間はかかるかもですが、そのWebページで使っていないJavaScriptやCSSは呼び出さないようにしましょう。

 

CSSは「@import」で読み込まず、「link」で指定する

CSSを読み込む際に、「@import」で読み込むと「link」よりもHTTPリクエストが増えてしまいます。極力「@import」は使わないようにしましょう。また、CSSファイルが複数あると、やはりHTTPリクエストが増えてしまいます。管理上問題がなければ、なるべく1ファイルにまとめて、呼び出されるファイル数は極力減らしておきましょう。

 

CSSは上に置く

CSSは<head>〜</head>の上部で呼び出すようにして、レイアウト情報を素早く正しく伝えましょう。CSSが読み込まれないとページの表示が始まりません。

 

JavaScriptは下に置く

JavaScriptは<head>〜</head>の中で呼び出さず、</body>の直前で呼び出すようにすれば、ページのレンダリングをジャマしません。ただし、Google Analyticsのように</head>直前に記述した方がよいものもあります。

 

CSSのユニバーサルセレクターは使わない

アスタリスク記号(*)を使ったユニバーサルセレクターを用いて、すべての要素にCSSを適用しようとすると、ブラウザは本当に「すべて」に適用させるために相当な時間をかけて処理を行います。つい定型文のように書いてしまうCSSリセットも、必要があるのかどうかを考えてみましょう。

NG

 

CSSのセレクタはid、classの単体のみにする

CSSでスタイルを決める際のセレクタはなるべくid、classの単体のみにして、子孫セレクタや不必要なセレクタを使用しないようにしましょう。たとえば、

body div ul li {
}

というCSSは

div li {
}

と書き直しても問題ないはずです。

 

小さいは画像はbase64形式で埋め込む

容量が1KB以下のような、極端に小さい画像は画像ファイルとして外部から読み込むのではなく、「base64」形式に変換してテキストと同じように直接HTMLファイル内に埋め込んでみましょう。外部から画像を読み込むHTTPリクエストを削減できます。ただし、base64変換すると容量そのものは元ファイルより20%程度増えてしまうため、容量が大きなファイルは画像ファイルのまま、小さい画像だけbase64で扱うようにしましょう。画像ファイルのBase64エンコード ツールのようなツールで画像ファイルをbase64形式にした後で、imgタグのsrc属性に指定れば画像が表示されます。

画像ファイルのBase64エンコード ツール

画像ファイルのBase64エンコード ツール

 

レスポンシブデザインにしない

「レスポンシブデザインで制作します」とアピールすると、なにか魅力が二割増しになるような気もしますが、滅多に更新作業がないようなサイトであればレスポンシブデザインは余計なデータを増やすだけなので、使うべきではありません。個別にHTMLと画像を用意して、サーバ側で振り分ける処理を行いましょう。

PCとスマートフォン

 

ページの上部に重たいコンテンツを置かない

ファーストビュー範囲にリッチなコンテンツがあると見栄えはよくなりますが、それにこだわるあまりにユーザーへ待ち時間を強いてよいのかは検討の余地があります。文章の見せ方も同じで、ページの上部はなるべく簡潔に書き、長文はページの下部に配置した方が心理的にも読んでみようという気になります。ほとんどの場合、Webページは上から下へスクロールし、上から順番に読まれるということを意識してデザインしましょう。

 

InstantClickを使って先読みする

これはちょっと反則技なので最後に紹介します。JavaSciptライブラリの「InstantClick」を使うと、ユーザーがページ内のリンクURLへカーソルを乗せた瞬間からバックグラウンドでリンク先の先読みを行い、リンクを遷移した際の体感速度を向上させます。カーソルが乗っただけで(勝手に)先読みを行うことが正しい行いなのかどうかという葛藤はありつつも、体感速度はたしかに向上されるライブラリです。

InstantClick — JS library to make your website instant

InstantClick

 

おわりに

いかがでしたでしょうか。今回はWebデザイナーができる範囲ということに限定して紹介してみました。Webを仕事にしていると、ブロードバンド回線と最新のPCにモダンなブラウザを当たり前のように使ってしまいますが、クライアント先の担当者はポケットWi-FiにWindows7でInternet Explorer8を使って動作確認しているなんてことがあります。すべての人にやさしく、なるべく軽くて速いサイトを目指してみましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【上級者向け】Photoshopのテクニックが参考になるサイト10選