LINEグループ「Digital Marketing Japan」始めました

Webサイト高速化の方法。手法と計測ツールを紹介

Webサイトスピード高速化

ふきげん猫ちび

Webサイトの遅いので、高速化したい
どんなプロセスで、何をすればいいの?

ふきげん猫ちび

ふきげん猫ちび

パフォーマンスを図る方法は?

このような質問にお答えします。

今回のトピックはWebサイトの高速化について。

以下の内容について詳しく解説していきます。

  • サイト高速化の手法
  • Webサイト高速化のパフォーマンスを計測する方法
  • サイトスピードを計測するツール

ちなみにこの記事は企業のサイト運営にてWebサイト高速化のプロジェクトを進めていきたい人に向けて書いています。

サイト高速化の手法

1. 画像の軽量化(リサイズ+圧縮)

企業サイトでサイトスピード改善をする場合に一番手っ取り早いのがこれです。

複数人でCMS更新やページ作成を行っている場合、ルールを徹底しないと重い画像をアップしている人が必ずいます。

Screaming Frog(500ページまで無料)というツールを使うと画像ファイルを一覧をピックアップして重い順に並べてくれるので、これらの画像をリサイズ+圧縮(Jpegminiなど利用)していきます。

世界のヘイショー

手間のかかる作業ですが、コーディングやヴィジュアルの変更が無いので、誰の承認も必要をしないので手っ取り早いです。

2. WebPの導入

WebPとは、jpgやpngに代わる画像ファイルのフォーマットで、ファイルサイズが30%ほど縮小できます。

世界のヘイショー

ちなみに僕はこれで大きな成果を得たことがあります。

例えば、3Gモバイルのシュミレーターで計測した時に画像が多いLPにてロード時間30秒→10秒に短縮できました。

参考 画像フォーマットWebP(ウェッピー)について詳しく調べてみた|WebP編 | LIG

3. 不要なJavaScriptファイルの削除

大規模サイトや古いサイトにありがちなのが、不要がJavaScriptファイルが多く読み込まれているためにスピードが遅くなってしまっているケースです。

世界のヘイショー

不要なものを出来るだけ削除しましょう。

また、ABテストなどたまに使うツールがあるのであれば、すでにテスト実施済みのページ、またはABテストが終了したページからは削除しましょう。

4. CDNの導入

CDNとは、画像を早く読み込む技術のことです。

世界のヘイショー

有料ですが効果は抜群なので、まだの方は必ず導入することをおすすめします。

5. LazyLoadの導入

画像を遅延して読み込むことにより、ページスピードを改善します。

世界のヘイショー

特に縦長で画像が多いランディングページなどに効果的です。

導入方法はいろいろありますが、最近はhtmlタグに”loading=lazy”と記述するだけで適用できるようになったので、一般化されていくと思います。

6. HTML,CSS,JavaScriptの圧縮

各ソースコードのスペースを消すことにより、ファイルサイズを僅かに小さくするテクニックです。

世界のヘイショー

導入が簡単ですが、効果はそこまで高くないですね。

7. サーバーのアップデート

一番コストがかかる方法ですが、一番効果を得ることが出来ます。

世界のヘイショー

「アクセスが集中した時にスピードが落ちる」という事象が起きていれば、検討する時期にあると言えます。

Webサイト高速化のパフォーマンスを計測する方法

Webサイトスピードを計測する際に見る項目はいくつかあります。

代表的な例は以下の二つです。

  • スタート・レンダリング・タイミング… ページのメイン画像などのヴィジュアルが見え始める時間。
  • ロード時間 … ページをすべて読み込む時間

それぞれの指標毎に対策する内容が違うので、どの項目を改善したいのかを決めることが必要です。

サイトスピードを計測するツール

WebPageTest (Webサイト)

僕がメインで利用しているサイトで、仮想環境で各項目をチェックしてくれます。

詳しい紹介記事を書きましたので、詳細は以下。

参考 Webサイト高速化のおすすめKPI測定方法。WebPageTestの使い方 | Heysho

Google Page Speed Insight

Googleが提供しているサイトスピード計測ツールです。

利用している人は多いですが、とにかくモバイルのスコアが厳しいです。

参考 Google PageSpeed Insight

Pingdom Website Speed Test

使いやすいことで有名なスピードテストツールです。

まず計測開始ボタンをクリックしてから結果を見るまでが速いです。(他のツールと比較して)

世界のヘイショー

あとサイトのUX/UIも良いですね。

Google Analytics

Google Analyticsから指標を見ることも可能です。

実際のユーザーデータを取得しているので、ユーザーが実感するスピードを見るためには一番近い数字が出ます。

ただし、数値はユーザーの環境に依存されるので、何かの施策を実施した後の結果をBefore/Afterで見る目的には向いていません。

Behavior / Site Speedから見ることが出来ます。

ちなみに各メトリックスの意味は以下の通り。

  • Avg. Page Load Time (sec) … 平均読み込み時間。ブラウザの読み込みが完了するまでの時間。
  • Avg. Redirection Time (sec) … リダイレクトにかかった時間(リダイレクトを行っている場合のみ表示)。
  • Avg. Domain Lookup Time (sec) … ドメインの平均ルックアップ時間。DNS ルックアップにかかった平均時間
  • Avg. Server Connection Time (sec) … サーバーの平均接続時間。サーバー接続にかかった時間
  • Avg. Server Response Time (sec) … サーバーの平均応答時間。サーバーがリクエストに応答するまでの時間。
  • Avg. Page Download Time (sec) … ページの平均ダウンロード時間。ページのダウンロードにかかった時間

まとめ

簡単にまとめました。

ちなみに最近は、サイトスピードを改善するとモバイルのGoogle検索ランキングが明らかに上がって、トラフィックが増えます。

「もう欲しいキーワード全部上位表示出来ていて、これ以上やることがない」というサイトは、モバイルのランキング改善をおすすめします。

世界のヘイショー

ご精読ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。