IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

Webサイトの表示が遅い原因と解決方法

Webサイトの表示が遅い原因と解決方法

ページの読み込み速度が0.1秒遅くなると売り上げは1%落ち込むと言われているほど、Webサイトの読み込みスピードは重要です。

Webサイトの表示が遅い原因は主にCSSや画像、Javascriptを改善することで解決することができます。

Webサイトが表示される仕組み

ソースコードの上から下へ読み込む

Webサイトが表示される仕組みはHTMLというソースコードを検索エンジンが解釈して人間にわかるように表示しています。

HTMLのソースコードにはHTMLタグ、headタグ、bodyタグという順に記載されていますがその順番に機械は読み込んでいきます。

Webサイトの表示が遅い原因は答えを言うとCSSと画像とJavascriptがメインです。

表示が遅いということはbodyタグを通過していないから遅いのです。

または途中で記載しているimgタグの画像が重いから表示が遅いのです。

ここではほぼ全ての原因と対策を記載していきます。

その前にWebサイトの表示が今現状速いのか遅いのかを判断する為にPageSpeed Insightsで確認してみましょう。

PageSpeed Insightsで計測

PageSpeed InsightsはWebサイトの表示速度を計測できるGoogleが提供しているツールです。

スマートフォンやパソコンなどで見る場合キャッシュが残っている為速く表示できますが、初めてのお客様が閲覧した時はキャッシュが残っていないので遅くて他のページを見に行ってしまうということもあります。

このPageSpeed Insightsで速度を計測してみましょう。

PageSpeed Insightsで計測

点数は100点満点中99点ですが80点を超えていれば問題ないと思います。

点数が悪い場合はここにエラー内容が表示されると思いますが言っていることが難しくて何をどうすればよいか分からないといったケースもあると思いますので下記の作業を行えば90点以上だせます。

CSSは配置と数とインライン化で改善できる

CSSを改善して速度アップ

理想のCSSの書き方は圧縮したCSSをインライン化し後読みをする方法です。

容量が大きい程読み込み速度が遅くなるためCSSの圧縮を行います。

テキストエディタには「Minify」という圧縮を行う拡張機能がありますし、オンラインでもMinifyツールがあります。

また、インライン化をすることでサーバへの通信がなくなりそのまま処理を進めることができます。

CSSのインライン化はhead終了タグの上に書きます。

  1. <!-- HTMLの</head>タグの上に記載 -->
  2. <style type="text/css">ここに圧縮したCSSが入る</style>
  3. </head>

そしてbodyタグを通過した後にfontawaseなどの後から表示されても支障がないアイコンのCSSなどをJavaScriptで読み込みます。

後読みCSSはbody終了タグの上に書きます。

  1. <!-- HTMLの</body>タグの上に記載 -->
  2. <script>
  3. var link = document.createElement('link');
  4. link.href = 'https://use.fontawesome.com/releases/v5.0.6/css/all.css';
  5. link.rel = 'stylesheet';
  6. link.type = 'text/css';
  7. var head = document.getElementsByTagName('head')[0];
  8. head.appendChild(link);
  9. </script>
  10. </body>

しかし技術的に無理という方やケースバイケースもありますので改善案を記載致します。

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

headタグ内にCSSの読み込みがあればあるほどサーバへの通信回数が増えレスポンスが遅くなります。

CSSが2つ以上ある場合本当に全てのCSSファイルを必要としますか?

全く使わないのであれば読み込まないこと、そして少しだけ使っている場合はまとめ方がだめなので整理することで1つまたは2つの読み込みで事足ります。

  1. <head>
  2. <!-- 極力CSSを少なくする -->
  3. <link rel="stylesheet" type="text/css" href="test.min.css">
  4. <link rel="stylesheet" type="text/css" href="test2.min.css">
  5. </head>

画像はサイズと圧縮によって改善できる

画像を最適化して速度アップ

画像ファイルはWebサイトの表示速度に大きく影響する要因の1つです。

速度を向上させるにはリサイズの処理と、圧縮の処理が必要です。

リサイズ

リサイズ処理は例えば縦300px、横300pxで表示させるのであれば、できる限り元画像も同じ大きさに合わせてください。

確かにimgタグに大きさを指定すれば、その大きさで表示されますが、元画像を読み込んでからimgタグの大きさに合わせているだけですので、リサイズ処理でも改善することができます。

圧縮

画像の圧縮を行うことで画像を最適化することができ、速度アップに繋がります。

圧縮処理は人が見る限り全くと言っていいほど画素を落とさずに容量だけ小さくしてくれます。

スマートフォンもターゲットユーザとして考えなくてはいけない時代だからこそ、画像の圧縮処理は非常に重要です。

画像の圧縮は必須項目ではございませんが、モバイルフレンドリーという、スマートフォンに最適化されたWebサイトを検索順位のランキングに優遇する傾向にある為、圧縮をオススメします。

Javascriptは配置と圧縮で改善できる

javascriptを改善して速度アップ

ホームページに動きを出したい時に使われるJavascriptもheadタグ内で読み込まれるサイトをよく見かけます。

Javascriptの読み込み速度を向上させたい場合は、</body>タグの前に配置することで文字や画像を先に表示してからJavascriptは最後に読み込ませることにより、速度が改善されます。

CSSと同じくインライン化、圧縮を行うことで更に速度アップに繋がります。

その他にもスクリプトを非同期処理としてasyncをつけて改善することもできます。

正し非同期処理ですので動かなくなるスクリプトもありますのでケースバイケースで使い分かることで読み込み速度を改善することができます。

  1. <script type=”text/javascript” async src=”https://9box.jp/js/○○.js”></script>

その他の表示が遅い原因

画像、CSS、JavaScript以外にもWebサイトの表示が遅くなる原因があります。

ワードプレス

ワードプレスは少ししか見たことがないのですがphpから他のページを呼び出して更に他のページを呼び出してとサーバの通信回数が非常に多く、表示速度が遅くなっています。

SEOに特化したワードプレス等で無駄な処理をなくして作っている方がきっといるはずです。そういったワードプレスを使えば表示が遅いということはなくなります。

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp