Web技術系中心に割と何でも更新中

サイトの表示速度への理解を深めよう【測定ツールと改善方法】

SEO Web

Web制作者

Webサイト運営者
「な~んか運営しているサイトの表示速度遅いな~。サイトの表示速度が早いとSEOに有効ってきいたことあるけど、実際どうなんだろう?」

こういった疑問にお答えします。

本記事の内容

  • Webサイトの表示速度を改善したほうがいい理由
  • Webサイトの表示速度測定ツール紹介
  • Webサイトの表示速度を改善方法を簡単に紹介

こんにちは、mine(@mineblog7)です。
ブログ歴は4年、Web制作歴は7年ほど。

現在はmineblogを一人で運営しています。

Webサイト制作している中で、課題として上がるのがWebサイトの表示速度問題です。
この記事では、Webサイトの表示速度の改善について詳しく紹介します。

Webサイトの表示速度を改善したほうがいい理由

高速化

まず、Webサイトの表示速度を改善したほうがいい理由を説明します。
結論から言うと、Webサイトの表示速度が遅いとデメリットしか無いからです。

人は思ったよりも待てない

あるWebサイトを見るときに、なかなかページが表示されないとストレスを感じる経験は誰しもありますよね。少し古いデータですが、人はWebサイトの表示で2秒以上待つとイライラし始めるという統計があります。

【引用元】Web担当者Forum

約半数のユーザーは、ページ表示の待ち時間が2秒を超えるとイライラし始めるようです。ページの読み込みが何秒くらいで終わることを期待するかという設問に対して、47%の消費者が「2秒」と答えています。

現代では、もっと待ち時間にシビアになっているような気がします。

Googleの検索結果に影響する

Googleはページの表示速度が検索結果に影響することを公式に明言しています。

【引用元】Google ウェブマスター向け公式ブログ

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで2018年7月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

また、ページの表示速度はGoogleのクローラーにも関係しており、検索結果にも影響を及ぼします。

ページの表示に時間がかかると、クローラーが容量を多く消費することになります。
そうなると、クローラーから嫌われ、サイトへの巡回頻度が減ってしまいます。つまり、サイトが評価されにくくなるわけです。

Webサイトの表示速度遅延により考えられる損失

下記にあるように実際にページの表示速度が遅くなると大きな損失が生まれます。

【引用元】Web担当者Forum

操作開始時間が1秒のサイトと3秒のサイトを比較しても、3秒のサイトは1秒のサイトに比べ、ページビューが22%低下、コンバージョン率は38%低下、直帰率は50%上昇してしまうというデータがあります

これを見たら、もう表示速度改善するしか選択肢はないですよね。

無料で利用できる表示速度測定ツール

高速化

サイトの表示速度の重要さを理解できたとはいえ、単純にサイト見るだけでは表示速度が遅くなっている詳しい原因は分かりません。

そこで、サイトの表示速度測定ツールを利用します。

サイトの表示速度測定ツールを利用する目的

  • 表示が遅延している原因を見つけるため
  • 施策前と施策後で、どれくらい表示速度改善されたかを確認するため

無料で手軽に利用できる表示速度測定ツールをいくつか紹介します。

各ツールごとに異なる特徴があるので、自分で使い勝手の良いものを選んで利用してください。

サイトの表示速度測定ツール一覧

  • PageSpeed Insights
  • Pingdom Website Speed Test
  • GTmetrix
  • Site24x7
  • Chromeディベロッパーツール

それぞれ詳しく紹介します。

PageSpeed Insights

Googleが提供しているWebサイトの表示速度をチェックするツールです。1~100(上限100)までのポイントで表示速度を評価してくれます。

表示にかかる時間は表示していませんが、表示速度遅延の原因と改善案をPCとモバイルで別々に詳しく提示してくれます。

改善の具体的な手順は自分で調べなければいけませんが、改善案どおりに施策すれば表示を高速化できるようになっています。

» PageSpeed Insights – Google Developers

Pingdom Website Speed Test

Pingdomが提供しているWebサイトの表示速度をチェックできるツールです。

1~100(上限100)までのポイントで表示速度を評価してくれます。
ページを表示するためのファイルの読み込み時間を一覧で表示してくれるので、どのファイルが読み込みに時間がかかっているかが視覚的に分かりやすくなっています。

» Pingdom Website Speed Test

GTmetrix

サイトの表示速度をA〜Fランクで評価してくれます。
また、YSlowでの評価も同時に確認できます。他にもページのロード時間、ページサイズ、HTTPリクエスト回数などもチェックできます。

全て英語ですが、PageSpeedのタブで、画像の最適化がされているか、ブラウザのキャッシュが有効になっているかなどの項目、そのタイプ(サーバー、画像、CSS、JS)、優先度も一覧で確認できます。
ただし、使用しているサーバーによっては上手くツールが動作しないことがあるので注意が必要です。

» GTmetrix

Site24x7

タイムラインでファイルの読み込み時間が視覚的に分かるようになっています。
ページのHTTPリクエストの回数、ダウンロードサイズが円グラフになっており、ファイルの割合なども分かりやすくなっています。

» Site24x7

Chromeディベロッパーツール

Chromeのディベロッパーツールでもファイルの読み込み時間を確認できます。

ウインドウズの場合、chromeを起動してF12キーを押して、Networdをクリックするとファイルの読み込み時間をチェックすることができます。

