# 自社HPのパフォーマンス改善した話

- 公開日: 2026-02-27
- 更新日: 2026-02-27
- URL: https://systemdesignworks.co.jp/news/%E8%87%AA%E7%A4%BEHP%E3%81%AE%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%82%92%E6%94%B9%E5%96%84%E3%81%97%E3%81%9F%E8%A9%B1
- 発行: 株式会社システムデザインワークス

## 
きっかけ

こんにちは。システムデザインワークスの坂寄です。
弊社コーポレートサイト（HP）を [PageSpeed Insights](https://https://pagespeed.web.dev) で計測したところ、パフォーマンスが73点で、LCP が 2.9秒もあり赤評価でした。
FCPは0.3秒で問題ありませんでしたが、LCPだけが足を引っ張っている状態でしたので、速度の改善に絞って対応しました。

---

### 改善前の数字

![](https://pub-6ce50be5eb5442a7b096ce9b8ab6c046.r2.dev/改善前.png)

**・パフォーマンス：73（オレンジ）**

・FCP：0.3秒（良好）

**・LCP：2.9秒（ここが赤）**

・Speed Index：2.0秒

・CLS：0.16

・TBT：50ms（良好）

LCPは「最も大きいコンテンツが表示されるまでの時間」の指標で、ここが遅いと「なんとなく重い」と感じられやすくなります。

### 改善後の数字

![](https://pub-6ce50be5eb5442a7b096ce9b8ab6c046.r2.dev/改善後.png)

**・パフォーマンス：97（緑）**

・FCP：0.3秒（維持）

**・LCP：0.3秒（2.9秒から大幅に短縮）**

・Speed Index：1.6秒

・CLS：0.053

・TBT：70ms

**結果、パフォーマンスは73点→97点、LCPは2.9秒から0.3秒に大幅に改善しました。**

---

## 何をしたか

いちばん効果が大きかったのは**フォント**です。
もともと Google Fonts で M+ Rounded 1c を CDN(インターネット) から読み込んでいたのをやめ、**WOFF2 をローカルに配置して読み込む**ようにしました。CDN をやめたことでネットワークの往復が減り、LCP の改善に効きました。
あわせて、ファイル形式をTTF（1ファイルあたり 3MB 前後）から WOFF2（860KB〜970KB）に変換して軽量化しました。

そのほか、クリティカル CSS のインライン化を行いました。最初の描画に必要なスタイル（カラー変数や基本レイアウト）だけを critical.css に切り出し、layout の head 内でインラインで出力するようにしました。フォント関連はクリティカルから外し、描画のタイミングに影響しないようにしています。

---

## やってみて分かったこと

**LCP のボトルネックはフォントだった**、ということがはっきりしました。
大きなテキストやロゴが LCP 要素になっていたため、フォントの読み込みが終わるまで LCP が伸びていました。ローカル + WOFF2 + preload にしたところ、一気に改善しました。デザインは変えていないため、見た目のまま速度だけが良くなった形です。

今回の計測と改善はデスクトップを対象としています。モバイルはまだ改善の余地があるため、引き続き取り組んでいく予定です。

---

## ■ ご相談お待ちしております。

今回のパフォーマンス改善はあくまで自社の改善ですが、そこで得た知見や設計の考え方は Webアプリ／業務システム開発にそのまま活かせます。

- 社内業務のWebアプリ化（Excel運用のシステム化）

- 既存システムの改修／リプレイス（速度・UI・保守性）

- 会員管理／予約／在庫／受発注の仕組み構築

- 要件整理／設計相談

などなど、ご気軽にご相談ください

[お問い合わせはこちら](/contact)