02 直す ・ 表示速度とページの作り
遅い原因を、ファイル名までたどれる
「遅い」と分かっても、どこを直せばいいかが分からなければ改善は進みません。DataGrovia は PageSpeed Insights の結果に加えて、ページを構成するファイルを 9 つの観点で採点し、問題のある画像・スクリプト・スタイルシート・フォントをファイル名で示します。
- オンラインで 30 分
- 営業電話なし
- 最低契約期間なし
datagrovia.example/sites/1/grades
C
ページの作り（モバイル）
58 / 100
9 カテゴリ ・ 66 指標
ページの重さD
リクエストC
DOM の複雑さB
JavaScriptE
問題のある JSC
CSSC
問題のある CSSB
Web フォントD
サーバー設定A
D ページの重さ ・ 重すぎるファイル総転送量 3.6 MB
- /images/top/hero-main.jpg1.4 MBWebP / AVIF にして幅に合わせる
- /images/products/item-0142-1.png820 KBPNG → WebP で約 70% 削減の見込み
- /assets/js/vendor.bundle.js312 KB表示をブロック。defer を付ける
- /assets/css/theme.min.css188 KB未使用のルールが 74%
LCP
3.8 s
INP
240 ms
CLS
0.02
画面はデモデータを使ったイメージです
できること
表示速度とページの作りでできること
01
Core Web Vitals を記録し続ける
LCP・INP・CLS（Google が使う表示速度と操作性の指標）を、実際の利用者のデータとラボ計測の両方で保存。計測のたびに推移が伸びていきます。
02
A〜F の 9 カテゴリ評価
ページの重さ、リクエスト、DOM の複雑さ、JavaScript、問題のある JavaScript、CSS、問題のある CSS、Web フォント、サーバー設定を A〜F で採点します。
03
対象ファイルの一覧
「重すぎる画像」「使われていない CSS」「表示をブロックするスクリプト」などの指標ごとに、該当するファイル名とサイズを一覧にします。
04
エンジニアに渡せる形で
指標の意味と直し方を日本語で添えているので、そのまま制作会社や開発チームへの依頼に使えます。
仕様
何を、どこから取得しているか
判断の根拠になるデータの取得元と、見ている範囲です。
- データ元
- Google PageSpeed Insights API（Lighthouse と Chrome UX Report）と、サーバー上のヘッドレス Chrome による読み込みの解析
- 評価方式
- Yellow Lab Tools と同系統の考え方で、指標ごとのしきい値から A〜F を付ける独自の実装です
- 比較
- 分析したページを並べて、Core Web Vitals とグレードをページ間で比べられます
表示速度とページの作りを、自社サイトで試してみませんか
オンラインの 30 分で、自社サイトでの使い方とプランの選び方をご説明します。カレンダーから都合のよい時間を選ぶだけで、営業電話はしません。
- オンラインで 30 分
- 営業電話なし
- 最低契約期間なし