Advanced CSS/JS Aggregation
404エラーを防ぎながら複数のCSS/JSファイルを集約し、gzip/brotli圧縮、ミニファイ、バンドリング、CDN統合による高度な最適化を提供します。
advagg
インストール
composer require 'drupal/advagg:^5.0'
composer require 'drupal/advagg:8.x-4.1'
概要
Advanced CSS/JS Aggregation（AdvAgg）は、DrupalのコアCSS/JavaScript集約機能を強化する強力なパフォーマンス最適化モジュールです。Drupal 7とは異なり、Drupal 8/9+向けのAdvAggは、すでに改善されたコアのアセット処理に対する段階的な改善に焦点を当てています。
このモジュールは、集約をバイパスするためのURLクエリ文字列パラメータ（?advagg=0、?advagg=-1、?advagg=1）、開発モード用の管理Cookie、最適化されたファイルのgzipおよびbrotli事前圧縮、外部アセットのDNSプリフェッチを提供します。さまざまなサブモジュールにより、AdvAggはアセットのミニファイ、バンドリング制御、CDN統合、deferやasync属性などの各種読み込み最適化を通じて、フロントエンドのパフォーマンスを大幅に向上させることができます。
AdvAggは、単一の大きな集約ファイルよりも複数の小さなファイルの方がパフォーマンスが良い場合があるHTTP/2環境や、CSS/JS配信の最適化を細かく制御する必要があるサイトに特に有用です。
Features
- リクエストごとに集約を有効/無効にするURLクエリ文字列制御（?advagg=0、?advagg=-1、?advagg=1）
- 開発やデバッグのために一時的に最適化を無効にするブラウザCookie
- より高速な配信のためのすべての最適化CSS/JSファイルのgzip事前圧縮
- Brotli圧縮サポート（PHP brotli拡張が必要）- gzipより約30%優れた圧縮率
- 外部CSS/JSリソースのDNSルックアップを高速化するDNSプリフェッチ
- より効率的な集約のためのメディアクエリを使用したCSSファイルの結合
- 不適切に設定されたアセットタイプ（ファイル vs 外部）の自動修正
- 古いファイルのクリーンアップのための設定可能なcronメンテナンス
- Cache-Control: immutableヘッダー付きのApache .htaccess生成
- すべての集約ファイルの強制再生成のためのグローバルカウンター
- YUI CompressorまたはCoreアルゴリズムによるCSSミニファイ
- JSMin+、JShrink、JSqueeze、またはJSMin C拡張によるJavaScriptミニファイ
- HTTP/2最適化のためのカスタマイズ可能なバンドル数
- GoogleまたはMicrosoftからのjQueryおよびjQuery UIのCDN統合
- defer、async、preprocessの強制を含むアセット変更オプション
- 古いInternet Explorer互換性（4095セレクタ制限の処理）
- CSSLint、JSHint、W3CバリデータによるCSSおよびJavaScriptの検証
Use Cases
HTTP/2サーバー向けの最適化
HTTP/2で動作するサイトでは、Bundlerサブモジュールを使用して単一の大きなファイルの代わりに複数の小さな集約（例：4〜6バンドル）を作成します。HTTP/2のマルチプレキシングにより、複数接続のオーバーヘッドなしに複数のファイルを並行して読み込むことができ、完全に集約された単一ファイルよりも良いパフォーマンスを提供することが多いです。
PageSpeedスコアの最大化
CSSメディアクエリ結合を有効にし、ModifierサブモジュールでJSをフッターに移動してdeferを使用し、すべてのアセットでpreprocessを有効にし、JSMinまたはJSqueezeでJavaScriptミニファイを有効にします。この構成はレンダリングブロックリソースを減らし、Core Web Vitalsを改善します。
集約テストを含む開発ワークフロー
バイパスCookie機能または?advagg=0 URLパラメータを使用して、開発中に一時的に集約を無効にします。これにより、他のユーザーが最適化されたアセットを見続けている間、個々のCSS/JSファイルをテストできます。即時の変更検出のために開発キャッシュレベルも使用できます。
キャッシュ改善のためのCDNホストjQuery
CDNサブモジュールを有効にして、GoogleまたはMicrosoftのCDNからjQueryとjQuery UIを配信します。他のサイトからこれらのライブラリをキャッシュ済みの訪問者は再度ダウンロードする必要がなくなり、初期ページ読み込み時間が改善されます。
エンタープライズ環境でのレガシーIEサポート
Internet Explorer 6-9をサポートする必要があるサイトでは、Old IE Compatibilityサブモジュールを有効にします。これにより、これらのブラウザでスタイルが壊れる原因となる4095セレクタ制限をCSS集約が超えないようにします。
外部ビルドツール統合
External Minificationサブモジュールを使用して、Google Closure Compiler（JavaScript用）やJavaベースのYUI Compressorなどのプロフェッショナルなミニファイツールを統合します。これにより、組み込みのミニファイアよりも積極的な最適化にアクセスできます。
CSS/JSコード品質検証
開発中またはデプロイ前にValidatorサブモジュールを使用して、CSSLintまたはW3CバリデータでCSSファイルを、JSHintでJavaScriptファイルをチェックします。これにより、集約の失敗や実行時の問題を引き起こす可能性のある構文エラーを特定できます。
Tips
- READMEで提供されているJavaScriptブックマークレットを使用して、サイト閲覧中にAdvAggをすばやくオン/オフ切り替えできます
- 最高のミニファイパフォーマンスには、JSMin PHP拡張（PECL）をインストールしてください - 純粋なPHPミニファイアより約500倍高速です
- サーバーがサポートしている場合はbrotli圧縮を有効にしてください - gzipより約30%優れた圧縮を提供します
- 本番サイトではstale_file_thresholdをより長い期間（1〜2ヶ月）に設定して、cron処理を減らしてください
- 環境固有の設定にはsettings.phpのオーバーライドを使用: $config['advagg.settings']['enabled'] = FALSE; 開発用
- Bundlerは、集約機会を最大化するためにModifierのpreprocessオプションと組み合わせると最も効果的です
- どのモジュールがアセットを変更しているかを定期的に情報ページで確認してください - 予期しないモジュールが競合を引き起こす可能性があります
Technical Details
Admin Pages 13
/admin/config/development/performance/advagg
Advanced CSS/JS Aggregationのメイン設定ページ。グローバル設定、圧縮オプション、CSS/JS固有のオプション、cronメンテナンス設定、高度なサーバー構成用のマイナーオプションを設定します。
/admin/config/development/performance/advagg/info
フックテーマ情報、モジュールによって実装されたコアアセットフック、および最適化されたファイルに関する詳細情報を取得するツールを表示するデバッグ情報ページ。設定オプションはありません。
/admin/config/development/performance/advagg/operations
キャッシュを制御し、テストを管理するためのコマンドのコレクション。集約の問題をトラブルシューティングするのに便利です。バイパスCookieの切り替え、cronメンテナンスタスク、キャッシュクリアのための抜本的な対策が含まれます。
/admin/config/development/performance/advagg/bundler
ページごとに作成するCSSおよびJavaScript集約ファイルの数を設定します。単一の大きな集約よりも複数の小さなファイルの方がパフォーマンスが良い場合があるHTTP/2サーバーに有益です。
/admin/config/performance/advagg/cdn
ローカルコピーの代わりに公開CDN（GoogleまたはMicrosoft）からjQueryおよびjQuery UIライブラリを読み込むようにCDN統合を設定します。
/admin/config/development/performance/advagg/css-minify
組み込みのミニファイアを使用してCSSミニファイ設定を構成します。YUI CompressorはCoreアルゴリズムよりも優れたミニファイを提供します。
/admin/config/development/performance/advagg/js-minify
さまざまなミニファイアを使用してJavaScriptミニファイを構成します。JSMin C拡張が利用可能な場合、最速のパフォーマンスを提供します。
/admin/config/development/performance/advagg/ext-minify
CSSおよびJavaScript用の外部コマンドラインミニファイアを構成します。シェルコマンドを介してGoogle Closure Compiler、YUI Compressor、Microsoft Ajax Minifierなどのツールを使用できます。
/admin/config/development/performance/advagg/mod
preprocessの強制、コンソールログの削除、スクリプト順序の最適化、CSSおよびJavaScriptのdefer/async読み込みを含む高度なアセット変更を構成します。
/admin/config/development/performance/advagg/old_ie_compatibility
ファイルごとに4095セレクタ制限がある古いInternet Explorerバージョン（6-9）の互換性設定を構成します。
/admin/config/development/performance/advagg/validate_css_lint
Drupal coreの.csslintrc設定でCSSLint JavaScriptライブラリを使用してCSSファイルを検証します。
/admin/config/development/performance/advagg/validate_css_w3
W3C CSSバリデータサービスを使用してCSSファイルを検証します。注意：ファイルは外部のW3Cサーバーに送信されます。
/admin/config/development/performance/advagg/validate_js_hint
Drupal固有の定義済みグローバルを使用してJSHintライブラリでJavaScriptファイルを検証します。
権限 1
Hooks 5
hook_module_implements_alter
AdvAggのjs_alterおよびcss_alterフックが処理順序の最後に実行されるようにし、他のモジュールの後に最終的な最適化を適用できるようにするために使用されます。
hook_js_alter
AdvAggが有効な場合、AdvAggオプティマイザーサービスを通じてJavaScriptアセット配列を処理します。
hook_css_alter
AdvAggが有効な場合、AdvAggオプティマイザーサービスを通じてCSSアセット配列を処理します。
hook_cron
htaccessファイルの生成と、設定されたしきい値に基づく古い最適化ファイルのクリーンアップを含むメンテナンスタスクを実行します。
hook_form_FORM_ID_alter (system_performance_settings)
コアのパフォーマンス設定フォームにAdvAggバイパスオプションに関する有用な情報を追加します。
Drush Commands 5
drush advagg-cron
AdvAggのcronフックを実行して古い集約ファイルをクリーンアップします。
drush advagg-disable
すべてのAdvAgg機能を無効にします。
drush advagg-enable
すべてのAdvAgg機能を有効にします。
drush advagg-clear-all-files
生成/最適化されたすべてのCSSおよびJSファイルを削除し、AdvAggキャッシュをクリアします。
drush advagg-force-new-aggregates
グローバルカウンターを増加させてすべての新しい最適化ファイルの作成を強制します。既存のすべての集約をクリアします。
Troubleshooting 6
まず、URLに?advagg=0を追加してAdvAggが原因であることを確認します。情報ページをチェックして、競合する可能性のあるアセットフックを実装しているモジュールを確認します。問題のあるものを特定するためにサブモジュールを1つずつ無効にします。Modifierサブモジュールのdefer/asyncオプションはJS問題の一般的な原因です。
操作ページの「すべてのキャッシュをクリア」ボタンを使用してすべてのキャッシュをクリアするか、「drush advagg-caf」を実行します。CDNを使用している場合は、グローバルカウンターを増加させて新しいファイル名を強制します。cache_level設定を確認してください - 開発モードは即時更新を提供します。
JavaScriptミニファイエラーが出力を破損している可能性があります。ミニファイを無効にし、キャッシュをクリアしてから、別のミニファイアで再度有効にします。JSqueezeが最も信頼性の高いフォールバックです。特定のミニファイエラーについてはサーバーエラーログを確認してください。
AdvAggの.htaccessファイルはNginxでは動作しません。/sites/*/files/(css|js)ロケーションのNginxサーバー設定にgzip_static on;および/またはbrotli_static on;ディレクティブを追加してください。
JSMin+またはJSqueezeでの大きなJavaScriptファイルは大量のメモリを消費する可能性があります。より良いパフォーマンスのためにJSMin C拡張を使用するか、External Minificationサブモジュールを使用して処理を外部ツールにオフロードしてください。
これは多くの場合、古い参照が原因です。すべてのキャッシュをクリアし、グローバルカウンターを増加させてください。public://css/optimizedおよびpublic://js/optimizedディレクトリが書き込み可能であることを確認してください。htaccessファイルが正しく生成されたか確認してください。
Security Notes 4
- External Minificationサブモジュールは管理設定に基づいてシェルコマンドを実行します - 「サイト設定を管理」権限は信頼できるユーザーにのみ付与してください
- W3C CSSバリデータはCSSコンテンツを外部サーバーに送信します - 機密性の高いスタイリングを持つサイトのプライバシーへの影響に注意してください
- 高度な集約をバイパスする権限により、ユーザーはミニファイ/圧縮されていないアセットを見ることができ、コードコメントや構造が公開される可能性があります
- AdvAggが生成したhtaccessファイルが適切な権限を持ち、重要なセキュリティディレクティブをオーバーライドしていないことを常に確認してください