Placeholder image

【2019年最新版】サイトスピード(表示速度)の上げ方一覧

サイトスピードが遅いと中々WEBページが開けずに、イライラの原因にもなります。

せっかくアクセスしてくれたユーザーが待ちきれず、離脱してしまう可能性も高くなるのです。

それではサービスや商品の宣伝には繋がらなくなってしまうので、サイトを運営する意味がなくなってしまいます。そこでサイトスピードの上げ方一覧を紹介します。
目次
  1. HTTPのリクエスト回数を減らす
  2. 画像の最適化
  3. ファイルの軽量化
  4. 高速化されたサーバーを使う
  5. jQueryは避ける
  6. キャッシュの有効
  7. CSSのインライン化
  8. コードの圧縮
  9. オフスクリーンの遅延読み込み
  10. 定期的なメンテナンス
  11. 1秒の遅れが影響を与える

HTTPのリクエスト回数を減らす

サイトスピードのアップが出来るとされているのが、HTTPリクエストの回数を減らすことです。

WEBサイトの一つのページを表示するために必要な時間の80パーセント以上は、ページ内に使われている画像などのパーツをダウンロードすることに使われています。

パーツをダウンロードするためにはHTTPリクエストが行われるので、画像やJSの数を減らしてリクエストの回数を軽減させるのが大切です。

画像の最適化

表示される画像を最適化することも高速化に繋がります。使用したい画像があればトリミングをして、サイズを調整してからアップするようにします。

トリミングをすれば画像の容量も軽くなり、サイトの表示時間も短縮されるのです。画像の種類によってjpgでアップしたり、pngで処理をするなど工夫します。

Photoshopなどのソフトでも最適化することも出来ますが、枚数が多いと時間が掛かるので、無料で圧縮をしてくれるサイトを利用するのが一般的なようです。

ファイルの軽量化

画像だけでなく、ファイルも軽くします。WEBサイトで使われるHTMLやCSS、JSファイルも小さくしておきます。

ファイルサイズも軽量化しておくことで、スピーディーに画面が出てくるようになるのです。

不要となる改行やスペース、タブインデントを丁寧に取り除きます。手作業で取り除くことも可能ですが膨大な数になると大変なので、自動的に圧縮してくれるソフトを利用すると楽です。

高速化されたサーバーを使う

高速化しているサーバーを使うのも一つの手です。サイトの表示時間は使っているサーバーの速度によって左右されることがあります。

利用しているサーバーが遅ければサイトの表示速度もゆっくりに、速ければサイトが表示される時間もスピーディーになります。

サーバーを選ぶときには出来るだけ高速化されたサーバーを選び、サービスの向上を目指すのが大事です。

jQueryは避ける

JavaScriptのライブラリであるjQueryは、なるべく利用しないこともコツです。

JavaScriptを使い始めた初心者でも利用しやすいですが、ファイルが大きく、読み込みに時間が掛かってしまう傾向にあります。

JavaScriptよりも実行速度が遅いことがあるので、便利だからという理由だけでjQueryは使わないようにします。

キャッシュの有効

ブラウザのキャッシュを有効にしておくこともポイントです。サイトの情報をその都度受け取っているとどうしても時間が掛かります。

キャッシュをはじめから有効にしていれば2回目の表示から素早くサイトが表示されるようになりますし、ユーザーを待たせる心配も無くなります。

ですがサイトのCSSを修正したときなど、書き直した情報がすぐに反映されなくなるので、CSSファイルの名前の後ろ側にクリエ一文字を加えて、新しい情報が即座に読み込めるようにします。

CSSのインライン化

CSSをインライン化してしまう方法も有効です。インライン化はCSSの小さいコードを外部のファイルにはせずに、そのままの状態でHTML文書の一部として埋め込んでしまいます。

インライン化することで容量も節約することができ、サイトの表示も速くなることがあります。

コードの圧縮

コードを圧縮するのも重要です。サイトの構築で使っているコードを圧縮すればその分読み込みの速度もアップします。

コードの圧縮を行うと不要な改行は削除されることが多く、一目見ただけではどのようなコードを使っているのか分かりづらくなります。

コードが難読化されるので、セキュリティーの向上になるのがメリットです。

オフスクリーンの遅延読み込み

スピードの上げ方の一覧には、オフスクリーンの画像の遅延読み込みもあります。

これは、サイトを表示させるときにあまり必要ではない画像の読み込みをあえて遅くするやり方です。

サービスの説明や商品の紹介のために画像を沢山使っているサイトに向いている方法です。

WordPressでWEBサイトを作っている場合は、プラグインをインストールするだけで出来ます。

定期的なメンテナンス

また常に意識したいのが、CSSセレクタやルールセットの定期的なメンテナンスです。

WEBサイトの更新をしていると必ず使わなくなったCSSが生まれてしまうので、時間の短縮のためにも使わなくなったものは削除するようにします。

さらにidやclassも適切に振り分けて、マッチングの処理をする時間も減らします。

1秒の遅れが影響を与える

WEBサイトの1ページだけ閲覧して、すぐに帰ってしまった人たちを表した割合を直帰率と言います。

わざわざサイトにアクセスしても、すぐに離脱してしまった人たちです。離脱率はサイトの表示時間が1秒でも遅れると影響を受け、遅ければ遅いほど離脱も上がります。

たかが1秒の遅れだと思わずに、適切に対処することが肝心です。