WEBサイト表示スピードを改善する方法【メリットだらけ】

こんにちは、株式会社ソライル　Web集客コンサルタントの波多野です。

2018年にGoogleが実施したスピードアップデートにより、PCページ、モバイルページそれぞれにWEBサイトの表示スピードが遅いと検索結果順位の上位化が見込めなくなるといった影響があり、WEBサイトにとってサイトスピードの遅さは大きなデメリットです。

また、GoogleはWEBサイトのページ表示に3秒かかるとおよそ半数以上のユーザーが離脱するという検証結果を発表しており、WEBサイトを運営するうえでサイトスピードの改善はしっかりと解決しておきたい課題と言えるでしょう。

そこで今回は、WEBサイトの表示スピードが遅いと起こる具体的なデメリットや、スピードを改善するための解決策について詳しく解説します。

WEBサイトの表示スピードが遅くなる原因

サイトスピードが遅くなる原因は一つではなく、複数影響していることが多いため、一つずつ解決していく必要があるでしょう。

特に現在はレスポンシブデザインでサイト制作を行うことでスマホとPCで同じ画像を表示させるため、画像のサイズによってはスマホでの読み込みが重すぎて時間がかかりすぎるといった事態が起きていることがあります。

また、サイトの利便性をあげるためにjQueryを使用して、メニュー機能の追加、サムネイル画像のエフェクト効果、SNSシェアボタンの設置、レスポンシブデザイン対応などを行うことがありますが、jQueryを使えば使うほど容量を使うため、サイトが重くなり表示スピードに影響を及ぼしてしまうといった落とし穴もあります。

さらに、広告の効果計測用のタグをJavaScriptで大量に設置している場合も、サイトスピードを遅くする原因となります。

一つ一つを見ると大した重さではなくても、上記のような積み重ねにより結果的に表示速度に影響してしまうということを憶えておきましょう。

WEBサイトの表示スピードが遅いと起こる重大なデメリット

冒頭でWEBサイトの表示スピードが遅くなると、検索結果の上位化やユーザー離脱につながるとお伝えしました。そこでここでは具体的にどのようなことが起きてしまうのかについて解説します。

直帰率が上がることによるCVの低下とユーザー満足度の低下

WEBサイトの表示スピードが遅いサイトを、ユーザーは待ってくれません。
すぐに他のサイトに移動するか、ブラウザを閉じてしまいます。

つまり、他ページへの回遊はしてもらえないため該当ページの直帰率が上がるのはもちろんですが、そのWEBサイトが商品を販売しているECサイトの場合は、商品購入となるCVもしてもらえないということになります。

WEBサイトの表示スピードが遅いサイトは、ユーザーにとっては何の印象にも残らない、もしくはイライラさせられただけの無意味なサイトであると捉えられ、ユーザー満足度の低下にもつながるのです。
一度訪れて「価値のないサイト」と見なされると、下手をすれば二度とそのサイトにはアクセスしなくなってしまいます。

サイトの入り口となるページの直帰率が上がるということは、サイトの価値を下げてしまう重大な問題なので、直帰率を上げてしまっている原因がサイトスピードにある場合は、すぐにでも改善をおこなうことが大切です。

直帰率についてもう少し詳しく知りたいという場合は、下記ページで改善方法とあわせて解説しているのでぜひご覧ください。

あわせて読みたい
→【すぐわかる】直帰率の高い原因と正しい改善方法

SEO検索流入の減少

ユーザーがWEBサイトで何かを検索するのは、何かの疑問や問題を解決したいといった欲求を解消するためであることが多いでしょう。

そのため、その結果表示されるWEBサイトのページの入口となるページは、ユーザーにとって欲求を解消してくれるメリットのあるページである必要があります。

逆に、情報以前に表示スピードが遅く時間のかかるページは、ユーザーの「早く確認したい」という欲求を十分に満たしていないため、ユーザーメリットが低く、良コンテンツではないと判断され、検索結果で上位表示されにくくなってしまいます。

特に外で利用することも多いスマホでの閲覧時、重すぎるサイトは読み込み負担がかかり、ユーザーにとってはデメリットが大きいといえます。

今やパソコンよりもスマホで閲覧するユーザーのほうが多いサイトも少なくない中で、通信環境も加味したWEBサイト制作は必須の要件といえるでしょう。

WEBサイトのスピードを改善するための解決策

それではさっそくWEBサイトの表示スピードを改善するための解決方法をご紹介します。

特にこれまでWEBサイトの表示スピードについて意識をしたことがなかった場合は、どれか一つというよりは、各項目それぞれに自社サイトがどのような状況であるかを確認し、対応を進めることをおすすめします。

画像の重さを軽くする

画像の容量を最適化してあげることで、WEBサイトの表示スピードは改善することができます。
また、JPEG・PNG・GIF・SVGといった適切なフォーマット保存をしてあげること、大きすぎる画像はリサイズしてあげることで、さらに重さを軽減できます。

画像容量の最適化は以下のような無料ツールを使用して簡単に行うことができるので利用してみると良いでしょう。

