ふきげん猫ちび
ふきげん猫ちび
ふきげん猫ちび
このような質問にお答えします。
今回のトピックは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が提供しているサイトスピード計測ツールです。
利用している人は多いですが、とにかくモバイルのスコアが厳しいです。
Pingdom Website Speed Test
使いやすいことで有名なスピードテストツールです。
まず計測開始ボタンをクリックしてから結果を見るまでが速いです。（他のツールと比較して）
ヘイショー
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検索ランキングが明らかに上がって、トラフィックが増えます。
「もう欲しいキーワード全部上位表示出来ていて、これ以上やることがない」というサイトは、モバイルのランキング改善をおすすめします。
ヘイショー