HTML、CSS、JavaScript、画像別に読み込み時間を確認できます。こちらでも読み込み時間をチェックするときはCtrl+F5キーでスーパーリロード(キャッシュクリア)すると良いでしょう。

» Google Chrome

Webサイトの表示速度を改善する方法

高速化

どうしたらWebサイトの表示速度を改善できるのか?
まずは、表示速度が遅くなる原因を知っておきましょう。

Webサイトの表示速度が遅くなる原因

  • ページを表示に必要なファイルの数、ファイルの容量が多い
  • データベース(DB)を使用して膨大なデータを管理している
  • キャッシュを無効にしている
  • サイトの運用サーバーの動作が遅い
  • 閲覧者のネットワーク環境が悪い

サイトの速度改善において、大きく2つのアプローチがあります。
それはフロントエンドとバックエンドに分けてそれぞれ具体的に説明します。

フロントエンド(Webブラウザ側)

フロントエンドはWebブラウザ側(ユーザ側)の事を指します。
フロントエンド側では主にHTML、CSS、javascriptなどの改善によりWebサイト表示の高速化を図ります。

基本的にはWebブラウザからサーバーへのHTTPリクエストの回数と通信量ををいかに減らすかが勝負になります。

フロントエンドでの表示速度改善方法

  • html、CSS、javascriptの軽量化
  • JavaScript・CSSファイルへのサーバーへのリクエスト回数の削減
  • 画像の最適化(ツールを使った画像の圧縮)
  • CSSスプライト

それぞれ詳しく説明します。

html、CSS、javascriptの軽量化

サーバーの通信量を減らす=ファイルの容量を減らすことでWebサイトの表示速度を改善させます。

html、CSS、javascriptなどのファイルにはスペースや不要な記述があるものなど、容量が無駄に大きくなっている場合があります。html、CSS、javascriptを軽量化するツールなどを利用して、できるだけファイル容量を削減します。

CSS・jsファイルへのサーバーへのリクエスト回数の削減

Webサイトの表示に読み込まれるCSSファイルやjsファイル(JavaScript)はファイルの数だけHTTPリクエストの回数が多くなります。

複数のCSS・jsファイルがある場合、可能な限りそれぞれ一つのCSS、jsファイルにまとめるとHTTPリクエストの回数を削減できます。

また、複数のCSSファイル、jsファイルを結合してもHTTPリクエストの回数を削減できます。

画像の最適化(ツールを使った画像の圧縮)

画像ファイルの容量が大きいと、それだけサーバーとの通信量が大きくなります。
通信量を減らすために、ツールを使用して表示させる画像を最適化し、画像容量を削減します。

画像最適化ツール

20枚くらいの画像の枚数を最適化するのであれば、TinyPNGがオンラインで使えるので便利です。

逆に100枚とか大量の画像をまとめて最適化したい場合は、TinyPNG以外のソフトウェアツールを利用することをおすすめします。

CSSスプライト

アイコンやグローバルナビなどで使用する画像を一つの画像にまとめることでHTTPリクエスト回数を減らします。

実際に画像を表示する時はbackground-positionbackground-imageプロパティで表示したい画像の位置や範囲を指定します。

バックエンド(サーバー側)

バックエンドはWebサーバー側のことを指します。
バックエンド側ではサーバー管理やデータベースなどの専門的な知識が必要となるため、Web制作の中~上級者向けの内容になります。

この記事ではWeb初心者向けの内容になっています。

バックエンドでの表示速度改善方法

  • キャッシュの設定(.htaccessに記述)
  • SQLの最適化
  • サーバースペックのグレードアップ

キャッシュの設定(.htaccessに記述)

ウェブブラウザのキャッシュ(サイトデータをローカルに保存する)設定を.htaccessで行うことで高速化を実現します。

正確にはキャッシュが残っている場合、2度目のアクセスからはキャッシュを参照するので表示が高速化できるわけです。

.htaccessのへの記述

ExpiresActive on
ExpiresByType image/png "access plus 1 days"
ExpiresByType image/jpeg "access plus 1 days"
ExpiresByType image/gif "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 days"
ExpiresByType application/x-javascript "access plus 1 days"
ExpiresByType application/x-shockwave-flash "access plus 1 days"
ExpiresDefault "access plus 1 days"

例えば、.htaccessには上のような記述をします。

簡単に言うとimgageやらcssといったファイルをキャッシュする有効期限を1day(1日)に設定しています。要するに、ウェブサイトにアクセスしてから1日はキャッシュを保持するということです。

cssなどを頻繁に更新するという場合は、キャッシュの有効期限を短く設定して、あまり更新しない場合は長めに設定すると良いでしょう。

SQLの最適化

運営しているWebサイトでSQLを使用している場合、よく調べてみると冗長なSQLや実際に使用されないSQLが見つかります。

SQLの知識があれば一度見直して最適化できればWebサイトの表示速度改善につながります。

サーバースペックのグレードアップ

最近では使用料の安い共用レンタルサーバーでもそこそこのスペックがあり、Webサイトの表示速度もそこそこです。

さらにWebサイトの表示速度を安定させたい場合は、コストがかかりますがサーバーのスペックを上げるという選択肢もあります。

まとめ

Webサイトの表示速度について再度まとめます。

【結論】:Webサイトの表示速度を改善することはメリットしか無い

ポイント

  • Webサイトの表示速度改善はメリットが多いことを理解する
  • Webサイトの表示速度測定ツールで改善ポイントを見つける
  • Webサイトの表示速度改善を実施する

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果