・TinyPNG（https://tinypng.com/）
・JPEG-Optimizer（http://jpeg-optimizer.com/）
・ILOVEIMG（https://www.iloveimg.com/ja）

HTML・CSS・JavaScriptを圧縮して軽くする

HTML・CSS・JavaScriptのコード内にある不要な余白・改行・コメントアウト・インデントなどを削除することでそれぞれのファイルサイズを軽くし、サイトの表示スピードを改善させることができます。

それぞれのファイルを一つずつ修正していくのはとても時間がかかりますし、必要なタグなどを消してしまうこともありえるので、以下のような自動圧縮ツールを使用して対応するのが良いでしょう。

・html-minifier（http://kangax.github.io/html-minifier/）
・CSS Minifier（https://syncer.jp/css-minifier）
・JS Minifier（https://syncer.jp/js-minifier）

使用していない外部ファイルがある場合は削除する

WEBサイトはページを表示する際、読み込んでいる外部ファイルの数だけ通信を行っています。
つまり読み込んでいる外部ファイルが多いとそれだけ通信数が増えるので、サイトスピードが遅くなってしまうのです。

もしも既に使用していない外部ファイルが残っているようであれば、すべて削除しましょう。

例えば、昔使用していた広告計測用のタグなども、すでに利用を停止しているものがあれば削除しましょう。

キャッシュを利用して軽くする

キャッシュをブラウザに一時的に保存して、再度同じページを開いた際に保存していたデータを活用することで、素早くページを表示させることができるようにする方法があります。
もしもキャッシュを活用していない場合は、毎度ゼロからデータを読み込むことになるため、表示スピードが遅くなります。

ブラウザのキャッシュを活用する方法は以下のとおりです。

「.htaccess」ファイルに以下のコードを記入する。
キャッシュをしておく日数の部分は、サイトの状況に応じて変更をしてください。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 month”
ExpiresByType text/css “access plus 1 days”
ExpiresByType text/javascript “access plus 10 days”
ExpiresByType application/javascript “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
</ifModule>

上記は記述の一例であり、JavaScriptやcss以外にも、pdfや音声ファイル、動画ファイルなども圧縮指定を行うことが出来ますので、サイトで使用しているファイルの種類にあわせて活用をしてください。

スマホの場合はAMPを導入する

AMP（Accelerated Mobile Pages）は、スマホを利用しているユーザーがストレスなくすぐにページ閲覧ができるようにした仕組みで、GoogleとTwitterが共同で立ち上げたプロジェクトです。

スマホで検索を行った時に、ページタイトルの上のあたりに雷マークがついているものがAMP対応しているページです。
実際にクリックしてみると、その表示スピードの速さに驚くと思います。

AMP対応をしているページは、Googleのクローラーがキャッシュを行い、検索クエリに関連があると判断された際、検索結果にそのページを表示させます。
すでにデータキャッシュを行っているページのため、ユーザーがアクセスした際にあっという間にページ表示がされるため、ユーザーはストレスなくページ閲覧ができるということになります。

ただし、AMPにはデメリットもあります。
例えば、AMP対応を行う場合は、HTMLとAMP両方の制作を行う必要があります。そのため管理も両方必要になるということです。
これは運営側にとってはやや面倒であると言えるでしょう。

また、制作を行うにあたって使用できるタグに制限が多いため、できることできないことが多く、サイトの内容によっては利用に適さないものもあります。

AMPを採用するのに適しているサイトは、テキストでの内容が多い記事サイトやブログサイトなどの静的コンテンツなどの場合におすすめです。

WEBサイトの表示速度を確認する方法

WEBサイトの表示スピードは、下記サイトで確認することができます。

・「PageSpeed Insights」（https://developers.google.com/speed/pagespeed/insights/）

読み込み速度を評価してくれるサイトです。
評価が0～100で算出されるのでわかりやすいのが特徴です。
100がもっとも良い評価で、49以下だと遅すぎるため改善が必要ということになります。

・「Test My Site」（https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/）

スマホ専用の診断サイトです。
自社サイトのURLを入力すると、ススマホサイトの読み込み速度およびパフォーマンスを診断することができるサイトです。
分析結果から、改善ポイントや改善することによりどの程度表示スピードが上がるかも確認できます。また、自社サイトと同業種との読み込み時間の比較もしてくれます。

WEBサイト表示スピードを改善する方法【メリットだらけ】まとめ

WEBサイトの表示スピードについて、その重要性と解決方法についてご紹介してきましたがいかがでしたでしょうか？

WEBサイトの表示スピードは、何秒以内といった正式な決まりはありませんが、平均1～2.5秒が良いと言われていることが多く、それ以上長くなるとユーザーにストレスを与える原因となります。

今回ご紹介した解決方法を試してみたけれど、サイトスピードがまだ改善されないといった場合は、販売機会損失を垂れ流し続けることになるだけなので、早急にプロに診断を行ってもらい解決することをおすすめします。

ソライルではWEBサイトのスピード改善についても解決のお手伝いをしています。
自社で解決するのが難しい場合や、そもそもやる暇がないといった場合などは、お気軽にご相談ください。

→お問合せ