【VtigerCRMチューニング】画面が重い・遅いを解消！ブラウザ側の処理とフロントエンドを最適化して体感速度を劇的に改善する方法

オープンソース版VtigerCRMを社内運用していると、「一覧画面の切り替えがもたつく」「詳細画面を開くのに数秒待たされる」 といった動作の重さに悩まされることがあります。

レスポンス遅延の原因はサーバーやデータベース（MySQL）だけでなく、「ブラウザ側のレンダリング処理」や「大量のJavaScript/CSS/画像などの静的アセット読み込み」 に起因しているケースが非常に多く見られます。

本記事では、サーバー側で手軽に設定できるブラウザキャッシュの有効化、gzip/Brotli圧縮、HTTP/2の活用など、ブラウザ処理を中心としたVtigerCRMの高速化・体感レスポンス改善手法を徹底解説します。

1. なぜVtigerCRMの画面描画は重くなりやすいのか？
2. ブラウザ処理・フロントエンド改善の4大アプローチ
3. 最適化前後の体感比較
4. まとめ

1. なぜVtigerCRMの画面描画は重くなりやすいのか？

VtigerCRM（v7.x / v8.x）は多機能なシングルページ風UIを採用しており、以下のようなフロントエンド側の特徴があります。

リクエスト数の多さ： 画面表示時に数十〜数百個のJS/CSS/アイコンフォント・画像ファイルを読み込む
DOMツリーの肥大化： 1つの画面に多くのブロック・フィールド・関連リストが配置されていると描画コストが増大する
キャッシュ未設定による再読み込み： 適切なキャッシュヘッダーがないと、画面遷移ごとに毎回サーバーへ全アセットを取りに行ってしまう

これらを最適化することで、2回目以降のアクセスや日常的な画面遷移の体感速度を大幅に引き上げる ことが可能です。

2. ブラウザ処理・フロントエンド改善の4大アプローチ

① ブラウザキャッシュの有効化（Expires / Cache-Control）

CSS、JavaScript、画像、Webフォントなどの静的ファイルに対して、ブラウザ側にキャッシュを保持させる設定を行います。

■ Apacheの場合（.htaccess または httpd.conf）

mod_expires や mod_headers を有効化し、静的ファイルに適切な有効期限を設定します。

Apache

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
    
    # CSS・JavaScript
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"
    
    # 画像・フォント
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

■ Nginxの場合（nginx.conf）

Nginx

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

② 静的ファイルの圧縮転送（gzip / Brotli）

JavaScriptやCSSの転送サイズを圧縮することで、ネットワーク転送時間を大幅に短縮します。

■ Apache（mod_deflate）

Apache

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
    AddOutputFilterByType DEFLATE application/javascript application/json
    AddOutputFilterByType DEFLATE image/svg+xml font/woff2
</IfModule>

■ Nginx（gzip設定）

Nginx

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
gzip_min_length 1024;
gzip_comp_level 5;

③ HTTP/2（または HTTP/3）の有効化

VtigerCRMは画面1ページあたり多数の静的リソースを並行して取得します。

従来の HTTP/1.1 では同時接続数制限（1ドメインあたり通常6本程度）によりファイル取得が順番待ち（ブロッキング）になりますが、HTTP/2 を有効にすれば1本のTCP接続で複数ファイルを同時に送受信（マルチプレックス）できるため、初期ロードの待ち時間が劇的に短縮されます。

SSL/TLS（HTTPS）証明書を設定の上、Webサーバー側で http2 プロトコルを有効化してください。

④ CRMレイアウトの軽量化（DOM要素の削減）

ブラウザのJavaScript実行負荷とレンダリング負荷を下げるため、CRM側の設定を見直します。

レイアウトエディタで不要なフィールドを非表示にする使っていない項目や長文フィールドを「詳細・編集画面」から整理するだけで、ブラウザが構築するDOM要素数が減り、描画が軽くなります。
関連タブ・ブロックの初期折りたたみ一度に全関連レコードを読み込まず、必要なときだけ展開する設計にします。
一覧画面の表示件数を適切に保つ1ページあたりの表示件数は 20〜50件 程度を推奨します（100件以上一括表示はブラウザの描画遅延を招きます）。

3. 最適化前後の体感比較

項目	最適化前（デフォルト）	最適化後（キャッシュ・圧縮・HTTP/2導入）
静的ファイルの転送量	数MB単位で毎回ダウンロード	圧縮により約70%削減＆キャッシュで0秒取得
画面遷移の待ち時間	クリックごとに1〜3秒の引っ掛かり	クリックと同時にサクサク遷移
サーバー負荷	全リクエストの静的配信でCPU浪費	動的処理（PHP/DB）にリソースを集中可能