VtigerCRMのレスポンス改善（ブラウザ処理関連）

VtigerCRMのレスポンス改善において、サーバーサイド（DBやPHP）の処理時間を短縮するのと同時に、「ブラウザがデータを受け取ってから画面を描画し終わるまでの時間（レンダリング時間）」を短縮することは、ユーザーの体感速度（UX）向上に非常に効果的です。

VtigerCRMのソースコード修正や設定変更で可能な「ブラウザ描画の高速化」対策を提案します。

効果が高い順、かつ実装しやすい順に構成しました。

1. レンダリングコストの高いCSS装飾の削減（フラットデザイン化）

Vtigerのデフォルトテーマ（特にV7系）は、ドロップシャドウ（影）やグラデーションを多用しています。これらはブラウザの描画負荷（Repaint/Reflow）が高いため、これらを削除・簡素化するだけで描画がキビキビとします。

対策:

カスタムCSSファイル（layouts/v7/resources/custom.css 等）または、ヘッダーテンプレートに以下のCSSを追加・適用します。

CSS

/* 影を削除してレンダリング負荷を下げる */
.navbar, .footer, .sidebar, .listViewEntryValue, .summaryWidgetContainer {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* 丸角を減らして計算コストを下げる（任意） */
* {
    border-radius: 0 !important; /* または 2px 程度に抑える */
}

/* 透過処理やグラデーションを単色にする */
.module-nav {
    background: #f5f5f5 !important; /* グラデーション廃止 */
    background-image: none !important;
}

2. 画像の遅延読み込み (Lazy Loading) の導入

Vtigerはリストビューや詳細画面で、担当者のアイコン画像や商品画像を表示しますが、これらが一斉に読み込まれると描画をブロックします。

対策:

Smartyテンプレートファイル（.tpl）内の <img> タグに、ブラウザネイティブの遅延読み込み属性 loading=”lazy” を付与します。

修正対象ファイルの例:

layouts/v7/modules/Vtiger/ListViewContents.tpl (リストビュー)
layouts/v7/modules/Vtiger/DetailViewHeader.tpl (詳細画面ヘッダー)

修正イメージ:

HTML

<img src="{$IMAGE_PATH}" />

<img src="{$IMAGE_PATH}" loading="lazy" decoding="async" />

※ decoding="async" を併用すると、画像のデコード処理がメインスレッドをブロックしなくなり、さらにスムーズになります。

3. ブラウザキャッシュの強力な活用 (.htaccess設定)

Vtigerは大量のJS、CSS、アイコン画像を使用します。これらを毎回サーバーに取りに行かせず、ブラウザのキャッシュを最大限利用させます。

対策:

Vtigerのルートディレクトリにある .htaccess に、Expires ヘッダーの設定を明記・強化します。

Apache

<IfModule mod_expires.c>
    ExpiresActive On
    
    # 画像は長期間キャッシュ（1ヶ月〜1年）
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"

    # CSS/JSもキャッシュ（変更時はファイル名パラメータが変わるため長くても安全）
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    
    # フォントファイル
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
</IfModule>

4. 不要なアニメーションの無効化

jQueryを使用したフェードイン・フェードアウト等のアニメーションは、業務システムにおいては「待機時間」になります。

対策:

CSSおよびJSでアニメーションを無効化します。

CSSでの対策:

CSS

/* 全てのアニメーション・トランジションを無効化 */
* {
    animation: none !important;
    transition: none !important;
}

JSでの対策 (layouts/v7/resources/app.js 等の初期化処理に追記):

JavaScript

// jQueryのアニメーション機能をオフにする
$.fx.off = true;

まとめ

まず取り組むべき優先順位としては以下の通りです。

ブラウザキャッシュ設定 (.htaccess): リピート訪問時の爆速化。
CSS装飾の削減 (box-shadow等): 描画計算コストの削減。
システムフォント化: ダウンロード時間の削減（前回実施済みであればOK）。
jQueryアニメーションOFF: 体感速度の向上。

これらはソースコードのロジックに深く介入せず、比較的安全に「サクサク感」を出せる手法です。

（注）クライアントのスペック、データ量など複合的な要素がからみますので上記修正の効果はお約束できるものではございません。ご了承ください。