[全体・パフォーマンス] gzip圧縮・ブラウザキャッシュヘッダーを追加しました

[masaton0216]

概要

PageSpeed Insights のモバイルスコアが 44 点（FCP 23.8s / LCP 34.7s）と低迷していたため、Apache 側で gzip 圧縮と長期ブラウザキャッシュを有効化し、転送量を大幅に削減する対応を行いました。

合わせて、長期キャッシュ化に伴いキャッシュバスティングが効いていなかった 2 ファイル（503 メンテナンス画面・マニュアル）のバスティング不備も修正しています。

変更内容

1. public/.htaccess に gzip 圧縮・ブラウザキャッシュヘッダーを追加

• mod_deflate で CSS/JS/JSON/SVG/フォント等を gzip 圧縮
• mod_expires で CSS/JS/画像/フォントに 1 年間のキャッシュヘッダーを付与
• <IfModule> で囲んでいるため、対象モジュールが無効な環境ではスキップされ、500 にはなりません

転送量削減の見込み（gzip 圧縮）:

ファイル	現在	gzip後（推定）	削減率
app.js	532KB	~150KB	~72%
app.css	296KB	~45KB	~85%
connect.css	16KB	~4KB	~75%
707.js	20KB	~7KB	~65%

2. resources/views/errors/503.blade.php にキャッシュバスティングを追加

• 元: asset('css/app.css') （バージョン無し）
• 新: {{ url('/') }}{{ mix('css/app.css') }} （?id=hash 自動付与）
• 既存の resources/views/layouts/app.blade.php:110 と同じパターンを採用しており、サブディレクトリ運用にも対応します

3. resources/views/manual/common/layout_base.blade.php にキャッシュバスティングを追加

• Bootstrap / jQuery / popper / FontAwesome / manual.css に ?version={{ config('version.cc_version') }} を付与
• マニュアルアセットは tests/Manual/html_src/ 配下にあり public/ 配下に存在しないため、filemtime() ではなく Connect-CMS のバージョン文字列を利用しています（マニュアルは Connect-CMS のバージョンアップ時に再生成される運用のため、バージョン番号と更新タイミングが一致します）

既存全アセットのキャッシュバスティング状況（調査済み）

長期キャッシュ化（1年）にあたり、全アセットのバスティング状況を事前確認しています。

問題なし（既にバスティング済み）

アセット種別	方式
app.js / app.css / wysiwyg.js / codemirror.js	Mix versioning (?id=hash)
707.js / connect.css / option CSS	?version=filemtime()
テーマCSS/JS	?version=filemtime()
site.css / page CSS	?version=timestamp
FontAwesomeフォント / アイコン画像（app.css内）	Webpack がハッシュ付与

本 PR で修正

ファイル	対応
resources/views/errors/503.blade.php	mix() 経由に変更
resources/views/manual/common/layout_base.blade.php	?version={cc_version} を付与

レビュー完了希望日

急ぎません（軽微な改修のため）

関連Pull requests/Issues

• closes [パフォーマンス] gzip圧縮・ブラウザキャッシュヘッダーの追加 #2374

参考

• 本 PR は Apache（mod_deflate / mod_expires）を前提としています。Nginx 環境では別途 nginx.conf 側での設定が必要です。
• 本番環境の Apache でモジュールが有効か事前確認をお願いします:

  apache2ctl -M | grep -E 'deflate|expires'
  # 無効な場合
  a2enmod deflate expires && systemctl reload apache2
  

留意事項

画像のキャッシュバスティングについて

本 PR により、public/ 配下の静的画像（PNG/JPEG/GIF/SVG/WebP）にも 1 年間のブラウザキャッシュヘッダーが付与されます。画像種別ごとの挙動は以下の通りです。

画像種別	経路	キャッシュ制御	バスティング	影響
アップロード画像	/file/{id}	UploadController::getFile() で PHP が Cache-Control: max-age=604800（7日）を直接付与	ID 採番でURL自体が変わる	本 PR の影響なし。従来通り
app.css 内で参照される画像	Webpack ビルド	.htaccess の 1 年キャッシュが効く	Webpack がファイル名にハッシュ付与	問題なし
テーマ静的画像 / public/ 配下の固定画像	Apache 直接配信	.htaccess の 1 年キャッシュが効く	無し	下記参照

テーマ静的画像（バスティング無し）の運用上の注意

テーマ配下の静的画像（例：public/themes/Xxx/img/*.png）はファイル名固定でバスティング機構がありません。本 PR 適用後、これらの画像を 同じファイル名のまま差し替えると、ブラウザは最大 1 年間古い画像を表示し続けます。

想定される運用ケースと影響

運用ケース	影響
Connect-CMS 本体アップデートで新しいテーマに切り替え（テーマ名が変わる）	問題なし。パスが変わるため新規取得される
サイト管理者が CMS 上からロゴ・アイキャッチを変更	問題なし。アップロード画像経路（/file/{id}）になる
サイト管理者が FTP 等で静的画像を 同名のまま 直接差し替え	要注意。1 年間キャッシュが残る

同名差し替えが必要になった場合の回避策

• ファイル名を変更する（推奨）
• ファイル名末尾にバージョンサフィックスを付ける（例：logo_v2.png）
• ユーザーに強制リロード（Ctrl+F5）を案内する

動作確認

• Chrome DevTools の Network タブで CSS/JS のレスポンスヘッダーに Content-Encoding: gzip が含まれることを確認
• CSS/JS の Transferred サイズが圧縮されていることを確認
• レスポンスヘッダーに Cache-Control または Expires が含まれることを確認
• php artisan down でメンテナンスモードに入り、503 ページの CSS が正常に読み込まれることを確認
• PageSpeed Insights の「効率的なキャッシュ保存期間を使用する」項目で削減サイズが 1,867 KiB → 16 KiB に改善することを確認（残存分は外部の Google Analytics のみ）

DB変更の有無

無し

チェックリスト

• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule

[masaton0216]

参考（対応前後のpagespeed×gip観点）

対応前

## 対応後

[masaton0216]

参考（対応前後のpagespeed×キャッシュ観点）

対応前

対応後

[masaton0216]

参考（対応前後のpagespeed×概要）

対応前

## 対応後

[masaton0216]

参考（wiki）

wikiに経過を記録しています。
https://github.com/opensource-workshop/connect-cms/wiki/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9