「Webサイトの表示速度が重くてなんとかしたい」と思ってはいませんか？

Webサイトの表示速度は、SEO的な観点にも関わってくるので、非常に重要です。

そのため、できるだけ表示するスピードを上げることが鍵になってきます。

そこでここでは、Webサイトの表示速度を改善する方法について徹底解説していきます。

Webサイトが重い原因や表示速度を計測するツールについても紹介しているので、参考にしてください。

Webサイトが重い原因は？

Webサイトが重くなる原因は、例えば次のようなものが考えられます。

• 外部ファイルが多く、コンテンツのサイズも大きい
• jQueryを多用している

この中でも圧倒的に多いのが、コンテンツのサイズが大きすぎることです。

例えばファイルの大きい画像や動画を多用してしまうことです。

圧縮したものを利用しないと、次第にページ全体のコンテンツが重くなり、表示速度が遅くなってしまいます。

また、jQueryを使用していることもWebサイトが重くなる原因の1つです。

ちなみにjQueryとは、JavaScriptをあらかじめある程度書いてくれているファイルのことを指します。

多用な演出を行うことができますが、その分ファイル容量も増加してしまいます。

ただし、ここはエンジニアチームなどと相談しながら改善していかなければなりません。

ですので、すぐにでも対応できる画像や外部ファイルだけでも、容量を減らすようにすることをおすすめします。

 

SEO対策の事例はこちら

 

Webサイトの表示速度が遅いと生じるデメリット

ここではWebサイトの表示速度が遅いことによるデメリットについて解説していきます。

主に以下の2つです。

• Googleのランキング評価で不利に
• 直帰率が上がる

SEOにダイレクトに影響しますので、必ず対策するようにしましょう。

Googleのランキング評価で不利に

Webサイトの表示速度が遅いと、Googleのランキング評価で不利になってしまいます。

Googleがページの表示速度に関して、検索結果を決める際の指標として入れているからです。

そのため、Webページを早く表示させることは非常に重要なのです。

基本的にGoogleは利益を上げるために、より多くの方に使ってもらうことを目的としています。

そこでページの表示速度が遅ければ、ユーザーに不満を抱かせる原因にもなるのです。

もちろんページ表示速度だけで決まるわけではなく、コンテンツの中身が伴っているかも大事な要素です。

直帰率が上がる

Webページの表示速度が遅いと、ユーザーの直帰率が上がってしまいます。

要するに、ユーザーは遅すぎると待てないのです。

Googleによると、ページ表示速度が3秒以上になってしまうと、直帰率が高確率で上がるとされています。

そのため、どれだけいいコンテンツを作っても、表示速度が遅ければ中身すら見られないという結果になってしまいます。

ちなみに直帰率が上がると、次の部分にも大きな影響が出てくるのです。

• 検索順位が下がる
• リピーターが低下する
• PVやセッションが減少する
• コンバージョンが少なくなる

そもそも見られないので、検索順位も下がる可能性が高いです。

結果コンバージョン率や売り上げにも影響するので、利益にも影響しかねません。

ちなみにコンバージョンとは、簡単にいうと購買行動のことです。

直帰率を下げて売り上げを上げるという意味でも、Webページの表示速度を上げる必要があります。

 

表示速度改善のメリット

ここでは、Webページの表示速度を上げることによるメリットについて解説していきます。

主にメリットとしては次の4つあります。

• 検索順位向上が狙える
• CSの向上
• CVの向上
• アクセス数が上がる

それでは順に解説していくので、それぞれ参考にしてください。

検索順位向上が狙える

表示速度を上げることによって、検索順位向上を狙うことができます。

これは、Googleのアルゴリズムの「スピードアップデート」の基準を満たすことにもなるからです。

加えてコンテンツの内容が良ければ、検索順位を上げることも可能でしょう。

ただし、もともとWebサイトの表示が早い場合は、あまり効果を見込めませんので注意してください。

CSの向上

