← 事例一覧へ戻る
事例

表示に78秒かかっていたカンファレンスのサイト

エクイッパー・カンファレンス · equipper.org

Joomlaのサイトでは主要な画像が出るまでスマートフォンで1分以上かかっていました。新サイトは1秒以内で表示されます。

課題

エクイッパー・カンファレンスは複数のJoomlaサイトに分かれていました。通信を制限したスマートフォンでは、トップページの主要素が現れるまでに78秒かかり、読み込み中は指の下で表示が動き続けます。レイアウトのずれは0.85で、0.1を超えると良くないとされる指標です。締め切りまでに申し込んでもらうことが役目のサイトとしては、入口そのものが失われていました。

行ったこと

分かれていたサイトをひとつの静的サイトにまとめ、申し込みへの導線をすぐ辿れるように作り直し、読み込み中に表示が動かないようにしました。

結果

最初の描画は3秒あまりから1秒未満に、主要素の表示は78秒から3秒に、レイアウトのずれはゼロになりました。一方でページ容量はほとんど変わっていません。旧サイトから引き継いだ画像を最適化する処理がまだ入っていないためで、これが次の課題です。

制作前と制作後

トップページ

公開中のJoomla版equipper.orgの日本語トップページ。屋外の参加者の写真が画面いっぱいに広がり、上には項目の詰まったナビゲーション、右端にSNSのボタンが浮いている。
前 — 写真だけで、入口がない
作り直したエクイッパー・カンファレンスの日本語トップページ。共に祈る参加者の写真の上にカンファレンス名と申し込みの案内が置かれ、ナビゲーションは簡潔になっている。
後 — 名称、状況、申し込みの導線

ECとは？

公開中のJoomla版「ECとは？」のページ。ページ見出しがないまま、ナビゲーションのすぐ下から本文が詰まって始まっている。
前 — 見出しなし、端から端まで本文
作り直した「ECとは？」のページ。大きな見出しの下に同じ本文が、読みやすい行長で置かれている。
後 — 見出しと読みやすい行長

奨学金の申請

公開中のJoomla版、奨学金のページ。見出しがなく、灰色の小さな文字が画面幅いっぱいに続き、申請期限は段落の途中に埋もれている。
前 — 見出しがなく、期限を見落としかねない
作り直した奨学金のページ。「奨学金申請について」の大きな見出しがあり、対象条件は箇条書き、期限は独立した行に置かれている。
後 — 申請者の目に入る位置に期限

利用者にとって変わったこと

項目前後変化
サイトの数複数に分かれたJoomlaサイトひとつのサイト統合
スマートフォンからの申し込み1分の読み込みの先に埋もれていた最初の画面に申し込みボタン到達可能に
読み込み中の表示指の下で動いていた動かない安定
画像の最適化アップロードされたまま配信現状も元のまま。処理の導入は未着手未対応

計測した変化

指標前後変化
パフォーマンススコア4295+53 ポイント
アクセシビリティスコア8291+9 ポイント
最初の描画 (FCP)3.2 s0.9 s−72%
主要素の表示 (LCP)78.2 s3.0 s−96%
スピードインデックス3.6 s0.9 s−75%
レイアウトのずれ (CLS)0.8460.000−100%
ページ容量23,034 KiB21,801 KiB−5%
計測日
2026年8月5日
計測方法
モバイル版Lighthouseで、通信速度を模擬的に制限して計測。対象はトップページです。パフォーマンスの数値は3回計測した中央値、アクセシビリティとSEOは結果が一定のため1回の計測値です。
注意点
「前」は公開中のJoomlaサイト、「後」は確認用サーバー上の新サイトです。ページ容量の行はあえて残しています。−5%とほとんど変わっておらず、スコアの改善は読み込み方の工夫によるもので、引き継いだ画像が小さくなったからではありません。SEOスコアは掲載していません。公開中のサイトと競合しないよう、新サイトは公開まで意図的に検索エンジンから隠しているため、Lighthouseではその項目が不合格として扱われるからです。