ページの表示速度にこだわろう！

教室のサイトやランディングページを制作する上でこだわるべきなのは見た目や内容だけではありません！ ページの表示速度にも気を配りましょう！

ページが表示されるまでのスピードが、 ユーザーの満足度やCVR(コンバージョン率)にも大きく影響を与える のです！

実はとても奥が深いページ表示速度・パフォーマンス改善の話題ですが、今回はその重要性と超基本についてまとめてみました！

表示速度が遅いと何が起きるのか？

ページの表示速度が遅いことによって以下のような悪影響があります。

• ユーザーが待ちきれずにページを離脱してしまう
• Googleからの評価が下がり、検索順位が下がる

ユーザーが待ちきれずにページを離脱してしまう

みなさんもウェブサイトを閲覧しているときに、なかなかページが表示されずに見るのをやめてしまった経験はありませんか？

スマホで情報を収集する現代人、特に中学生・高校生などの若い世代は日常のちょっとしたすきま時間でSNSのチェックやウェブサイトの閲覧を行います。そんな時にいちいちロードに時間がかかるサイトがあれば、すぐに見るのをやめて他のサイトにいくのは想像に難くないですよね。

2017年に発表されたGoogleの研究では読み込み速度がページ離脱率に与える影響について触れられています。

モバイルサイトの読み込みに３秒以上かかる場合、訪問したユーザーの53%が閲覧を止めて離脱する

広告を配信し用意したサイトやLPにたどり着いてもらったとしても、 ページの表示に時間がかかるだけで、半分以上のユーザーにはコンテンツを読んですらもらえなくなってしまう ということ。

結果としてアクセス数の減少やCVRの低下につながってしまう可能性があるというわけなんですね。

Googleからの評価が下がり、検索順位が下がる

Googleは、ページ表示速度が検索結果のランキングに影響することを公表しています。

Googleの検索アルゴリズムのアップデートでは、2010年にはPCページの検索、2018年7月にはモバイルページ検索において、

「検索順位要素としてページ表示速度を使用する」

という旨の発表をしています。

直接的にランキングに影響を与えるだけでなく、ページでの滞在時間や被リンク獲得に影響するなど、 ページ表示速度の向上は非常に重要なランキング要素のひとつです。

ページ表示速度を計測する方法

では、自教室サイトのページ表示速度がどうなっているのかを調べるにはどうしたらいいでしょうか。

代表的な手段を３つご紹介します。

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

PageSpeed Insights

PageSpeed InsightsはGoogleが提供する無料のページ速度測定ツールです。

測定したページのURLを入力して「分析」ボタンをクリックするだけで、モバイルページとデスクトップ(PC)ページの表示速度を同時に計測できます。

表示速度を100点満点でスコア表示してくれて、 改善するためにどの要素を修正するべきかを教えてくれるのでとっても便利です！

パフォーマンススコアは70点が平均点とされています。 60点を下回る場合は改善が必要です。

PageSpeed Insightsが示してくれた修正ポイントを参考にしながら改善施策を検討していくと良いでしょう。

Google Analytics

サイトへの来訪者数やCV数を確認できるGoogle Analyticsですが、ページごとの表示速度を確認することもできます。確認できる内容はPageSpeed Insightsと同じですが、ウェブサイト全体の「平均読み込み時間」を確認できたり、PC/モバイルでの比較など ユーザーの環境ごとに表示速度を分析することができます。 また一つひとつURLを入力しなくてもいい分、 サイト内の複数のページ表示速度を確認したい場合は便利です。

Google Analyticsの新しいバージョンであるGA4ではページ表示速度の項目が確認できなくなっているようです。 GA4をお使いでページ表示速度を調べたい場合は、PageSpeed Insightsを利用するか、同じくサイト分析ツールであるLighthouseをGA4と連携させる方法などがあります。

参考：How to connect Google Analytics + Lighthouse

Chromeのデベロッパーツール

Chromeのデベロッパーツールでも、ウェブページの表示速度を測定できます。

Chromeの上部メニューの「表示」→「開発／管理」→「デベロッパーツール」でデベロッパーツールを表示して、「Network」タブを開きます。

左上の「Clear」ボタンを押してからページを更新すると表の下部の「Finish」の箇所で表示までにかかった時間を確認できます。 その他ページのソース（画像やjsファイルなど）がどういう順番で読み込まれているのかなども確認することができるので便利です。