表示速度を上げることでCSが向上します。

CSとは、Customer Satisfactionの略であり、「顧客満足度」のことを指します。

これは、ユーザーがWebサイトをストレスなく利用することができるからです。

早ければ早いほどCSが向上しやすくなるので、できるだけ軽量化をするようにしましょう。

CVの向上

ページ表示速度が上がることで、CVの向上にもつなげることができます。

CVとは購買行動のことです。

サイトの表示が早いと、サイトへの信頼にも繋がることがあるからです。

もちろんコンテンツが充実していないとCVには繋がりにくいので、サイト内の整備も怠らないようにしましょう。

アクセス数が上がる

表示速度を上げることで、アクセス数の増加も見込めます。

これは、Webサイトの表示が早いので、すぐに情報にアクセスすることができるからです。

もちろん検索順位が最も影響してきますので、SEO対策やSXO対策なども欠かさず行うようにしてください。

表示速度が確認できるツール

ここでは表示速度が確認できるツールについて紹介していきます。

表示速度が確認できるツールは主に以下の3つです。

• Google Analytics
• PageSpeed Insights
• デベロッパーツール

どれを使っても問題はありませんので、気になったものを利用するようにしましょう。

ここではまだ紹介していませんが、その他の指標もチェックできる「Google Analytics」がおすすめです。

Google Analytics

Google Analyticsは、Webサイトの表示速度のみならず、PVやリダイレクト時間など計測できるツールです。

各ページはもちろんのこと、全体のサイトの平均表示速度も表示してくれます。

Google Analyticsの場合、以下の手順でページ表示速度を計測することが可能です。

1. 行動
2. サイトの速度
3. ページ速度

無料で本格的なアクセス解析もできるので、できればGoogle Analyticsを利用することをおすすめします。

ただし使いこなせるようになるまでが難しいので、参考本を手元において操作するといいです。

PageSpeed Insights

PageSpeed Insightsは、各ページの表示速度を点数式で計測してくれるツールです。

ちなみに点数は、以下の基準で分かれています。

• 0〜49
• 50〜89
• 90〜100

この中でも、真ん中の「50〜89」であれば問題ないとされています。

90〜100は最も軽いので目指すべきではありますが、逆に新たなコンテンツを追加しにくいので避けた方がいいです。

各サイトのURLを記入するだけで計測してくれるので、ストレスなく使うことができます。

デベロッパーツール

最後にデベロッパーツールです。

デベロッパーツールは、以下の手順で表示させることが可能です。

• Windows…「ctrl + shift + I」
• Mac…「command +option + i」

デベロッパーツールの場合、まず「Network」をクリックします。

クリック後、右下の方に「finish」というものが表示されますので、そちらを確認すると表示時間を確認できます。

サイトにアクセスする手間がありませんので、非常に便利です。

ただし全て英語表記なので、使い慣れるまでが少し難しいです。

 

表示速度の計測方法

各要素の表示速度を調べたい場合に関しては、「デベロッパーツール」を使いましょう。

デベロッパーツールを表示し、「Network」をクリックしてください。

クリックしたら、右側に「name」と表示されている欄があります。

ここで各画像ファイルやコンテンツ表示がどれくらい時間がかかっているかを調べることができます。

そのため、Webページの表示速度が遅くなっている要因を突き止めることができるのです。

まずはデベロッパーツールを使い、何に時間がかかっているかを計測するようにしましょう。

 

SEO対策の事例はこちら

 

表示速度を改善する方法

ここでは表示速度を改善する方法について解説していきます。

• 画像を最適化
• CSSの縮小
• ブラウザのキャッシュを活用

中でも手っ取り早くできる「画像最適化」から始めてみてください。

画像を最適化

最も手軽にできる施策として、画像を最適に圧縮することです。

PNGやJPEGなどファイルを変更することで、画像のファイル容量も変更することができます。

例えば次のツールを使うと、画像を簡単に圧縮することが可能です。

