Webサイトの表示速度を上げる改善策8選！計測方法も紹介

検索順位や離脱率など様々な面に対し影響を与えるWebサイトの表示速度。

Webサイトを運営している方であれば、気にされている方も多いのではないでしょうか。

ユーザーは表示速度に対して、非常に敏感です。

引用：『Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed』

上のグラフはクリックから1秒で表示されるWebページと比較し、表示速度の遅いWebページはどの程度直帰率が高いかを示しています。

表示までに6秒かかるだけで、1秒で表示される場合の2倍以上のユーザーが離脱していることがわかります。

直帰率や離脱率に大きな影響を与える表示速度を速くすることは、Webサイト運用をする上で重要です。

当記事では、表示速度を高める施策や表示速度の計測方法について紹介します。

表示速度を改善するメリット

Webページの表示速度はユーザーの行動や検索順位に大きく影響します。

表示速度を改善することでユーザーやGoogleにとって魅力的なWebサイトに改善できる可能性があります。

また、Yahoo!についても2011年以降Googleと同じ検索技術を使用していることから、表示速度改善は有効な施策です。

参考：『Yahoo!とGoogleの検索エンジン・SEOは一緒なのか違うのか？』

コンバージョンや売上アップにつながる

表示速度の改善はコンバージョンや売上に大きく影響します。

Webページの表示速度を改善することで、ユーザーの離脱率を大幅に改善することができます。

多くのユーザーにリーチできるようになるため、結果としてコンバージョンや売上につながる可能性も向上します。

表示速度改善でコンバージョン向上を実現した企業の1つに人材サービスを提供するディップ株式会社があります。

ディップ株式会社の事例

引用：『バイトル』

ディップ株式会社が運営するバイトルでは、画像の最適化などの施策により表示速度を改善し、モバイルサイトからの応募率が14%向上しました。

引用：『モバイルサイトスピードが与えるコンバージョンへの寄与 – 応募率が 14％向上したバイトルの事例より』

表示速度改善により、ユーザーは迅速に必要な情報を見つけることができるようになり、さらに価値あるWebサイトへと発展しました。

検索順位上昇につながる

Googleは検索順位について以下のように述べています。

Googleはページ読み込み速度について以下のように述べています。

検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。

研究によると、ユーザーはページの読み込み速度を非常に気にかけています。

読み込み速度これまでもランキングシグナルとして使用されていましたが、デスクトップ検索を対象としていました。

そこで2018年7月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。

引用：『ページの読み込み速度をモバイル検索のランキング要素に使用します』

ランキング要素とは、検索順位を決定する要素のことです。

現在SEO対策で苦戦している方は、表示速度を改善することで解決できる可能性があります。

関連記事：『SEO施策とは？21項目の内部対策と3項目の外部対策を紹介』

表示速度を決定する要素

Webページはクリックから様々なステップを踏んでユーザーに表示されます。

具体的には以下の通りです。

引用：『Webサイトが表示されるまでの仕組みを用語の解説を交えて紹介』

これらの工程を高速で行うことで、表示速度の高速化を実現できます。

Webサイトの表示速度が遅い原因

Webサイトの表示速度が遅くなる理由として、Webサーバーから送信されるデータが多すぎることが挙げられます。

具体的には以下の3点が主な理由です。

画像や動画の容量が大きい

画像や動画のファイルサイズが大きい場合、読み込みに時間がかかります。

昨今では、スマートフォンの高性能化により、スマホで撮影した写真や動画でさえも、容量が大きくなりがちです。

現在、表示速度で困っている方は、画像や動画の容量を減らすことで対策できる可能性があります。

参考：『スマホで写真・画像の容量を減らす（サイズを圧縮する）方法【iPhone／Android】』

外部ファイルに無駄が多い

外部ファイルとは、メンテナンス性を高めることを目的に、ソースコードとは別のファイルとしてサーバーに置かれているファイルのことです。

Webページの場合、CSSやJavaScriptを外部ファイルとして保存することが一般的です。

参考：『【JavaScript入門】外部JSファイルを読み込んでみよう』

CSSとは、HTMLと組み合わせて使用し、装飾などのスタイルを指定するための言語です。

JavaScriptとはブラウザを動かすための言語です。

Webページの動的な処理はJavaScriptによって構築されます。

参考：『CSSの基本』
参考：『JavaScriptとは？基本的な書き方や勉強方法～入門～』

外部ファイルが増えすぎることで読み込みに時間がかかるようになります。

タグを埋め込みすぎている

GoogleアナリティクスやGoogleサーチコンソールなど分析ツールを使用する際は、HTML内にタグを埋め込む必要があります。

分析ツールはSEO対策を実施する際などに活躍する便利なツールではあるものの、タグを埋めすぎてしまうことで表示速度に影響があることから、必要以上にタグを設置しないように注意しましょう。

なお、タグの管理にはGoogle Tag Managerの活用も有効です。