デベロッパーツールは Chrome拡張機能でLighthouseなどさまざまな機能と連携することができる ので色々試してみてください！

ページ表示速度を改善する方法

ではページ表示速度を計測した結果課題が見つかった場合、どのような方法で改善することができるのでしょうか。ここでは、代表的な手法を４つご紹介します。

• 画像を最適化する
• コードを軽量化する
• 外部スクリプトの読み込みを工夫する
• サイトの配信方法を変える

画像を最適化する

表示速度改善の手法の中でも 一番取り組みやすく、わかりやすく結果が出るのが画像の最適化です。

写真や画像データはテキストに比べてサイズが大きい傾向にあります。データ量が増えれば、その分ページを表示するのに時間がかかってしまいます。

写真や画像をページに載せようと思ったら、まずページでの表示に適したサイズになるようにリサイズを行いましょう。

参考：画像のリサイズ（windows）

Windows 10 / 11 の「フォト」を使い、画像を補正・修正・手直し する

参考：画像のリサイズ（mac）

Macの「プレビュー」でイメージをサイズ変更する/回転する/反転する

その上で、画像を圧縮してサイズを縮小したり、 jpgやpngに比べ画質を維持したまま軽量化できるwebP・avifなどの次世代フォーマットへの変換をするのがおすすめです。 リサイズやファイルの変換をブラウザ上でできるサイトも多く存在します。

参考：JPGファイルの圧縮

COMPRESS JPEG

参考：webPやavifへの変換

squoosh

コードを軽量化する

ウェブページで使われている HTMLやCSS、JavaScriptなどのソースコードを軽量化する ことで、読み込み時間を短縮し表示速度を改善することができます。

例えば、複数に分かれているJavaScriptファイルを一つにまとめたり圧縮してサイズを減らす、必要のないコメントアウトや余白・改行などを削除するなどの方法があります。

ウェブサイトの構築環境によって手法や施策が変わってきますので、専門知識を持つエンジニアに相談してみましょう！

外部スクリプトの読み込みを工夫する

外部スクリプトの読み込みを遅延させることによって表示速度を改善できる場合があります。

ページを読み込む際ブラウザ上では、JavaScriptコードによってさまざまな処理がなされています。

• ウェブフォントを読み込む
• 広告やバナーを読み込む
• CMS(コンテンツマネジメントシステム)の更新内容を読み込む
• Google Analyticsと通信する など

その中には、 ファーストビューを表示するために必ずしも必要ない処理もあります。

そうした処理をJavaScript内で実行するタイミングを遅らせることでファーストビューの表示速度を向上させることができます。

こちらも技術的な内容になるため、専門知識を持つエンジニアに相談してみることをおすすめします！

サイトの配信方法を変える

こちらはウェブサイトの内容そのものではなく、 サイトを公開する方法を変える という手法です。

サイトを公開する方法は今や多岐に渡っています。

• 自社（オンプレミス）サーバーにアップする
• レンタルサーバーにアップする
• ホスティングサービスを利用する
• サイト作成ツールを利用する　　など

それぞれにメリット・デメリットがありますし、サービスを提供する会社によってサーバーの性能やシステムに違いがあったりするため、どれが正解というものはありません。

中には物理的に近いサーバーからコンテンツ・サイトを配信できるCDN（コンテンツ配信ネットワーク）を活用し、サイトの表示速度に特化したサービスなどもありますので検討してみることをおすすめします。

参考：弊社ではホスティングサービスのVercelを使用しています。

Vercel

参考：

Cloudflare Pages

まとめ

今回は、ページ表示速度の超基本的な内容についてまとめてきましたが、いかがだったでしょうか。

ページ表示速度の高速化は、ユーザー体験の向上や検索結果の上位表示などにおいても非常に重要な要素です。 せっかくサイトに来てくれても、ページ表示速度のせいで見てもらえなかったら、本当にもったいないですよね。

まずは自教室サイトのページ速度がどれくらいなのかをぜひ調べてみましょう！もし課題があるようであれば、ぜひ改善を進めてみてください！

eduadでは学習塾・教室業専門のスタッフがページ表示速度改善の相談にも対応しております。お気軽にお問合せください！