現役WEBサイト運営者直伝!サイト表示速度が遅い原因とスピードの上げ方

サイト 速度 WEBサイト制作

この記事を訪れた方は、サイトの速度の必要性について気になられているのではないでしょうか?

webサイトの表示速度は、ユーザーにとってストレスを感じる一つの要因となっています。
表示速度が遅いというだけで、webサイトの閲覧を諦めるユーザーも多く、筆者もなかなか表示されないwebページにイラついて、ブラウザのページを閉じる「×」ボタンを押したことが何度もあります。

webサイト管理者としてはアクセス数を増やすためにも、サイトの速度は気を付けなくてはならないポイントの一つになります。

「webサイトの速度をあげたい」
「簡単に速度を上げる方法を知りたい」

そう思われる方にとって、当記事は速度をあげる重要性から、速度の具体的な上げ方、またはインターネットの中だけでなく、パソコン周りの快適な速度を得るための方法まで解説致します。

当記事を読むことで、あなたのwebサイト運営がより快適になりますことを祈っております。

WEBサイトの表示速度は重要

現在のwebサイトは、動的な表示をするものが主流となっています。

例えば、動画を画面いっぱいの背景にして、キャッチコピーに動きをつけるテキスト表示。
高画像なグラフィックを利用したスライド表示。
まるで生きているように動くフォント表示。

webサイトを構築するhtmlやcssがグレードアップしてゆくことで、表現方法も豊かになり、個性的なサイトも増えてきました。
そういった、個性を表現できることで、ユーザーを楽しませるwebサイトが増えてきていますが、その分、通信データ量も増えるのは否めません。

通信データ量が増えると、表示速度が遅くなる可能性があります。
表示速度が遅くなれば、せっかくのサイトを見てくれるチャンスも減ります。
そのため、各webサイトの運営者は「表示速度をいかに早くするか」を重視しています。

重要な理由

いくつかありますが、まず念頭におかなければならないことは「ユーザーにとって快適な速度で閲覧できる」ということはとても重要なことです。
速度が遅いだけで、「閲覧されない」または「直帰される」可能性が高くなるためです。

「直帰」とはアクセス解析によく使われる用語で「ページにきた訪問者が1ページのみ閲覧してwebサイトを離れる」ことです。
せっかく訪問してくれたユーザーには、webサイトを満遍なく閲覧してもらいたいものです。

ですが「表示速度が遅い」と、ストレスを感じて他のページどころか、目的のページすらまともに見てもらえず離れてしまう可能性があります。
いかに直帰率を下げるかという要因を担う一つが「サイトの表示速度」になるのです。

また、googleの検索結果アルゴリズムの一つに「サイトの表示速度」が含まれています。
特に、モバイルビューでの表示速度を重視しているため「表示速度が遅い」というだけで、索結果は下位に表示される可能性が大きいのです。

速度を上げるメリットと上げないデメリット

まず、「直帰率を下げる」ことはとても大きなメリットです。
訪れたページ以外のページも閲覧してもらうことで、何度もアクセスするwebサイトへと成長し、固定客や、webサイトへのファンを増やすことができるからです。

また、SEOの概念からも「表示速度」はとても大切です。
googleがすでに「表示速度」が検索結果に影響されることを発表しています。
検索結果上、上位に表示されることが、アクセス数の増加につながりますのでSEOの観点からも「表示速度を上げる」ことはとても重要です。

そして、表示速度を上げることでデメリットは考えられません。
ただし「表示速度」を意識しすぎた結果、極端な設定を行い「見づらいwebサイト」になっては元も子もないので、「ユーザーにとってストレスを感じないレベル」を目指すと良いでしょう。

WEBサイトの速度を計ってみよう

では、いよいよwebサイトの速度を計ってみましょう。
webサイトの表示速度を測定してくれるサイト(ツール)はいくつかあります。
下記におすすめの速度設定サイトを(ツール)紹介します。

おすすめの速度測定サイト(ツール)

いくつかある中でも、Googleで提供している無料の速度設定サイト(ツール)は、信頼性も高く、併用して使うことでアクセス解析も行えます。

PageSpeed Insights

Google PageSpeed Insights(以下PageSpeed Insights)はGoogleが提供するWebページのコンテンツを解析して、ページの読み込み時間を短くするための方法を提案してくれるツールです。

Googleが無料で提供しているサービスで、URLを入力するとページを読み込み、表示速度の下落要因をチェックしてくれます。
おおまかに自分のサイトの問題点を掴みたい場合に便利です。

Test My Site

TestMySite(テストマイサイト)とは、モバイルサイトの速度をテストするためにGoogleが公開しているチェックツールです。
以下が「Test My Site」の主な機能となります。

【Test My Site日本語版より引用】
1)モバイルでのサイト読み込み速度の確認: モバイルサイトを閲覧しているユーザーの50% はサイトが2秒以内に読み込まれることを期待しています。
あなたのサイトの読み込み速度をテストしましょう。

2)読み込み中の想定離脱数を確認: モバイルでは、読み込み速度が1秒増えるごとに最大20% ものコンバージョンを失うと言われており、たった数秒の読み込み速度の差が大きな違いを生みます。
サイト読み込み中に、離脱している可能性のある訪問者数を確認しましょう。

3)業種別平均速度との比較: サイトの読み込み速度を同業他社平均と比較できます。

4)速度改善の提案: テスト結果と問題点の改善方法をメールにてお送りします。

Google Analytics(グーグルアナリティクス)

Google Analytics(グーグルアナリティクス)とはwebサイトのアクセス解析ツールです。
無料版と有料版がありますが、無料版でも十分様々なことを解析してくれます。