計測タグだけでなく広告のタグやスクリプトをコード編集無しで一元管理することが可能です。

関連記事：『Google広告のコンバージョンタグをタグマネージャーで設定する5ステップ』

Webサイト表示速度改善策

表示速度低下の原因となっているような問題を解決し、表示速度を改善するためには以下のような方法があります。

 画像のファイルサイズを削減する

ユーザーはデータサーバーから様々なデータを受信しますが、数あるデータの中で最もデータ量が多いものが画像ファイルです。

角川アスキー総合研究所の調査によると、コンテンツのデータ転送量の内訳として、そのほとんどがJPEGなどの画像データで占められていたことが分かりました。

そのため画像圧縮などの策を講じ、画像サイズを削減することで、表示速度改善を実現可能です。

圧縮することで画像の品質は下がってしまうため、画質が重要なWebページを運営している方は注意する必要があります。

画像サイズの圧縮は画像最適化ツールを使用することが一般的です。

「TinyPNG」などのツールに画像をアップロードし、圧縮された画像をWebページで使用することで、画像データ量を削減できます。

また、WordPressを使用している方は「EWWW Image Optimizer」を使用することで手間なく画像圧縮できます。

プラグインダウンロード以前にアップロードしていた画像についても自動で圧縮できるため、ユーザーはプラグインのインストール以外のタスクを実行する必要がありません。

参考：『「スマホでのコンテンツ視聴に占める広告の比率調査」を実施 主要Webサイトのデータ転送量、平均4割は広告』

動画のファイルサイズを削減する

動画はビットレートを削減することでファイルサイズを削減できます。

ビットレートとは、動画や音声が1秒間あたりどの程度データ量を使用しているかを意味します。

映像の場合、解像度×RGB(1画素あたりの色情報)×フレームレート(1秒あたりの静止画数)で算出できます。

また、動画の場合、音声データを伴う場合が一般的です。

音声データは、サンプリングレート(1秒間の周波数、処理回数)×ビット深度(1サンプリングあたりのデータ量)で算出できます。

映像ビットレートと音声ビットレートを足し合わせてものをオーバルビットレートと呼びます。

参考：『ビットレートを理解して動画のクオリティを調整する』

ビットレートはbps(bits per second)で示されます。

ビットレートは高ければ高いほど高画質、高音質の映像になりますが、同時にファイルサイズも大きくなります。

必要十分なbpsに修正し、動画をアップロードすることで表示速度改善を実現可能です。

ビットレートはビットレートの決定要素である解像度やフレームレートを調整することで削減することができます。

また、手動で調整することが手間だと感じる方は、「MP4COMPRESS」などのツールを使用し圧縮する手段もあります。

AMPを採用する

AMPとは「Accelerated Mobile Pages」の略称であり、モバイル向けに高速で表示可能なWebページを記述する使用のことです。

AMPは以下の3要素で構成されています。

参考：『Googleが推進する「AMP」と「AMP HTML」概要』

従来のWebページとは別で作成する必要のあるものが多いため、手間のかかる施策ではあるものの、スマホでのサイトの読み込み速度の向上を実現できます。

AMPの採用でWebページの表示速度改善を達成したサイトの1つにレンタルブログサービスのアメブロがあります。

アメブロの事例

引用：『アメブロ』

アメブロはAMP導入によりWebページの表示速度を1.5倍改善し、ブログの読了率を53%改善、CTRを20%改善しました。

参考：『Ameba launched their article landing pages as AMP Stories』

不要な外部ファイルの削除

CSSやJavaScriptなどの外部ファイルから不要なファイルを削除することで読み込み時間を短縮でき、表示速度を改善できる可能性があります。

例えば以下のようなものが不要な外部ファイルに該当します。

また、無駄なコメントや空白・改行を削除することが手間だと感じる方は、ツールを使用し、削除することを推奨します。

外部ファイルの無駄を消去する代表的なツールに「JavaScript / Css 圧縮・軽量化（Minify）」があります。

「JavaScript / Css 圧縮・軽量化（Minify）」に対し、テキストをコピー＆ペーストするだけで圧縮することが可能です。

サーバーでテキストファイルを圧縮

テキストファイルはサーバー側で圧縮することが可能です。

圧縮とは、データ内容の実質的な変更なしでデータ容量の縮小を行うことを指します。

これにより、サーバーからのデータ送信の高速化を実現可能です。

参考：『可逆圧縮方式｜IT用語集 – IT転職ナビ』

例えば、gzipと呼ばれる圧縮方法を使用することで、一般的に60〜70％程度圧縮できると言われています。

サーバーでの圧縮はWebサーバー上の.htaccessファイルに対し、指定のコードを入力することで実行できます。

画面スクロールに応じて画像を読み込む

ブラウザは設定していない場合、画面外の画像ファイルも読み込みます。

Webページのサイズが大きい場合は全て読み込むために時間を要してしまうため、表示までに時間がかかってしまいます。

