普段Webサイトを閲覧していると、ページが表示されるまでに時間がかかり「サイトが重い！」「表示が遅い！」と感じることはないでしょうか。そのような状況は、利用者にとって非常にストレスとなり、せっかくの訪問者を逃がしてしまう結果にも繋がります。
また、運営側としては「直帰・離脱率が高い」「ページビューが増えない」などの悩みはこのようなことが原因になっている可能性があります。Webサイトの集客にも関係するため、改善があれば対応が必要とされます。
今回は、Webサイトが重いことによるデメリットを含め、原因や改善方法などについてご紹介したいと思います。
Webサイトが重く表示速度が遅くなる原因と改善方法
webサイトが重く、読み込み速度が遅くなる原因には、様々な要素があります。
ユーザーの環境状態（デバイス、回線、アクセス集中など）を除いて、代表的な原因と改善方法を、いくつか紹介します。
画像データー
Webページ表示速度悪化の原因として多いのは、画像です。
画像サイズの容量が大きすぎて、読み込みに時間がかかり、Webサイト全体が重くなってしまうケースがあります。
高い解像度である必要のない画像は、画像のサイズを小さくすることでファイルサイズを小さくすることができます。画像をリサイズして幅と高さを小さくしたり、拡張子をJPEGに変更したりすることで、ファイルサイズを小さくすることができます。
また、画像の圧縮率が高く、表示速度の高速化に有利なWebpもおすすめです。WebpとJPEGを比較すると、およそ25％程、画像サイズを軽量化することができます。ただし、古いブラウザに対応していない場合もあるため注意が必要です。
スマートフォンやタブレットで撮影した画像は、サイズやデータ容量が大きいことがあります。そのため、Webサイトに掲載する前に、画像のサイズやデータ容量を小さくしておくことが重要です。
画像のサイズを小さくすることで、画像の画質が低下する可能性がありますが、データ容量を減らすことができます。その結果、画像の読み込み速度と表示速度が向上できます。
Webサイトに画像をアップロードする際には、ファイルサイズと拡張子に注意して使用することが大切です。
動画やアニメーション
動画ファイルは画像ファイルに比べてファイルサイズが大きくなります。
そのため、動画やアニメーションがサイトにとって本当に必要なものかどうかを検討し、不要なものは削除しましょう。
動画ファイルの拡張子であるWebM形式は、MP4形式よりも圧縮率が高いためファイルサイズを小さくすることができます。
しかし、WebM形式はSafariなどの一部ブラウザでは再生できません。そのため、WebM形式とMP4形式の両方を用意して、ユーザーのブラウザに応じて、自動的に再生形式を切り替える設定を行う必要があります。
また、動画ファイルのファイルサイズを削減する最も効果的な方法は、Webサイトのサーバー内に置かないことです。動画ファイルを埋め込むことも、サーバーへの負担を軽減し、表示速度を向上させる効果があります。
動画をWebサイトで視聴させたい場合は、YouTubeなどの動画配信プラットフォームを使用すると便利です。動画配信プラットフォームにアップロードし、埋め込みタグを利用してください。これによりファイルサイズを気にせず、スムーズにページを表示することができます。
JavaScript・CSS
JavaScriptやCSSは、Webサイトに動的なコンテンツを追加するために使用されますが、ファイルサイズやファイル数が増えると表示速度が低下します。
JavaScriptやCSSのファイルサイズやファイル数を減らすためには、不要なコードを削除したり、ファイル数をまとめることです。
JavaScript、CSSを最適化することで、Webサイトの読み込み速度を向上させることができます。
JavaScript、CSSの無駄な記述を洗い出し、整理するのにChromeのCoverage機能が便利です。Coverage機能を使用するには、次の手順が必要となります。
1.Chromeを開き、対象のWebサイトを表示します。
2.Chromeの開発者ツールを開きます。
3.開発者ツールの左側のメニューから「Performance」を選択します。
4.「Performance」の画面で「Start recording」ボタンをクリックします。
5.対象のWebサイトを操作します。
6.対象のWebサイトの操作が完了したら、「Stop recording」ボタンをクリックします。
7.「Performance」の画面で「Coverage」タブをクリックします。
8.Coverageタブで、使用されていないCSSやJavaScriptの行が赤で表示されます。
9.赤で表示された行を削除することで、CSSやJavaScriptの無駄な記述を洗い出せます。
Chromeの開発者ツールのCoverage機能に関するページも参考にしてください。
ChromeのCoverageは便利な機能ですが、信用して赤い箇所をすべて削除しまくると、Webサイトの動作に問題が発生する可能性があります。
レスポンシブのWebサイトの場合、画面幅によって不要なCSSが切り替わります。各幅でチェックして、本当に不要なセレクタや動作のみ削除しましょう。
ページ数が多いWebサイトの場合、不要なCSSはページによって異なります。Coverage機能は、開いているページの記述をチェックします。そのため、不要な記述を洗い出すためには、ページごとにリロードして、Coverage機能を使用する必要があります。
コメント箇所やベンダープレフィックスは、Coverage機能では不要な箇所と判断されます。そのため、誤って削除しないようにしましょう。
これらの点に注意してCoverage機能を使用することで、Webサイトのパフォーマンスを向上させることができます。
コンテンツ数
Webサイトのコンテンツの数が多いと、読み込み速度が遅くなる可能性があります。
読み込み速度を向上させるためには、コンテンツの数を減らすことを検討してみてください。コンテンツ数を減らすと、読み込み回数を少なくできるので、表示速度の向上に繋がります。
一方で、コンテンツの量を減らしすぎると、集客効果が低くなるため、コンテンツの量を調節することが大切です。ユーザーが求めている、興味を持ちそうなコンテンツを用意することで、ユーザー満足度と集客効果を向上させることができます。
読み込み速度の改善と集客効果改善のため、Webサイトのコンテンツの質を定期的に確認することが重要です。
フォント
Webサイトの読み込みが遅くなる原因の要素として、見落とされがちですが、フォントが要因となる場合もあります。フォントが原因の場合、Webフォントを使用することで、Webサイトの読み込み速度を向上させることが可能です。
Webフォントとは、ユーザーがWebサイトを閲覧する際に、Webサーバーからフォントデータを読み込んで表示するフォントです。
Webフォントを使用することで、ユーザーが閲覧するデバイスにフォントデータがインストールされていなくても、指定したフォントでテキストを表示することができ、Webサイトのデザインを統一できます。
そのため、Webフォントを使用することで、Webサイトのデザイン性を向上させ、ユーザーの利便性を向上させることに繋がります。
タグの整理
Webサイトの読み込み速度が遅くなる原因の一つとして、不要なタグがないか確認して、整理することも重要です。不要なタグがページに含まれていると、ページの読み込みに時間がかかってしまいます。
Google Analyticsの計測タグや広告タグなど、Webサイトに必要なタグを適切に管理できているでしょうか？
タグの管理や運用を効率化するためのツール、タグマネージャーの活用も有効です。タグマネージャーでは、タグの追加や削除を簡単に行えます。その他にも、タグの動作をテストする、タグのパフォーマンスを監視することができます。
タグの管理ツールを使用したり、Webサイトのソースコードをチェックし不要なタグを削除することで、Webサイトの読み込み速度を向上させることができます。
サーバー環境の見直し
Webサイトの読み込み速度が遅くなる原因は、Webサイト側だけではなくサーバー側の影響も考えられます。サーバー側の原因としては、スペックや負荷の影響、ネットワーク環境などの影響です。
サーバーのスペックが低いと、複数のユーザーからのアクセスを処理しきれず、Webサイトのコンテンツを処理する時間が長くなり、表示速度を改善することができます。
共用サーバーを利用している場合、他のサイトとサーバーを共有するため、Webサイトの表示速度が遅くなる場合があります。そのため、他のユーザーのアクセスの影響を受けずに、安定した表示速度を安定させることができる、専用サーバーへの移行を検討することをお勧めします。
Webサイトが重いことによるデメリットとは？
Webサイトの読み込み速度を改善する方法を紹介してきましたが、読み込みが遅いことによるデメリットもあります。ユーザーの離脱率を高め、検索エンジンの評価を下げ、サイト運営者の収益を減少させます。
ひとつずつ詳しく紹介します。
ユーザービリティが悪く離脱が増える
Webサイトの表示速度が遅いと、ユーザーはイライラしてWebサイトに滞在する時間が短くなります。
例えば、通販サイトで何かを購入したいと思ってWebサイトにアクセスしても、読み込みが遅くて購入したいものがカートに入らない、決済ページまで進まない、などの状態が続けばストレスが溜まりますよね。
そのような状態になれば、その通販サイトではなく他の通販サイトから購入しようと離脱する可能性は当然あります。また、読み込みが遅いWebサイトではリピーターとはならず、他の購入方法を検討するため、ブランドイメージも悪くなります。
言い換えれば、読み込みが早いWebサイトはユーザーにストレスを与えることがないため、離脱を防ぐことができます。
検索順位やSEOに影響
Googleは、Webサイトの表示速度を検索エンジンのランキングに反映しています。そのため、Webサイトの表示速度が遅いと、検索エンジンのランキングが下がり、検索上位に表示されず、ユーザーの訪問が減ります。
Googleは、ユーザーが快適にWebサイトを利用できるかどうかを、検索順位の評価基準の1つとして使用しています。表示速度が遅いWebサイトは、ユーザーが快適に利用できない可能性があるため、検索順位が低下する可能性があります。
また、表示速度が遅いWebサイトは、SEOにも影響を与えます。ユーザーがWebサイトに訪れてすぐに離脱してしまうと、GoogleはWebサイトの評価を下げます。
検索上位に表示されるWebサイトは、多くの人に見てもらえる確率が高くなるため、Webサイトの表示速度を改善することは、内容だけでなく、SEO対策としても重要です。
売上減少につながる
Webサイトの表示速度が遅いと、ユーザーが離脱してしまうため、売上やコンバージョン率が低下する可能性があります。Webサイトの表示速度が遅いと、ユーザーにストレスを与え、商品やサービスを購入する可能性が低くなります。
ECサイトなどの売上に直結するWebサイトの場合、ページが重いと、ユーザーが商品を見つけたり、購入手続きを完了したりするのが難しくなります。その結果、ユーザーが離脱してしまい、売上が落ちてしまう可能性があります。
Googleの調査によると、Webサイトの表示速度が1秒遅くなるごとに、コンバージョン率は7%低下します。
しかし、ページ速度が速いとコンバージョンが改善されることが分かっています。Googleは「Google Developers」で、ページの読み込み速度を半減させ、売上を12％から13%へ伸ばすことに成功した企業の事例を公表しています。
これらの調査内容から言えることは、読み込み速度が早いWebサイトはコンバージョン率の増加に影響を与えます。
Webサイトが重い場合に表示速度を計測！無料チェックツール
Webサイトの読み込み速度がどれだけ大事なのか理解頂けたかと思います。
まずは、Webサイトの読込速度を確認しましょう。Webサイト表示速度チェックツールを使えば、Webサイトの表示速度を簡単に測定することができます。また、ツールによっては、表示速度を改善するためのアドバイスも提供しています。
いくつかの無料のWebサイト表示速度チェックツールを紹介します。
PageSpeed Insights
PageSpeed Insights（ページスピードインサイト）は、Googleが提供しているWebサイトの表示速度を測定する無料のツールです。
使い方は簡単です。PageSpeed InsightsのWebサイトにアクセスし、測定したいWebサイトのURLを入力。「分析」をクリックするだけで、パソコンとモバイル、それぞれの表示の測定結果が表示されます。
項目別に0～100点のスコアでパフォーマンスを測定してくれて、総評として「合格」「不合格」と判断してくれるため、改善の必要があるかどうか、一目で判断できます。
さらに、項目別に評価と、改善すべき箇所や方法も提示してくれます。
赤字で表示されている指標は、表示速度に悪影響を与えていると判断されている部分です。赤字で表示された箇所から優先的に改修し、スコアの改善を行いましょう。
GTmetrix
GTmetrixもPage Speed Insights同様に、Webサイトの表示速度を測定できる無料のツールです。Googleの評価指標であるPageSpeed InsightsやYahooの評価指標であるYSlowの要素を組み合わせたツールで、より詳細な分析結果が得られます。
こちらも使い方は簡単です。GTmetrixのWebサイトにアクセスし、測定したいWebサイトのURLを入力。「Analyze」をクリックして、しばらくすると測定結果が表示されます。
PageSpeed InsightsとYSlowの総合結果がA～Fの6段階で表示されます。その他、ページの表示時間・読み込みサイズの統計が表示されます。
削除すべきWordPressのプラグインやJavaScriptが明確になるなど、Page Speed Insightsに比べて多角的にWebサイトの分析を行ってくれます。ただし、英語での分析結果が表記されるため、翻訳が必要となります。
Light House
Light houseはGoogleが提供する無料ツールで、特定のサイトやアプリを自動で分析してくれる、Google Chromeの拡張機能です。Google Chromeを起動して、ChromeウェブストアからLight houseを拡張機能として追加することができます。
分析したいWebサイトを開き、拡張機能のLighthouseを選択して「Generate report」をクリックします。しばらく待っていると、パフォーマンスやアクセシビリティなど、項目別に分析結果が表示されます。
Lighthouseでは項目別の測定結果が0～100点のスコアで示され、点数により、色別に示されます。赤字で表示されている項目は、測定結果のスコアが低い項目となります。赤字で表示された箇所から優先的に改修し、スコアの改善を行いましょう。
Page load time
Page load timeはLight houseと同様、Googleが提供する無料ツールで、特定のサイトやアプリを自動で分析してくれる、Google Chromeの拡張機能です。Google Chromeを起動して、ChromeウェブストアからPage load timeを拡張機能として追加することができます。
インストールができたら、測定したいWebページにアクセスしてみましょう。ページの読み込みが完了すると、アドレスバーの右側に表示されるアイコンの下に、結果の数字が表示されます。その数字が、表示しているWebページの読み込み表示までにかかった時間をあらわしています。
今まで紹介してきた無料ツールと違い、パネルをひらいたり、右クリックしたりの作業が一切なく、読み込み速度を計測したいページにアクセスすれば結果が表示される、という手軽さが特徴です。
Webサイトが重いのではなくブラウザが原因？
そもそもWebサイトではなく、使用しているブラウザが重くなることがあります。
日頃から使用するブラウザだからこそ、動作が重くなると困るものです。例えば、SNSで気になるリンクがあってもなかなか開かない、スクロールが遅い、などがあります。このような事象は、回線速度などの原因以外で遅くなっている可能性があります。
ブラウザ別の対処方法を紹介しますのでお試しください。それでも重い場合は、ブラウザを再起動してみてください。
Google Chrome
開いているタブの数が多いと、Chromeのメモリ使用量が増えて重くなることがあります。また、表示しているページのコンテンツが重い場合も、Chromeにとって負荷が大きくなり、重くなることがあります。そのため、不要なタブやページは閉じるようにしましょう。
拡張機能が大量にインストールされている場合も、Chromeが重くなることがあります。使用していない機能がインストールされている場合、設定から削除した方がいいでしょう。アドレスバーに「chrome://extensions」と入力すると、Chromeにインストールされている拡張機能の一覧が表示されますので、ここから不要な拡張機能を選択し、削除します。
Chromeブラウザで検索やサイトへアクセスする度に、全ての操作が閲覧履歴になります。時間が経って、履歴が溜まっていれば、Chromeが重くなります。その場合、キャッシュや閲覧履歴データを削除することで、Chromeを軽くできる可能性があります。
キャッシュの削除方法については「Webキャッシュの役割と削除方法」で解説していますので是非ご覧ください。
Microsoft Edge
Microsoft EdgeはChromiumベースのブラウザなので、基本的にはChromeと同じような使い勝手となります。
Edgeのバージョンが古い場合、動作が遅くなる可能性があります。問題やバグを解決するために、Microsoftはプログラムのアップデートをリリースしますが、アップデートしなければ、そうした問題は残ったままとなってしまいます。
そのため、新しいアップデートがある際は、インストールするようにしてください。
また、Edgeでも拡張機能をインストールすることが可能ですが、Chrome同様重くなる場合もあります。その場合も使用していない拡張機能は削除しましょう。アドレスバーの右側から削除する拡張機能のアイコンを長押し （または右クリック）します。「Microsoft Edge から削除」＞「削除」を選択します。
Edgeの動作が遅いとき、キャッシュとCookieが原因の可能性もあります。こちらもChromeと同様に、キャッシュとCookieがブラウザに蓄積していくと、Edgeが重くなります。
キャッシュの削除方法については「Microsoft Edgeのサポートページ」をご確認ください。
Firefox
Firefoxでも基本的な対応方法は他のブラウザと同様です。
履歴やキャッシュはいつの間にか溜まり、動作を圧迫させてしまうため、定期的に実行することをおすすめします。メニュー上部から「ツール」＞「オプション」へと進み、オプションメニューを表示させます。オプションメニューの「プライバシーとセキュリティ」へと進み、下部にある「履歴」から「履歴を消去」をクリックしてください。
気になるWebサイトをチェックしていたらブックマークが増えてしまうこともあると思いますが、ブックマークもデーターであり、数が大量になるとブラウザの動きを重くします。必要のないブックマークは定期的に削除しましょう。
FirefoxのアドオンとはChromeやEdgeの拡張機能のことを指します。アドオンも重くなる原因のため、使用していない場合は、「ツール」＞「アドオン」メニューから「拡張機能の管理」を選択し、一覧から不要なアドオンを削除します。
safari
Safariは、Apple が開発・提供している Web ブラウザです。そのため、Apple製品のみしか対応していませんが、対応は上記で紹介してきたブラウザと同様となります。
日常的にWebサイトを閲覧していると、キャッシュやクッキーを自動で保存します。これらのデータを定期的に削除して、Safariの動作を軽くしましょう。
メニューバーの「開発」＞「キャッシュを空にする」をクリックするだけです。
メニューバーに「開発」が表示されていない場合は、「Safari」＞「環境設定」をクリックします。「詳細」のタブをクリックして、「メニューバーに開発メニューを表示」の項目にチェックを入れると、メニューバーに表示されます。
履歴の消去も一緒に行いましょう。こちらは簡単です。メニューバーの「履歴」＞「履歴を消去する」をクリックするだけです。キャッシュ同様、こちらも定期的に削除して、Safariが重い！とならないようにしましょう。
他のブラウザ同様、Safariにも拡張機能がありますので、重くなる原因となります。
メニューバーの「Safari」＞「環境設定」をクリックします。「Webサイト」のタブをクリックして、使用していない拡張機能をオフにしましょう。
サイト表示に3秒以上かかる場合は要注意！
Webサイトが重いことによるデメリットとは？で記載した通り、読み込み時間がかかる場合は、ユーザーの離脱と売上に影響を与えることになります。
では、ユーザーがWebサイトから離脱しない読み込み速度は？重さは？となった際、表示速度で考えた場合、「3秒以内」が目安とされています。3秒以内の目安は、しっかりとしたデータに基づいた根拠があります。
3秒以上かかった場合約50％のユーザーが離れる
2017年のGoogleの調査によると、モバイルのランディングページの読み込みにかかる平均時間は22秒です。読み込みに3秒以上かかった場合、およそ50％のユーザーがページから離れることがわかりました。
また、大手通販サイトのAmazonの調査では「サイト表示が0.1秒遅れると、売上が1%減少する」という知見に基づいて、表示速度を改善しているようです。
ほんのわずかな差でも売上を左右するページの表示速度は、サイトの売上を増やすためにも、重要な要素といえます。
1秒から3秒でも離脱する可能性は32％上がる
下記はGoogleの調査結果です。
表示速度が3秒を超えると、ユーザーの直帰率は32%上昇し、表示速度が5秒を超えると、ユーザーの直帰率は90%上昇します。
3秒以内であっても、一定数のユーザーはWebサイトから離脱しているということです。離脱率を下げるには、遅くとも2秒以内にWebサイトが表示されるのが理想的となります。
まとめ
今回は、Webサイトが重いことによるデメリットを含め、原因や改善方法などについてご紹介したいと思います。
Webサイトの表示速度は企業サイトにおいて重要です。自社のWebサイトに合った対策を実施して、Webサイトのパフォーマンスを向上させていきましょう。
コメント