表示速度の解析だけでなく、訪問者数、直帰率、離脱率など、またコンバージョンの設定を行うことで達成率なども計れます。
多くのことを解析できるため、すべての機能を理解し、活用するには時間がかかるかと思います。

ただし、導入当初は扱い方がわからなくても、何度か触っているうちに理解できるようになります。
アクセス解析は、計測できる時間やデータが多いこがとても重要なので、使い方を理解していなくても最初から導入することを強くおすすめします。

このツールは、現在のwebサイトのアクセス解析の多くを担っているといっても過言ではありません。

WEBサイトの速度が遅い原因と解決策

webサイトを計測してみた結果はいかがだったでしょうか?

もし、想像より遅く感じたのでしたら、遅い原因を探ってみると良いでしょう。
表示速度が遅くなる原因の中で、代表的なものをいくつかあげてみました。

コンテンツ(画像など)の重さ

ファイルサイズの大きい画像を多用している場合、表示速度が遅くなる原因になります。
スマホや、カメラで撮影した画像を、そのままの重さでwebサイトに公開していませんか?

例えば、背景画像など、大きな画像を利用する場合は1M以下にします。
小さい画像であれば300KB以下を意識します。
もちろん、画像を小さくしたからといって、1ページに多く掲載していては、結局大きな画像を利用しているのと変わりはありません。

外部ファイルの上手な使い方

HTMLの中身をシンプルにするため、CSSやjavascriptなど、プログラムファイルを外部から読み込む設定をしているwebサイトは多いでしょう。
実際に、HTMLの中に違う言語のプログラムをたくさん書き込むことは、あまり推察できません。

だからといって、多くの外部ファイルを一度に読み込むと、それもwebサイトの表示速度を落とす原因となります。
基本的には、デザインを担うCSS、スライダーや、UI操作を担うjavascriptなどは各々1つずつ、多くても2つずつ程度が良いでしょう。

プログラムの多用

現在、webサイトのデザインは多種多様になりつつあります。

例えば、webサイトのフォントに特徴的なデザインを導入できる「googlefont」などのwebfontや、アイコンをfontと同じ扱いにすることで、画像の導入の負担や面倒を減らすことのできる「fontawsome」などプログラムファイルの種類も多くなりました。

またHtml5になったことから、アニメーションのバリエーションも増えています。
そういったオリジナリティを表現する手法も増えたことで、プログラムを多用するwebサイトも増えました。
プログラムを多用するということは、表示速度にも影響を与えます。

・本当に、そのプログラムが必要なのか
・もし必要であれば、他の部分でデータを軽くすることができないか

どこか一つ増やすことで、どこかを減らすというイメージで運営してゆくと、プログラムの多用を起こさないようにすることができます。

新たにWEBサイトを作るなら、速度ではAMPが最強

AMPという機能を知っていますか?

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト名ですが、現在ではフレームワーク(AMP HTML)としての認知度のほうが高くなってきており、主に新聞社のサイトやポータルサイトなど、情報量の多いサイトがAMP対応を行うことが増えてきました。

AMPのシステムの詳細は割愛させていただきますが、効果として高速表示が可能になります。
モバイル端末のように、縦スクロールで表示させるwebサイトなどは、AMP対応をされていると、瞬時にコンテンツが表示され、とてもスムーズにwebサイトを閲覧できるようなります。

またAMP対応しているページは、検索結果のカルーセルなどで表示される可能性があるため、サイトへの流入率が増える傾向もあります。
実際にAMPを導入するためには、いくつかの制限や、いれなくてはならないタグなどもありますが、コンテンツの内容次第ではAMPの導入を前向きに検討することは、とても良いことだと思います。

ネットへの接続速度は大丈夫?

webサイトの表示速度について解説してきましたが、実際のパソコン周りの速度についてはいかがでしょうか?

現在、主流となっている回線は光回線ですが、宅内ネットワークでは無線wi-fiを利用する人も多く、web上のスピードだけでなく、宅内でのスピードも影響してくることも増えました。
その場合、光回線で速度は早くなっていても、wi-fi環境が不安定なせいで、接続が切れたりなど、ストレスを感じている人もいるのではないでしょうか?

まず、気にしなくてはならないのは、インターネットの接続環境です。
これはweb上でのデータの送受信の速度を計り、もし遅い場合は利用しているプロバイダーなどとの相談が必要になります。
この部分については、作業を行えるのは業者側(プロバイダー等)になります。

次に、インターネットに接続するまでの家庭内、または社内のネットワーク環境です。
そこには、パソコン、利用できるLANケーブルの種類、ハブやターミナル、wi-fiなど、さまざまな機械が多く関わってきます。

一番大切なのはシンプルなネットワークを作ることです。
余計なものを複雑にはさまず、直線的にネットワークへ接続できる環境を整えることです。
シンプルなネットワークは、トラブルが起きた時のの原因究明なども簡単に行えるので、復旧作業も行いやすくなります。

・パソコンや、それぞれの接続機械のバージョンを常に意識してあげること
・可能であれば、5年単位でそれらの機械をリニューアルすること
・ハブを何個もはさむのではなく、社内ネットワークを意識した、パソコン等の接続機器の配置を考えること

それらを意識して行うと、速度を上げるだけでなく、セキュリティや、トラブルへの対応、作業効率も上がります。

まとめ

いかがでしたでしょうか?
ここまで読まれたことで、webサイトの速度を上げることの重要性と、速度を効率よく上げる方法が把握できたのではないかと思います。

webの世界は、生活にはかかせないツールとなっています。
そのような中で「表示速度」は、すでに取捨選択する理由の一つにすらなっていないかもしれません。

「表示速度が速い」というのは前提になっているからです。
当記事が、webサイトを運営するための秘訣の一つとなると幸いです。

コメント