WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

たかし

2017/12/19

WEBサイトの表示速度が影響するもの

投稿者: たかし
カテゴリー: マークアップ >テクニック

WEBサイトの表示速度は、SEOやコンバージョン率に影響する重要なものです。
その影響は、表示速度が1秒遅いだけでコンバージョンが7%減少するとも言われています。
今回は、つい見落としてしまいがちなWEBサイトの表示速度について、改善方法をご紹介していきます。

WEBサイト表示速度の影響

もし、内容やボリュームが同じようなWEBサイトがあった場合、表示速度は検索のランキング要因なるとGoogleは公表しています。ランキングへの影響度は比較的小さいようですが、ユーザー視点で考えれば、遅いよりも早い方が良いですね。

1993年にWEBサイトのユーザビリティ研究の第一人者である
ヤコブ・ニールセンが、「応答時間に対する限界」について調査を行いました。

その結果、以下の事実が分かったようです。

  • 0.1秒以内であれば、人の思考は瞬時に表示されたと感じる。
  • 1秒以内であれば、人の思考は途切れることなく流れる。0.1秒~1秒以内であれば特別に処理を施す必要はなく、ユーザーは自由に操作できると感じている。
  • 10秒以内であれば、人の思考は途切れながらも続いている。
    ただし、限界に近い状態。他の作業へ意識が向きつつあり、いつ結果が返ってくるのか知らせる必要がある。

10秒以上だと内容を見ることなく、その時点で離脱してしまう人が多いようです。
この結果から、表示速度はユーザーをWEBサイトに誘導するために必要な要素と言えます。

参考
Webサイトの応答時間

現状の調べ方

あなたのWEBサイトの表示速度はいかがでしょうか。
以下から簡単にチェックすることができます。
URLを入力して「分析」ボタンを押してください。

Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

100点満点で採点され、改善できる部分を指摘してくれるので便利です。
画像やCSS・jsの圧縮は比較的容易にできるのでオススメです。
ただ、CSS・jsは圧縮すると管理面に影響がでてくるので実施する場合は注意してくださいね。

表示速度を上げる方法

表示速度を早めるためにどんな方法があるのかご紹介します。

  • HTTPリクエストの回数を減らす
  • ブラウザキャッシュを使用可能にする
  • ファイルサイズを減らす
  • 画像・CSSを圧縮する

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

WEBサイトを表示する時は、htmlをサーバーへリクエストし、返ってきたhtmlをブラウザが表示しています。その時に、htmlに他のファイルを読み込むように記述がされているのであれば、それが表示を遅くする原因になっています。
改善方法として下記が挙げられます。

  • 画像、CSS、jsは可能な限り読み込む量を減らす。
  • ロールオーバーやレスポンシブ表示をする場合は、画像で処理するのではなく、CSSで対応する。
  • 複数のCSSを読み込んでいる場合は、一つにまとめる。
  • ページのリダイレクト処理をなくす。

あまり複雑な構造よりも、シンプルに作った方がリクエスト回数は減るようです。

ブラウザキャッシュを使用可能にする

WEBサイトを表示した時に、画像やCSSなどのファイルを特定の場所に保存します。
こうすることで、次回以降にアクセスした時の表示速度を早くします。

ただし、「更新したのにページに反映されない!」といったトラブルが起きる場合もありますので、一概に良いとも言えません。
こういったトラブルはキャッシュをクリアすればほぼ改善されますが、最初からキャッシュさせないように作られているサイトも少なくないようです。

ファイルサイズを減らす

ファイルサイズを小さくすると表示速度は早くなります。
WEBサイトは、まずhtmlを上から下まで読み込み、そこから必要な要素をダウンロードしています。その時に一つ一つの要素が軽い方がスムーズに処理できます。

画像・CSSを圧縮する

上記のファイルサイズにも関係していますが、画像やCSS・jsを圧縮すると表示速度が早くなります。それぞれのサイズは微々たるものでも、それが数百といった数になるとそれだけファイルサイズが大きくなり、表示速度に影響します。

圧縮といっても、画質や動作面には大きく影響しないので、オススメです。

以下に簡単にデータを圧縮できるサイトをご紹介します。

Optimizilla – JPG,PNG圧縮
http://optimizilla.com/ja/

CSS Minifier – CSS圧縮
https://syncer.jp/css-minifier

JS Minifier – JavaScriptの圧縮
https://syncer.jp/js-minifier

非常に手軽に圧縮できますが、使用は自己責任でお願いいたします。

おまけ:表示速度が早いサイト

『広告宣伝費』が多いトップ300社ランキング」のうち、ページの表示速度を計測した「ページ表示速度ランキング」が発表されました。

以下は表示速度のランキングです。
1位のニコンはテキストベースのサイトで、商品画像も一つ一つが小さく全体的に早く感じました。

Webページ表示時間順位 会社名 国内Webサイト表示時間(秒) 海外Webサイト表示時間(秒) 広告宣伝費(順位) 広告宣伝費(億円) 売上高(億円)
1 ニコン 0.311 3.455 24 474 7,492
2 ファーストリテイリング 0.333 2.593 16 716 17,864
3 ヤマダ電機 0.506 36 287 15,630
4 フジ・メディアホールディングス 0.575 30 329 6,539
5 住友ゴム工業 0.664 2.599 35 299 7,566
6 大正製薬ホールディングス 0.686 3.813 48 220 2,797
7 ユニー・ファミリーマートホールディングス 0.850 49 217 8,438
8 住友化学 0.941 10.943 26 444 19,542
9 住友不動産 1.015 2.772 59 192 9,251
10 ウエルシアホールディングス 1.024 88 125 6,231
11 HOYA 1.042 7.543 84 129 4,789
12 キヤノン 1.086 1.926 19 587 34,014
13 サッポロホールディングス 1.095 8.015 54 204 5,418
14 スクエア・エニックスホールディングス 1.165 3.581 39 255 2,568
15 丸井グループ 1.274 90 124 2,370
16 ミクシィ 1.281 53 208 2,071
17 キリンホールディングス 1.307 5.982 17 629 20,750
18 ブラザー工業 1.321 1.105 67 165 6,411
19 ファンケル 1.335 3.972 73 148 963
20 オリックス 1.337 10.782 42 253 26,786
21 伊藤園 1.364 3.492 83 129 4,758
22 ガンホー・オンライン・エンターテイメント 1.384 7.707 71 149 1,124
23 JT 1.393 3.507 38 261 21,432
24 ヤマハ 1.409 4.845 64 175 4,082
25 三菱電機 1.490 4.398 31 325 42,386
26 住友商事 1.528 2.624 58 192 39,969
27 セブン&アイ・ホールディングス 1.546 3.770 5 1,603 58,356
28 セイコーホールディングス 1.559 9.280 69 158 2,571
29 参天製薬 1.595 1.741 68 159 1,990
30 大日本住友製薬 1.618 3.749 45 240 4,116

引用:広告費が多い企業なら、Webページ表示速度にも当然気をつかっている? 速度1位はニコン、広告費1位の企業は…… | Web担当者Forum

まとめ

いかがでしたでしょうか?
今回ご紹介した方法以外に、サーバー自体が関係している場合もあります。
著しく遅い場合は、サーバーの変更も検討されてみても良いかもしれませんね。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