×

人間は2秒も待てない!Webサイトを高速化させてユーザビリティを向上させよう

2015年9月13日 SEO

スピーディなチーター

以前、「Webページの表示速度を改善すべき理由」という記事でWebページ表示速度を改善するとユーザビリティ的にもSEO的にもメリットがあるということが分かりました。

戦闘機のように速くWebページの表示速度を改善すべき理由
Webメインのブログのつもりがグルメレポートばかり書いている今日この頃…。 そろそろWebのことを書こうと思います。 Web関連の...

Webページの表示で2秒以上待つとイライラし始めるというデータがあります。

今回は、フロントエンド、バックエンドという概念のもと、Webサイトの表示速度の高速化の概要を紹介します。

【フロントエンド編】Webサイト高速化概要

基本的にはWebブラウザからサーバーへのHTTPリクエストの回数と読み込むファイルの容量をいかに減らすかがポイントになります。その方法が下記。

  • html、CSS、javascriptの軽量化
  • JavaScript・CSSファイルへのサーバーへのリクエスト回数の削減
  • 画像の最適化(ツールを使った画像の圧縮)
  • CSSスプライト

1.html、CSS、javascriptの軽量化

サーバーの通信量を減らす=ファイルの容量を減らすことでWebページの表示速度を改善させます。

html、CSS、javascriptなどのファイルにはスペースや不要な記述があるものなど、容量が無駄に大きくなっている場合があります。html、CSS、javascriptを軽量化するツールなどを利用して、できるだけファイル容量を削減します。

2.CSS・jsファイルへのサーバーへのリクエスト回数の削減

Webページの表示に読み込まれるCSSファイルやjsファイル(JavaScript)はファイルの数だけHTTPリクエストの回数が多くなります。
複数のCSSファイル、jsファイルがある場合、可能な限りCSS・jsファイルそれぞれ一つのCSSファイル、一つのjsファイルにまとめるとHTTPリクエストの回数を削減できます。

また、複数のCSSファイル、jsファイルを結合してもHTTPリクエストの回数を削減できます。
WordPressではWP Minifyというプラグインが便利ですが、長期間更新されていないので注意です。

3.画像の最適化(ツールを使った画像の圧縮)

画像ファイルの容量が大きいと、それだけサーバーとの通信量が大きくなります。
通信量を減らすために、ツールを使用して表示させる画像を最適化し、画像容量を削減します。

【代表的な画像最適化ツール】

オンライン ソフトウェア
JPEGmini
TinyPNG
Caesium
PNGGauntlet

ツールの使い方(Caesium、PNGGauntlet)はこちらで紹介しています

画像圧縮サイト全体の画像サイズを30%削減に成功!!あるサイトの画像サイズを一斉に圧縮した話
このブログでは度々WEBサイト高速化の重要性を紹介しています。 【関連記事】Webページの表示速度を改善すべき理由 WEBページにお...

4.CSSスプライト

アイコンやグローバルナビなどで使用する画像を一つの画像にまとめることでHTTPリクエスト回数を減らします。
実際に画像を表示する時はbackground-position、background-imageプロパティで表示したい画像の位置や範囲を指定します。

【バックエンド編】Webサイト高速化概要

  • キャッシュの設定(.htaccessに記述)
  • SQLの最適化
  • サーバースペックのグレードアップ

1.キャッシュの設定(.htaccessに記述)

ウェブブラウザのキャッシュ(サイトデータをローカルに保存する)設定を.htaccessで行うことで高速化を実現します。
正確にはキャッシュが残っている場合、2度目のアクセスからはキャッシュを参照するので表示が高速化できるわけです。


ExpiresActive on
ExpiresByType image/png "access plus 1 days"
ExpiresByType image/jpeg "access plus 1 days"
ExpiresByType image/gif "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 days"
ExpiresByType application/x-javascript "access plus 1 days"
ExpiresByType application/x-shockwave-flash "access plus 1 days"
ExpiresDefault "access plus 1 days"

例えば、.htaccessには上のような記述をします。

ここではコードの詳しい説明は省略しますが、簡単に言うとimgageやらcssといったファイルをキャッシュする有効期限を1day(1日)に設定しています。
ウェブサイトにアクセスしてから1日はキャッシュを保持するということです。cssなどを頻繁に更新するという場合は、キャッシュの有効期限を短く設定して、あまり更新しない場合は長めに設定すると良いでしょう。

2.SQLの最適化

運営しているWebサイトでSQLを使用している場合、よく調べてみると冗長なSQLや実際に使用されないSQLが見つかります。SQLの知識があれば一度見直して最適化できればWebサイトの表示速度改善につながります。

3.サーバースペックのグレードアップ

最近では使用料の安い共用レンタルサーバーでもそこそこのスペックがあり、Webページの表示速度もそこそこです。
しかし、さらにWebサイトの表示速度を安定させたい場合は、コストがかかりますがサーバーのスペックを上げるという選択肢もあります。

まとめ

Webサイトの高速化について概要だけ触れました。

フロントエンド側の高速化は比較的手をつけやすいので是非やってみてください。

こんな記事を書きましたが、MIGOブログは結構無駄が多くて、高速化の施策もほとんどやっていません…。今後はMIGOブログの表示速度を改善して、ストレス無く閲覧できるようしたいと思います。

関連記事