ローディング時間を短くし、ユーザーがストレスなくWebページを閲覧できるように、「遅延ロード」を設定しましょう。

遅延ロードとは、ブラウザの画面領域内の画像データのみロードし、領域外はロードしない設定です。

それでは「遅延ロード」はどのように設定するのでしょうか。

遅延ロードの設定にはJavaScriptライブラリの1つである「Lazy Road」を使用します。

Lazy Roadの使用は以下の3ステップで完了です。

画像が多い場合、少し作業量が多くなりますが、Webページのサイズが大きい場合は導入を推奨します。

参考：『Lazy Loadで画像を遅延ロードする方法』

フォントの読み込み時間をなくす

Webフォントはダウンロードが完了されるまでテキストが表示されません。

フォントのダウンロードによる表示速度低下を防ぐ施策の1つに、font-display記述子があります。

CSS内にfont-display:swap;を記述することで、適応したいフォントのダウンロードが完了するまで仮のフォントでWebページを表示することができます。

参考：『font-display – CSS: カスケーディングスタイルシート | MDN』

ブラウザキャッシュの有効期限を設定する

引用：『Google検索』

キャッシュとはアクセスしたWebページのデータを一時的にブラウザ内に保存する技術のことです。

キャッシュが指定されていない場合、同じサイトに複数アクセスした場合であっても初回と同様の処理が繰り返されるため、表示速度は一定です。

キャッシュを設定することで、同じサイトに複数回アクセスした際に、無駄な再読み込みをする手間が省けるため、初回と比較し短時間でWebページを表示することができます。

参考：『ブラウザのキャッシュを活用する』

ただしキャッシュの設定を行う際は、ユーザーがキャッシュによって最新のWebページに訪問できない可能性があることに注意する必要があります。

ブラウザにどの程度の期間キャッシュしておくかは設定で変更することが可能ですが、更新頻度が高いWebページでは短い期間限定でキャッシュするように設定しましょう。

一方、あまり更新しないWebページでは、長期間キャッシュするように設定することを推奨します。

表示速度の測定方法

表示速度はツールを用いて測定することが可能です。

表示速度を測定するツールには具体的に以下のようなものがあります。

Page Speed Insights

引用：『Page Speed Insghts』

Page Speed Insightsでは、入力窓に測定したいページのURLを入力することで表示速度を調査することが可能です。

Page Speed Insightsでは過去30日間におけるユーザーデータに基づいた評価を把握することが可能です。

速度だけでなく安定性など様々な指標を確認することが可能です。

また、現在のパフォーマンスがどの程度が100点満点で把握することも可能です。

特定の環境を設定し、シミュレーションした結果が表示されます。

ユーザーデータに基づく指標と異なり、ユーザー環境の影響を受けないため、Webページの問題を把握する際はこちらの指標を参考にすることを推奨します。

改善点などについても把握可能です。

どこを改善すべきか具体的に指示があるため、取り組む改善策を設定する上で非常に役立ちます。

Lighthouse

引用：『Lighthouse』

Lighthouse（ライトハウス）は、Google Chromeの拡張機能の一つであり、Webサイト上のパフォーマンスを分析することができるツールです。

診断項目の一つとしてWebサイトの表示スピードも測定できます。

Lighthouseを使用するには、まずChromeウェブストアからインストールする必要があります。

LightをChromeに追加したら、拡張機能マークをクリックするとLighthouseが表示されます。

計測したいサイトを開いた状態でクリックすると、サイトのスピード計測ができます。

まとめ

表示速度は離脱率や検索順位など様々な面に対して影響を与えます。

特に離脱率の変化は顕著であり、数秒遅れるだけで2倍以上のユーザーが離脱します。

離脱率の上昇はコンバージョンや売上に対しても大きく影響することから、表示速度の高速化は必要不可欠です。

表示速度の高速化は画像の圧縮や無駄な外部ファイルの削除などにより実現可能です。

様々な施策の中から何を実施すべきか把握する際は、表示速度計測ツールを使用しましょう。

特に「Page Speed Insights」は、何を改善すべきか具体的に提示します。

また、この記事を読んで、自身でWebサイトの表示施策改善を行うことが難しいと感じた方は広告代理店に頼ることも手段の1つです。

株式会社Unionは、Webサイト制作をはじめとするデジタルマーケティング全般のご相談を承っております。

Google広告、Yahoo!広告の正規代理店として認定されています。

蓄積されたノウハウから短期間で課題を解決に導きます。

また、弊社の広告運用担当はYahoo!広告、およびGoogle広告の認定資格保持者であり、知識のアップデートを行っております。

薬機法医療法遵守広告代理店の認証を受けておりますので、広告審査の厳しい薬事・医療系も対応可能。

お客様のあらゆるニーズに対し分析・調査を行い最適なプランをご提案しますので、お気軽にご相談下さい。