• Tinypng
• Optimizilla
• ラッコツール

画像の容量だけならば、できるだけJPEG変換する方がいいです。

PNGだと画質を一定に保持したままなので、必然的に容量が大きくなってしまいます。

極端に画質が悪くなってしまう場合は、PNGのままで圧縮するようにしましょう。

CSSの縮小

CSSの余分な部分を圧縮することで、表示速度を改善することが可能です。

そもそもCSSとは、Cascading Style Sheetsのことで、Webサイトの見た目を編集するものです。

例えば次のようなところを削除するだけでも、容量を軽くすることができます。

• 余分な改行
• コメントアウト

また、自動で圧縮できるツールもあるので、そちらを使ってみるのもいいでしょう。

• Syncer
• Minify

ただし、エンジニアの業務が関連してきますので、連携している場合は確認を取るようにしてください。

ブラウザのキャッシュを活用

ブラウザのキャッシュを活用することで、表示速度を一定に保つことができます。

キャッシュとは、サイトの情報がローカル環境に自動で保存される機能のことをいいます。

つまり、保存させておくことで、再読み込みする手間を省くことが可能です。

ただし、最初の読み込みが遅いと元も子もないので、できるだけ画像などを圧縮することを先に行ってください。

 

体感の表示速度を改善するには

ここでは、体感の表示速度を改善する方法について紹介していきます。

主に以下の2つです。

• AMP
• SPA

ではそれぞれ紹介していきます。

AMP

AMPとは、Accelerated Mobile Pagesの略で、簡単にいうとモバイル専門でページを高速表示させるツールのことです。

AMPを導入すると、モバイル端末で表示速度が4倍にも上がります。

なので、現在よりももっと早く表示させることが可能です。

ちなみにオープンソースですので、誰でも利用することができます。

加えて、モバイル端末でWebページの表示速度が高いページを優先するとしているので、できれば使うようにしましょう。

SPA

SPAは、Single Page Applicationの略で、単一のページで構成されたWebサイトのことを指します。

要は、ページ内で変更しなくていいところを再度読み込まない仕組みのことです。

その結果、ページ表示が高速になるため、表示速度を改善することも可能です。

ただし実装するコストが高いのと開発者が少ないため、費用対効果はあまり良くありません。

表示速度を改善する際に意識すべきこと

表示速度を改善する際に意識すべきポイントとしては、地道にコツコツ続けることです。

身も蓋もないかもしれませんが、突然表示速度が劇的に改善されるわけではありません。

そのため普段のコンテンツ作成から、次のことを意識する必要があります。

• 各コンテンツを作る際は常に画像の圧縮を行う
• CSSを軽い容量で作る

「塵も積もれば山となる」という言葉があるように、1個1個を疎かにしてしまうと容量は増えてしまう一方です。

そのため、日頃からページ表示を早くするための行動をしていくようにしましょう。

 

表示速度の改善に関する悩み事の対処法

Webページの表示速度についてはこれまで述べてきた通りです。

しかし、「その他にもあれば聞いておきたい」という方もいるのではないでしょうか。

そんな時はデジマクラスまでご相談ください。

デジマクラスでは、ページ速度の高速化も含め、サイト設計に関するプロが多数在籍しています。

他にもSEOに関する様々なノウハウを蓄積しているので、状況に応じた提言を行うことも可能です。

より良いサイトを作っていけるよう、弊社と一緒に施策を考えていきましょう。

 

SEO対策の事例はこちら

 

まとめ

ここまでWebページの表示速度について紹介してきましたが、いかがだったでしょうか。

簡単にここまでのことをまとめました。

• ページ表示速度はSEOにも関わってくる
• 画像の圧縮やCSSを軽くすることがポイント
• 毎回のコンテンツ作成で、画像やCSSを最適化することが必要

できるだけWebページの表示速度を速くして、ユーザーのストレスをできるだけなくすようなページを作りましょう。

この記事があなたにとって参考になれば幸いです。