Webサイトを運営されている方にとって、ページが表示が重くなってしまうケースはないでしょうか。
人によって「遅い」「重い」と感じる感覚はそれぞれですが、クリックして数秒経っても表示されない時は「このサイトは重い」とユーザーにストレスを与えてしまい離脱されてしまう時があるものです。
一見あまり気にならない事象かもしれませんが、ユーザーにとってはページ表示速度が遅い、重いと感じてしまうと、離脱してしまい売上の見込み客を逃がしてしまう可能性が非常に高いです。
今回はページの表示速度が遅い原因や改善策をご紹介したいと思います。
目次
Webサイトのページ速度が遅いと何が問題なのか
検索結果の順位が下がる可能性がある
Webサイトの表示速度が検索結果の順位に影響するというのは以前からGoogleがウェブマスターセントラルブログを発表しており、2018年にはモバイルサイトでも適用を開始したと公表されています。
そのため検索順位を下げないためではなく、ユーザー体験を損なわないために表示速度改善に取り組むべきであると考えるべきです。
自分でサイト速度を知る方法
GoogleAnalyticsで自社サイトの表示速度を調べる
では実際に自社Webサイトの表示速度はどのように調べることができるのでしょうか。
GoogleAnalyticsを活用することで、自社Webサイトの表示速度を簡単に調べることができます。
以下の図のように「平均読み込み時間」をチェックしてみましょう。
【手順】
- GoogleAnalyticsにアクセス出来たら「行動」タブをクリックします。
- タブメニューが開くので「サイトの速度」というメニューをクリックします。
- さらにタブメニューが開くので「概要」というメニューをクリックします。
- 表示された画面の「平均読み込み時間（秒）」をチェックします。
計測する期間で数値が変動することと、あくまでもサイト全体の平均時間であるため、参考値にはなりますが、前段で述べた直帰率との相関関係と見比べて自社のWebサイトがユーザー体験を損ねていないかをチェックしてみましょう。
Webサイト全体の平均読み込み時間が遅いなと感じたら、どのページが遅いのかを特定することもGoogleAnalytics上で可能です。
以下の図のように「サイトの速度」内の「ページ速度」をクリックしてみましょう。
この画面では各ページの平均読み込み時間をチェックすることが可能です。
読み込み時間が遅いページを特定・改善し、ユーザービリティの高いページを目指しましょう。
サイト速度を改善する方法
画像データを圧縮する
ページ表示速度悪化の要因として多いのは、画像のデータ容量が大きく読み込みに時間が掛かってしまうというケースです。
解像度が高い画像はきれいでダイナミックな表現が可能ですが、一方で読み込み速度遅延につながり、結果としてユーザー体験を損ねるWebサイトになってしまう可能性もあります。
Webサイトで画像を使用する場合には適切なファイルサイズと適切な拡張子を意識して使用することが重要です。
高い解像度である必要がない画像については画像をリサイズし、拡張子をjpgにするなどの対応をすることでファイルサイズを小さくすることが可能です。
動画ファイルなどはYouTubeを埋め込む
動画ファイルは画像ファイルに比べ、ファイルサイズが何倍も大きくなります。
拡張子はさまざまありますが、そもそも動画ファイルをWebサイトのサーバー内に置かないという方法が最も効果の高い解決策になります。
YouTubeなどに動画をアップロードし、埋め込み用のタグをWebサイト内に埋め込むことでファイルサイズに関わらずスムーズにページを表示することが可能です。
YouTube等の外部サービスが使用できない場合は、拡張子を「WebM形式」にした動画ファイルを使用することをおすすめします。
WebM形式はMP4形式と比較して高い圧縮率を誇り、ファイルサイズの削減に効果的です。
ただし、Safariなどの一部ブラウザには対応していないため、非対応のブラウザにはMP4形式で再生できるような作りにしておく必要があります。
JavaScriptのファイルサイズを削減する
Webサイト上の要素を動かしたり、アニメーションを加えることができるJavaScriptファイルですが、このファイルもサイズや数が増えると表示速度の低下につながります。
複数存在するJavaScriptファイルを一つのファイルにまとめることや無駄な記述を削除するなどでファイルサイズを小さくすることで表示速度が改善する可能性があります。
サーバー環境を見直す
Webサイト側だけではなく、サーバー環境の影響で表示速度が遅くなることもあります。
例えば、共用サーバーを利用している場合、複数のサイトで回線を共有しているため、表示速度が遅くなる場合があります。こういった場合は専用サーバーを利用することで改善される可能性があります。
また、サーバー自体の回線速度やCPU、メモリ数などのサーバースペックを上げることでも改善が期待できます。
Webサイトのスピード速度改善ツールの導入
上記の対応は一時的な改善であり、継続的にwebサイトの容量を抑えるのは困難なものです。
近年では作業一つでwebサイトが継続的にスピード速度改善してくれるツールが存在しており、低単価でウェブサイトの表示速度改善してCVR・購入数が増えている事例もあるので、早めの改善を行いたい方はツールの導入が一番おすすめです。
Webサイト/LP速度の高速化ツールについてまとめている記事も作成しておりますので、是非ご確認ください。
サイト速度改善おすすめツールについて
PageSpeed Insights
Page Speed Insightsは、Googleが提供するWebサイトの読み込み速度をチェックしてスコアリングしてくれる無料の測定ツールです。
検索したいページのURLを入力して画面上の「分析」ボタンをクリックすることで、簡単に分析結果を表示してくれます。
モバイルとパソコンのそれぞれのスコアを表示してくれるので、自社サイトが適正範囲なのか改善が必要なのかが一目で分かります。
特長としてはシンプルなデザインであるため、情報が取得しやすく改善点もわかりやすく提示してくれます。
GTmetrix
GTmetrixもPage Speed Insights同様にWebサイトの読み込み速度をチェックしてスコアリングしてくれる無料測定ツールです。
基本的な使い方も同様で、検索したいページのURLを入力して「Test your site」ボタンをクリックすることで分析結果画面が表示されます。
日本語に最適化されていないため英語での結果表示となります。
Page Speed Insightsに比べてより多角的にWebサイトの分析を行ってくれます。
また、サインアップすることでテストを実行するサーバーの地域やブラウザを変更することも可能です。
WEBPAGETEST
WEBPAGETESTも前述のツール同様にWebサイトをスコアリングしてくれる無料ツールです。
こちらのツールも検索したいページのURLを入力するのですが、より細かな設定が可能です。
テストサーバーの地域やブラウザのほか、分析を実行する回数なども設定が可能です。
分析結果画面は日本語最適化されていない分、やや見づらくなっています。
また、速度を改善する具体的な方法を提案してくれるわけではなく、結果表示された情報から原因を推測する必要があります。
重いWebサイトの原因と改善法のまとめ
本記事では重いWebサイトの問題点や改善点を各種ツールをご紹介しながらお話させていただきました。カッコいいWebサイトを目指すことだけに囚われて無駄にファイルサイズの大きな画像を使ってしまったり、過度な動きを取り入れてしまったりするケースをよく耳にします。表現がどれだけ優れたWebサイトであっても、表示速度が遅く、ユーザー体験を損ねてしまっては本末転倒となってしまいます。
ジーピーオンラインでは、Webサイトを制作する際は閲覧するユーザー目線に立ち、デザイン表現と表示速度のバランスを意識したWebサイトの制作を行うことが大事になります。