webサイトのページ表示速度を高速化するための基本5つ

speed WEBサイト制作で気を付けなければならないことの一つにWEBサイトの表示速度があります。
今日は、WEBページの表示速度を高速化させるためにやっておきたい基本的なことを書いておきたいと思います。

基本的には、「PCの性能」「ネットの回線速度」で速度が変わるのが一般的な考え方ですが、WEBサイトを制作する際には、回線速度やPCやスマホの性能が低い場合にもできるだけデータ量が軽くなるように配慮して制作する必要があります。
表示速度が遅いと、ユーザーの離脱率が高くなります。Amazon.comの調査では、表示速度が0.1秒遅くなると、売り上げが1%低下するというデータもあります。

HTTPリクエストの回数を少なくする

WEBページがブラウザに表示されるとき、最初に、土台になるHTMLが読み込まれてから、ページにリンクしてある画像ファイルやスクリプトが順番に読み込まれ、最終的にWEBページが表示されます。
この読み込みを「HTTPリクエスト」といい、ページに複数の画像やスクリプトが多く記述されていればいるほど、WEBページの表示に時間がかかる。ということになります。

出来るだけHTTPリクエストの回数を抑えるためには、そのページでは使っていないCSSやスクリプトは読み込まないように小さいアイコン類は、CSSスプライトにして一枚のファイルにまとめるなど、無駄なファイルを出来るだけ読み込ませないようにしてやる必要があります。

Javascript,CSSは全て外部ファイル化

Javascript、CSS等は全て外部ファイル化しましょう。
そうすることにより、2回目移以降に同一のファイルを読み込む際、クライアント側のファイルキャッシュが働くので、サイト内のページを閲覧している間は再度同じファイルを読み込みにいくことがなくなるので、速度アップに繋がります。
外部ファイル化してやると、コードも整理されてメンテナンス性も向上するので、一石二鳥ですね。

CSSはページのトップで読み込む

HTMLファイルというのは、コードが上から順番に解析されて、ブラウザにレンダリングされるようになります。 なので、ページの表示に関係してくるファイルはできるだけページの上部に読み込んでおくとレンダリング速度がはやくなります。
ですので、CSSファイルの読み込みの記述は、<head>タグの中の上のほうに記述してやるのがベターです。

Javascriptはページの最後に読み込む

Javascriptのファイルの読み込みを内に記述するのは、基本的な方法ではありますが、スクリプトが実行されるのは、基本的にページの読み込みが終わった後になります。
なので、ページ上部のほうにスクリプトが記述されてあると、スクリプトの解析に時間がとられてしまうので、レンダリング速度が低下しますので、表示が遅くなってしまいます。

スクリプトを読み込む際は、必ずしも<head>内に書かなくてはならないということはないので、ページの一番下の</body>の直前に記述してやるとよいでしょう。
そうすることで、ブラウザのレンダリング速度の向上に貢献できます。

gzip圧縮を使用した高速化

gzip圧縮とは、ファイルサイズを小さくするための圧縮方法の1つです。
gzip圧縮を取り入れることで、ユーザとWebサーバ間でやりとりされているHTMLのファイルサイズが小さくなるので、転送速度がアップします。

ここでは、簡単にですが、さらっと触れておきます。
Apache2.0系であれば、「mod_deflate」モジュールを使用します。
.htaccessが有効な場合は、下記の1行を記述すれば大丈夫です。
サーバの設定がいじれない場合、PHPであれば下記のコードをスクリプトの先頭に記述してやる事で有効化できます。 この記述で、出力バッファを gzip圧縮して、表示を最適化することができます。 これを使用するためには、PHPでZlib圧縮関数が使えるようになっている必要があります。

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/フルスタックwebデザイナー

2009年1月よりフリーランスのディレクター/フルスタックWebデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。

アーカイブ