807 lines
33 KiB
Markdown
807 lines
33 KiB
Markdown
![]() |
|
||
|
ADVANCED CSS/JS AGGREGATION MODULE
|
||
|
==================================
|
||
|
|
||
|
|
||
|
CONTENTS OF THIS FILE
|
||
|
---------------------
|
||
|
|
||
|
- Introduction
|
||
|
- Requirements
|
||
|
- Recommended modules
|
||
|
- Installation
|
||
|
- How to get a high PageSpeed score
|
||
|
- JSMin PHP Extension
|
||
|
- Brotli PHP Extension
|
||
|
- Zopfli PHP Extension
|
||
|
- nginx Configuration
|
||
|
- JavaScript Bookmarklet
|
||
|
- Troubleshooting
|
||
|
- Features & benefits
|
||
|
- Configuration
|
||
|
- Additional options for `drupal_add_css/js` functions
|
||
|
- Technical Details & Hooks
|
||
|
|
||
|
|
||
|
INTRODUCTION
|
||
|
------------
|
||
|
|
||
|
The Advanced CSS/JS Aggregation allows you to improve the frontend performance
|
||
|
of your site. Be sure to do a before and after comparison by using Google's
|
||
|
PageSpeed Insights and WebPagetest.org.
|
||
|
https://developers.google.com/speed/pagespeed/insights/
|
||
|
http://www.webpagetest.org/easy
|
||
|
|
||
|
|
||
|
REQUIREMENTS
|
||
|
------------
|
||
|
|
||
|
No special requirements.
|
||
|
|
||
|
|
||
|
RECOMMENDED MODULES
|
||
|
-------------------
|
||
|
|
||
|
- Libraries (https://www.drupal.org/project/libraries)
|
||
|
Allows for 3rd party code for minification to be used by AdvAgg.
|
||
|
|
||
|
|
||
|
INSTALLATION
|
||
|
------------
|
||
|
|
||
|
- Install as you would normally install a contributed Drupal module. Visit:
|
||
|
https://drupal.org/documentation/install/modules-themes/modules-7
|
||
|
for further information.
|
||
|
|
||
|
|
||
|
HOW TO GET A HIGH PAGESPEED SCORE
|
||
|
---------------------------------
|
||
|
|
||
|
Be sure to check the site after every section to make sure the change didn't
|
||
|
mess up your site. The changes under AdvAgg Modifier are usually the most
|
||
|
problematic but they offer the biggest improvements.
|
||
|
|
||
|
#### Advanced CSS/JS Aggregation ####
|
||
|
Go to `admin/config/development/performance/advagg`
|
||
|
|
||
|
Select "Use recommended (optimized) settings"
|
||
|
|
||
|
#### AdvAgg Compress Javascript ####
|
||
|
Install AdvAgg Compress Javascript if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/js-compress`
|
||
|
|
||
|
- Select JSMin if available; otherwise select JSMin+
|
||
|
- Select Strip everything (smallest files)
|
||
|
- Save configuration
|
||
|
- Click the batch compress link to process these files at the top.
|
||
|
|
||
|
#### AdvAgg Async Font Loader ####
|
||
|
Install AdvAgg Async Font Loader if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/font`
|
||
|
|
||
|
- Select Local file included in aggregate (version: X.X.X). If this option is
|
||
|
not available follow the directions right below the options on how to install
|
||
|
it.
|
||
|
|
||
|
Keep the 2 checkboxes checked.
|
||
|
|
||
|
#### AdvAgg Bundler ####
|
||
|
Install AdvAgg Bundler if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/bundler`
|
||
|
|
||
|
If your server supports HTTP 2 then select "Use HTTP 2.0 settings"; otherwise
|
||
|
leave it at the "Use HTTP 1.1 settings".
|
||
|
|
||
|
#### AdvAgg Relocate ####
|
||
|
Install AdvAgg Relocate if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/relocate`
|
||
|
|
||
|
Select "Use recommended (optimized) settings"
|
||
|
|
||
|
#### AdvAgg Modifier ####
|
||
|
Install AdvAgg Modifier if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/mod`
|
||
|
|
||
|
Select "Use recommended (optimized) settings"
|
||
|
|
||
|
#### AdvAgg Critical CSS module ####
|
||
|
Install AdvAgg Critical CSS if not enabled and go to
|
||
|
`admin/config/development/performance/advagg/critical-css`
|
||
|
|
||
|
These are the directions for the front page of your site.
|
||
|
|
||
|
Under Add Critical CSS
|
||
|
- Select the theme that is your front page; usually the default is correct.
|
||
|
- User type should be set to 'anonymous' under most circumstances.
|
||
|
- Type of lookup, select URL
|
||
|
- Value to lookup, type in `<front>`
|
||
|
- Critical CSS, paste in the generated CSS from running your homepage url
|
||
|
through https://www.sitelocity.com/critical-path-css-generator which is inside
|
||
|
of the 'Critical Path CSS' textarea on the sitelocity page.
|
||
|
- Click Save Configuration.
|
||
|
|
||
|
Other landing pages should have their critical CSS added as well. If you have
|
||
|
Google Analytics this will show you how to find your top landing pages
|
||
|
https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages
|
||
|
or for Piwik https://piwik.org/faq/how-to/faq_160/. You can also use this
|
||
|
chrome browser plugin to generate critical CSS
|
||
|
https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=en
|
||
|
|
||
|
|
||
|
JSMIN PHP EXTENSION
|
||
|
-------------------
|
||
|
|
||
|
The AdvAgg JS Compress module can take advantage of jsmin.c. JavaScript parsing
|
||
|
and minimizing will be done in C instead of PHP dramatically speeding up the
|
||
|
process. If using PHP 5.3.10 or higher https://github.com/sqmk/pecl-jsmin is
|
||
|
recommended. If using PHP 5.3.9 or lower
|
||
|
http://www.ypass.net/software/php_jsmin/ is recommended.
|
||
|
|
||
|
|
||
|
BROTLI PHP EXTENSION
|
||
|
--------------------
|
||
|
|
||
|
The AdvAgg module can take advantage of Brotli compression. Install this
|
||
|
extension to take advantage of it. Should reduce CSS/JS files by 20%.
|
||
|
https://github.com/kjdev/php-ext-brotli
|
||
|
|
||
|
|
||
|
ZOPFLI PHP EXTENSION
|
||
|
--------------------
|
||
|
|
||
|
The AdvAgg module can take advantage of the Zopfli compression algorithm.
|
||
|
Install this extension to take advantage of it. This gives higher gzip
|
||
|
compression ratios compared to stock PHP.
|
||
|
https://github.com/kjdev/php-ext-zopfli
|
||
|
|
||
|
|
||
|
NGINX CONFIGURATION
|
||
|
-------------------
|
||
|
|
||
|
https://drupal.org/node/1116618
|
||
|
Note that @drupal (last line of code below) might be @rewrite or @rewrites
|
||
|
depending on your servers configuration. If there are image style rules in your
|
||
|
Nginx configuration add this right below that. If you want to have brotli
|
||
|
support https://github.com/google/ngx_brotli is how to install that; add
|
||
|
`brotli_static on;` right above `gzip_static on;` in the configuration below.
|
||
|
|
||
|
###
|
||
|
### advagg_css and advagg_js support
|
||
|
###
|
||
|
location ~* files/advagg_(?:css|js)/ {
|
||
|
gzip_static on;
|
||
|
access_log off;
|
||
|
expires max;
|
||
|
add_header ETag "";
|
||
|
add_header Cache-Control "max-age=31449600, no-transform, public";
|
||
|
try_files $uri $uri/ @drupal;
|
||
|
}
|
||
|
|
||
|
Also noted that some ready made nginx configurations add in a Last-Modified
|
||
|
header inside the advagg directories. These should be removed.
|
||
|
|
||
|
|
||
|
JAVASCRIPT BOOKMARKLET
|
||
|
----------------------
|
||
|
|
||
|
You can use this JS code as a bookmarklet for toggling the AdvAgg URL parameter.
|
||
|
See http://en.wikipedia.org/wiki/Bookmarklet for more details.
|
||
|
|
||
|
javascript:(function(){var loc = document.location.href,qs = document.location.search,regex_off = /\&?advagg=-1/,goto = loc;if(qs.match(regex_off)) {goto = loc.replace(regex_off, '');} else {qs = qs ? qs + '&advagg=-1' : '?advagg=-1';goto = document.location.pathname + qs;}window.location = goto;})();
|
||
|
|
||
|
|
||
|
TROUBLESHOOTING
|
||
|
---------------
|
||
|
|
||
|
If the core Fast 404 Pages functionality is enabled via settings.php, the
|
||
|
settings must be changed in order for the on-demand file compilation to work.
|
||
|
Change this:
|
||
|
|
||
|
$conf['404_fast_paths_exclude'] = '/\/(?:styles)\//';
|
||
|
|
||
|
to this:
|
||
|
|
||
|
$conf['404_fast_paths_exclude'] = '/\/(?:styles|advagg_(cs|j)s)\//';
|
||
|
|
||
|
Similarly, if the Fast_404 module is enabled, the 'fast_404_string_whitelisting'
|
||
|
variable must be set inside of settings.php. Add this to your settings.php file:
|
||
|
|
||
|
$conf['fast_404_string_whitelisting'][] = '/advagg_';
|
||
|
|
||
|
|
||
|
Modules like the Central Authentication Services https://drupal.org/project/cas
|
||
|
will redirect all anonymous requests to a login page. Most of the time there is
|
||
|
a setting that allows certain pages to be excluded from the redirect. You should
|
||
|
add the following to those exclusions. Note that sites/default/files is the
|
||
|
location of you public file system (public://) so you might have to adjust this
|
||
|
to fit your setup. services/* is the default (`CAS_EXCLUDE`) and
|
||
|
`httprl_async_function_callback` is needed if httprl will be used.
|
||
|
|
||
|
services/*
|
||
|
sites/default/files/advagg_css/*
|
||
|
sites/default/files/advagg_js/*
|
||
|
httprl_async_function_callback
|
||
|
|
||
|
In the example of CAS this setting can be found on the `admin/config/people/cas`
|
||
|
page and under Redirection there should be a setting called "Excluded Pages".
|
||
|
|
||
|
|
||
|
If Far-Future headers are not being sent out and you are using Apache here are
|
||
|
some tips to hopefully get it working. For Apache enable `mod_rewrite`,
|
||
|
`mod_headers`, and `mod_expires`. Add the following code to the bottom of
|
||
|
Drupal's core .htaccess file (located at the webroot level).
|
||
|
|
||
|
<FilesMatch "^(css|js)__[A-Za-z0-9-_]{43}__[A-Za-z0-9-_]{43}__[A-Za-z0-9-_]{43}.(css|js)(\.gz|\.br)?">
|
||
|
# No mod_headers. Apache module headers is not enabled.
|
||
|
<IfModule !mod_headers.c>
|
||
|
# No mod_expires. Apache module expires is not enabled.
|
||
|
<IfModule !mod_expires.c>
|
||
|
# Use ETags.
|
||
|
FileETag MTime Size
|
||
|
</IfModule>
|
||
|
</IfModule>
|
||
|
|
||
|
# Use Expires Directive if apache module expires is enabled.
|
||
|
<IfModule mod_expires.c>
|
||
|
# Do not use ETags.
|
||
|
FileETag None
|
||
|
# Enable expirations.
|
||
|
ExpiresActive On
|
||
|
# Cache all aggregated css/js files for 52 weeks after access (A).
|
||
|
ExpiresDefault A31449600
|
||
|
</IfModule>
|
||
|
|
||
|
# Use Headers Directive if apache module headers is enabled.
|
||
|
<IfModule mod_headers.c>
|
||
|
# Do not use etags for cache validation.
|
||
|
Header unset ETag
|
||
|
<IfModule !mod_expires.c>
|
||
|
# Set a far future Cache-Control header to 52 weeks.
|
||
|
Header set Cache-Control "max-age=31449600, no-transform, public"
|
||
|
</IfModule>
|
||
|
<IfModule mod_expires.c>
|
||
|
Header append Cache-Control "no-transform, public"
|
||
|
</IfModule>
|
||
|
</IfModule>
|
||
|
</FilesMatch>
|
||
|
# Force advagg .js file to have the type of application/javascript.
|
||
|
<FilesMatch "^js__[A-Za-z0-9-_]{43}__[A-Za-z0-9-_]{43}__[A-Za-z0-9-_]{43}.js(\.gz|\.br)?">
|
||
|
ForceType application/javascript
|
||
|
</FilesMatch>
|
||
|
|
||
|
|
||
|
If pages on the site stop working correctly or looks broken after Advanced
|
||
|
CSS/JS Aggregation is enabled, the first step should be to validate the
|
||
|
individual CSS and/or JS files using the included `advagg_validator` module -
|
||
|
something as simple as an errant unfinished comment in one file may cause entire
|
||
|
aggregates of files to be ignored.
|
||
|
|
||
|
|
||
|
If AdvAgg was installed via drush sometimes directory permissions need to be
|
||
|
fixed. Using `chown -R` on the advagg directories usually solves this issue.
|
||
|
|
||
|
|
||
|
If hosting on Pantheon, you might need to add this to your settings.php file if
|
||
|
you get Numerous login prompts after enabling Adv Agg module on Pantheon Test
|
||
|
and Live instances.
|
||
|
|
||
|
if (isset($_SERVER['PANTHEON_ENVIRONMENT'])) {
|
||
|
// NO trailing slash when setting the $base_url variable.
|
||
|
switch ($_SERVER['PANTHEON_ENVIRONMENT']) {
|
||
|
case 'dev':
|
||
|
$base_url = 'http://dev-sitename.gotpantheon.com';
|
||
|
break;
|
||
|
|
||
|
case 'test':
|
||
|
$base_url = 'http://test-sitename.gotpantheon.com';
|
||
|
break;
|
||
|
|
||
|
case 'live':
|
||
|
$base_url = 'http://www.domain.tld';
|
||
|
break;
|
||
|
}
|
||
|
// Remove a trailing slash if one was added.
|
||
|
if (!empty($base_url)) {
|
||
|
$base_url = rtrim($base_url, '/');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
If you're getting the "HTTP requests to advagg are not getting though" error,
|
||
|
you can try to fix it by making sure the `$base_url` is correctly set for
|
||
|
production and not production environments.
|
||
|
|
||
|
|
||
|
If you're getting mixed content error for CSS JS files over HTTPS then you can
|
||
|
try to redirect all http traffic to be https.
|
||
|
|
||
|
RewriteCond %{HTTPS} off
|
||
|
RewriteCond %{HTTP:X-Forwarded-Proto} !https
|
||
|
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||
|
|
||
|
|
||
|
If brotli compression is not working and you are using Apache here are some tips
|
||
|
to hopefully get it working. For Apache enable `mod_rewrite`, `mod_headers`, and
|
||
|
`mod_expires`. Add the following code right above this line `# Rules to
|
||
|
correctly serve gzip compressed CSS and JS files.`
|
||
|
|
||
|
<IfModule mod_headers.c>
|
||
|
# Serve brotli compressed CSS if they exist and the client accepts br.
|
||
|
RewriteCond %{HTTP:Accept-encoding} br
|
||
|
RewriteCond %{REQUEST_FILENAME}\.br -s
|
||
|
RewriteRule ^(.*)\.css $1\.css\.br [QSA]
|
||
|
RewriteRule \.css\.br$ - [T=text/css,E=no-gzip:1]
|
||
|
|
||
|
# Serve brotli compressed JS if they exist and the client accepts br.
|
||
|
RewriteCond %{HTTP:Accept-encoding} br
|
||
|
RewriteCond %{REQUEST_FILENAME}\.br -s
|
||
|
RewriteRule ^(.*)\.js $1\.js\.br [QSA]
|
||
|
RewriteRule \.js\.br$ - [T=application/javascript,E=no-gzip:1]
|
||
|
|
||
|
<FilesMatch "(\.js\.br|\.css\.br)$">
|
||
|
# Serve correct encoding type.
|
||
|
Header set Content-Encoding br
|
||
|
# Force proxies to cache compressed and non-compressed css/js files
|
||
|
# separately.
|
||
|
Header append Vary Accept-Encoding
|
||
|
</FilesMatch>
|
||
|
</IfModule>
|
||
|
|
||
|
|
||
|
If you are having 5 minute or longer timeouts on the admin/reports/status page
|
||
|
then you might need to use an alternative to drupal_httP_request(). The cURL
|
||
|
HTTP Request module https://www.drupal.org/project/chr might fix this issue.
|
||
|
|
||
|
|
||
|
FEATURES & BENEFITS
|
||
|
-------------------
|
||
|
|
||
|
**Advanced CSS/JS Aggregation core features**
|
||
|
|
||
|
- On demand generation of CSS/JS Aggregates. If the file doesn't exist it will
|
||
|
be generated on demand.
|
||
|
- Stampede protection for CSS and JS aggregation. Uses locking so multiple
|
||
|
requests for the same thing will result in only one thread doing the work.
|
||
|
- Fully cached CSS/JS assets allow for zero file I/O if the Aggregated file
|
||
|
already exists. Results in better page generation performance.
|
||
|
- Smarter aggregate deletion. CSS/JS aggregates only get removed from the
|
||
|
folder if they have not been used/accessed in the last 30 days.
|
||
|
- Smarter cache flushing. Scans all CSS/JS files that have been added to any
|
||
|
aggregate; if that file has changed then flush the correct caches so the
|
||
|
changes go out. The new name ensures changes go out when using CDNs.
|
||
|
- One can add JS to any region of the theme & have it aggregated.
|
||
|
- Url query string to turn off aggregation for that request. `?advagg=0` will
|
||
|
turn off file aggregation if the user has the "bypass advanced aggregation"
|
||
|
permission. `?advagg=-1` will completely bypass all of Advanced CSS/JS
|
||
|
Aggregations modules and submodules. `?advagg=1` will enable Advanced CSS/JS
|
||
|
Aggregation if it is currently disabled.
|
||
|
- Button on the admin page for dropping a cookie that will turn off file
|
||
|
aggregation. Useful for theme development.
|
||
|
- Gzip support. All aggregated files can be pre-compressed into a .gz file and
|
||
|
served from Apache. This is faster then gzipping the file on each request.
|
||
|
|
||
|
**Included submodules**
|
||
|
|
||
|
- `advagg_bundler`:
|
||
|
Smartly groups files together - given a target number of CSS/JS aggregates,
|
||
|
this will try very hard to meet that goal.
|
||
|
- `advagg_css_cdn`:
|
||
|
Load CSS libraries from a public CDN; currently only supports Google's CDN.
|
||
|
- `advagg_css_compress`:
|
||
|
Compress the compiled CSS files using a 3rd party compressor; currently
|
||
|
supports YUI (included).
|
||
|
- `advagg_js_cdn`:
|
||
|
Load JavaScript libraries from a public CDN; currently only supports Google's
|
||
|
CDN.
|
||
|
- `advagg_js_compress`:
|
||
|
Compress the compiled JavaScript files using a 3rd party compressor;
|
||
|
currently supports JSMin+ (included).
|
||
|
- `advagg_mod`:
|
||
|
Includes additional tweaks that may not work for all sites:
|
||
|
- Force preprocessing for all CSS/JS.
|
||
|
- Move JS to footer.
|
||
|
- Add defer tag to all JS.
|
||
|
- Defer loading of CSS.
|
||
|
- Inline all CSS/JS for given paths.
|
||
|
- Use a shared directory for a unified multisite.
|
||
|
- `advagg_validator`:
|
||
|
Validate all CSS files using jigsaw.w3.org. Check all CSS files with CSSLint.
|
||
|
Check all JS files with JSHint.
|
||
|
|
||
|
|
||
|
CONFIGURATION
|
||
|
-------------
|
||
|
|
||
|
Settings page is located at:
|
||
|
`admin/config/development/performance/advagg`
|
||
|
|
||
|
**Global Options**
|
||
|
|
||
|
- Enable Advanced Aggregation: Check this to start using this module. You can
|
||
|
also quickly disable the module here. For testing purposes, this has the same
|
||
|
effect as placing `?advagg=-1` in the URL. Disabled by default.
|
||
|
- Use Cores Grouping Logic: Leave this checkbox enabled until you are ready to
|
||
|
begin exploring the AdvAgg Bundler sub-module which overrides Core's
|
||
|
functionality. This groups files just like Core does so should just work.
|
||
|
Enabled by default. You will also have to disable this checkbox if you wish
|
||
|
to enable some of the CSS Options below on this settings page.
|
||
|
- Use HTTPRL to generate aggregates: If the HTTPRL module is enabled -
|
||
|
https://drupal.org/project/httprl - advagg will use it to generate aggregates
|
||
|
on the fly in a background parallel process. Enabling HTTPRL will improve
|
||
|
page generation speeds when a new aggregate is created because the CSS/JS
|
||
|
file creation will happen in a different process. If HTTPRL is installed it
|
||
|
is Enabled by default; otherwise is it Disabled.
|
||
|
- AdvAgg Cache Settings: As a reference, core takes about 25 ms to run.
|
||
|
Development will scan all files for a change on every page load. Normal is
|
||
|
fine for all use cases. Aggressive should be fine in almost all use cases;
|
||
|
if your inline css/js changes based off of a variable then the aggressive
|
||
|
cache hit ratio will be low; if that is the case consider using
|
||
|
Drupal.settings for a better cache hit ratio.
|
||
|
|
||
|
**Resource Hints**
|
||
|
|
||
|
Preemptively get resources (CSS/JS & sub requests). This will set tags in the
|
||
|
document head telling the browser to open up connections before they are needed.
|
||
|
|
||
|
- DNS Prefetch: Start the DNS lookup for external CSS and JavaScript files as
|
||
|
soon as possible.
|
||
|
- Preconnect: Start the connection to external resources before an HTTP request
|
||
|
is actually sent to the server. On HTTPS this can have a dramatic effect.
|
||
|
- Location of resource hints: This only needs to be changed if the above
|
||
|
settings are not working.
|
||
|
- Preload link http headers: If your server supports HTTP/2 push then this
|
||
|
allows for resources to be sent before the browser knows it needs it.
|
||
|
|
||
|
**Cron Options**
|
||
|
|
||
|
Adjusting the frequency of how often something happens on cron.
|
||
|
|
||
|
**Obscure Options**
|
||
|
|
||
|
- Create .gz files: Check this by default as it will improve your performance.
|
||
|
For every Aggregated file generated, this will create a gzip version of file
|
||
|
and then only serve it out if the browser accepts gzip files compression.
|
||
|
Enabled by default.
|
||
|
- Create .br files: Check this by default as it will improve your performance.
|
||
|
For every Aggregated file generated, this will create a brotli version of
|
||
|
file and then only serve it out if the browser accepts gzip files
|
||
|
compression. Enabled by default IF the Brotli Extension for PHP is installed.
|
||
|
See https://github.com/kjdev/php-ext-brotli
|
||
|
- Run advagg_ajax_render_alter(): Turn this off if you're having issues with
|
||
|
ajax. Also keep in mind that the max_input_vars setting can cause issues if
|
||
|
you are submitting a lot of data.
|
||
|
- Include the base_url variable in the hooks hash array: Enabled only if you
|
||
|
know you need it.
|
||
|
- Convert absolute paths to be self references: Turn on unless pages are used
|
||
|
inside of an iframe.
|
||
|
- Convert absolute paths to be protocol relative paths: Safe to use unless you
|
||
|
need to support IE6.
|
||
|
- Convert http:// to https://: Usually not needed, but here in case you do.
|
||
|
- Do not run CSS url() values through file_create_url(): Usually not needed,
|
||
|
but here in case you do.
|
||
|
|
||
|
|
||
|
**CSS Options & JS Options**
|
||
|
|
||
|
- Combine CSS files by using media queries: "Use cores grouping logic" needs to
|
||
|
be unchecked in order for this to work. Also noted is that due to an issue
|
||
|
with IE9, compatibility mode is forced off if this is enabled by adding this
|
||
|
tag in the html head:
|
||
|
|
||
|
<!--[if IE]>
|
||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
<![endif]-->
|
||
|
|
||
|
Disabled by default.
|
||
|
- Prevent more than 4095 CSS selectors in an aggregated CSS file: Internet
|
||
|
Explorer before version 10; IE9, IE8, IE7, & IE6 all have 4095 as the limit
|
||
|
for the maximum number of css selectors that can be in a file. Enabling this
|
||
|
will prevent CSS aggregates from being created that exceed this limit. For
|
||
|
more information see
|
||
|
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx Disabled
|
||
|
by default.
|
||
|
- Fix improperly set type (CSS/JS): If type is external but does not start with
|
||
|
http, https, or // change it to be type file. If type is file but it starts
|
||
|
with http, https, or // change type to be external.
|
||
|
|
||
|
**Information page**
|
||
|
|
||
|
located at `admin/config/development/performance/advagg/info`. This page
|
||
|
provides debugging information. There are no configuration options here.
|
||
|
|
||
|
- Hook Theme Info: Displays the `process_html` order. Used for debugging.
|
||
|
- Hook Render Info: Displays the scripts and styles render callbakcs. Used for
|
||
|
debugging.
|
||
|
- CSS files: Displays how often a file has changed.
|
||
|
- JS files: Displays how often a file has changed.
|
||
|
- Modules implementing AdvAgg CSS/JS hooks: Lets you know what modules are
|
||
|
using advagg.
|
||
|
- AdvAgg CSS/JS hooks implemented by modules: Lets you know what advagg hooks
|
||
|
are in use.
|
||
|
- Hooks And Variables Used In Hash: Show what is used to calculate the 3rd hash
|
||
|
of an aggregates filename.
|
||
|
- Get detailed info about an aggregate file: Look up detailed array about any
|
||
|
CSS or JS file listed.
|
||
|
|
||
|
**Operations page**
|
||
|
|
||
|
located at `admin/config/development/performance/advagg/operations`. This is a
|
||
|
collection of commands to control the cache and to manage testing of this
|
||
|
module. In general this page is useful when troubleshooting some aggregation
|
||
|
issues. For normal operations, you do not need to do anything on this page below
|
||
|
the Smart Cache Flush. There are no configuration options here.
|
||
|
|
||
|
- Smart Cache Flush
|
||
|
- Flush AdvAgg Cache: Scan all files referenced in aggregated files. If
|
||
|
any of them have changed, increment the counters containing that file and
|
||
|
rebuild the bundle.
|
||
|
|
||
|
- Aggregation Bypass Cookie
|
||
|
- Toggle The "aggregation bypass cookie" For This Browser: This will set or
|
||
|
remove a cookie that disables aggregation for the remainder of the browser
|
||
|
session. It acts almost the same as adding `?advagg=0` to every URL.
|
||
|
|
||
|
- Cron Maintenance Tasks
|
||
|
- Clear All Stale Files: Scan all files in the `advagg_css/js` directories
|
||
|
and remove the ones that have not been accessed in the last 30 days.
|
||
|
- Delete Orphaned Aggregates: Scan CSS/JS advagg dir and remove file if
|
||
|
there is no associated db record.
|
||
|
- Clear Missing Files From the Database: Scan for missing files and remove
|
||
|
the associated entries in the database.
|
||
|
- Delete Unused Aggregates from Database: Delete aggregates that have not
|
||
|
been accessed in the last 6 weeks.
|
||
|
- Delete orphaned/expired advagg locks from the semaphore database table.
|
||
|
- Delete leftover temporary files: Delete old temporary files from the
|
||
|
filesystem.
|
||
|
|
||
|
- Drastic Measures
|
||
|
- Clear All Caches: Remove all data stored in the advagg cache bins.
|
||
|
- Clear All Files: Remove All Generated Files. Remove all files in the
|
||
|
`advagg_(css|js)` directories.
|
||
|
- Force New Aggregates: Increment Global Counter. Force the creation of all
|
||
|
new aggregates by incrementing a global counter.
|
||
|
- Rescan All Files: Force rescan all files and clear the cache. Useful if a
|
||
|
css/js change from a deployment did not work.
|
||
|
- Remove deleted files in the advagg_files table: Remove entries in the
|
||
|
advagg_files table that have a filesize of 0 and delete the
|
||
|
javascript_parsed variable. This gets around the grace period that the
|
||
|
cron cleanup does.
|
||
|
- Reset the AdvAgg Files table: Truncate the advagg_files table and delete
|
||
|
the javascript_parsed variable. This may cause some 404s for CSS/JS assets
|
||
|
for a short amount of time (seconds). Useful if you really want to reset
|
||
|
some stuff. Might be best to put the site into maintenance mode before
|
||
|
doing this.
|
||
|
|
||
|
**Hidden Settings**
|
||
|
|
||
|
The following settings are not configurable from the admin UI and must be set in
|
||
|
settings.php. In general they are settings that should not be changed. The
|
||
|
current defaults are shown.
|
||
|
|
||
|
// Display a message that the bypass cookie is set.
|
||
|
$conf['advagg_show_bypass_cookie_message'] = TRUE;
|
||
|
|
||
|
// Display a message when a css/js file changed while in development mode.
|
||
|
$conf['advagg_show_file_changed_message'] = TRUE;
|
||
|
|
||
|
// Skip the 404 check on status page.
|
||
|
$conf['advagg_skip_404_check'] = FALSE;
|
||
|
|
||
|
// Force the scripts #aggregate_callback to always be _advagg_aggregate_js.
|
||
|
$conf['advagg_enforce_scripts_callback'] = TRUE;
|
||
|
|
||
|
// Default location of AdvAgg configuration items.
|
||
|
$conf['advagg_admin_config_root_path'] = 'admin/config/development/performance';
|
||
|
|
||
|
// Run advagg_url_inbound_alter().
|
||
|
$conf['advagg_url_inbound_alter'] = TRUE;
|
||
|
|
||
|
// Allow JavaScript insertion into any scope even if theme does not support
|
||
|
// it.
|
||
|
$conf['advagg_scripts_scope_anywhere'] = FALSE;
|
||
|
|
||
|
// Empty the scripts key inside of template_process_html replacement
|
||
|
// function.
|
||
|
$conf['advagg_scripts_scope_anywhere'] = FALSE;
|
||
|
|
||
|
// Do more file operations in main thread if the file system is fast. If
|
||
|
// AdvAgg's directories are mounted on something like S3, you might want to
|
||
|
// set this to FALSE.
|
||
|
$conf['advagg_fast_filesystem'] = TRUE;
|
||
|
|
||
|
// Pregenerate aggregate files. If disable the browser requesting the file
|
||
|
// will cause the generation to happen. If advagg 404 handling is broken
|
||
|
// then setting this to false will break your site in bad ways.
|
||
|
$conf['advagg_pregenerate_aggregate_files'] = TRUE;
|
||
|
|
||
|
// Set the jQuery UI version.
|
||
|
$conf['advagg_css_cdn_jquery_ui_version'] = '1.8.7';
|
||
|
|
||
|
// See if jQuery UI should be grabbed from the Google CDN.
|
||
|
$conf['advagg_css_cdn_jquery_ui'] = TRUE;
|
||
|
|
||
|
// Set the jQuery UI version.
|
||
|
$conf['advagg_js_cdn_jquery_ui_version'] = '1.8.7';
|
||
|
|
||
|
// Set the jQuery version.
|
||
|
$conf['advagg_js_cdn_jquery_version'] = '1.4.4';
|
||
|
|
||
|
// Use minification.
|
||
|
$conf['advagg_js_cdn_compression'] = TRUE;
|
||
|
|
||
|
// See if jQuery UI should be grabbed from the Google CDN.
|
||
|
$conf['advagg_js_cdn_jquery_ui'] = TRUE;
|
||
|
|
||
|
// See if jQuery should be grabbed from the Google CDN.
|
||
|
$conf['advagg_js_cdn_jquery'] = TRUE;
|
||
|
|
||
|
// Value for the compression ratio test.
|
||
|
$conf['advagg_js_compress_max_ratio'] = 0.9;
|
||
|
|
||
|
// Value for the compression ratio test.
|
||
|
$conf['advagg_js_compress_ratio'] = 0.1;
|
||
|
|
||
|
// Skip far future check on status page.
|
||
|
$conf['advagg_skip_far_future_check'] = FALSE;
|
||
|
|
||
|
// Skip preprocess and enabled checks.
|
||
|
$conf['advagg_skip_enabled_preprocess_check'] = FALSE;
|
||
|
|
||
|
// Default root dir for the advagg files; see advagg_get_root_files_dir().
|
||
|
$conf['advagg_root_dir_prefix'] = 'public://';
|
||
|
|
||
|
// How long to wait when writing the aggregate if a file is missing or the
|
||
|
// hash doesn't match.
|
||
|
$conf['advagg_file_read_failure_timeout'] = 3600;
|
||
|
|
||
|
// If FALSE mtime of files will only trigger a change if they are in the
|
||
|
// future.
|
||
|
$conf['advagg_strict_mtime_check'] = TRUE;
|
||
|
|
||
|
// Skip 304 check on status page.
|
||
|
$conf['advagg_skip_304_check'] = FALSE;
|
||
|
|
||
|
// Control how many bytes can be inlined.
|
||
|
$conf['advagg_mod_css_defer_inline_size_limit'] = 12288;
|
||
|
|
||
|
// Control how many bytes the preload header can use.
|
||
|
$conf['advagg_resource_hints_preload_max_size'] = 3072;
|
||
|
|
||
|
// If TRUE, only verify 1st hash instead of all 3 of the filename.
|
||
|
$conf['advagg_weak_file_verification'] = FALSE;
|
||
|
|
||
|
|
||
|
ADDITIONAL OPTIONS FOR DRUPAL_ADD_CSS/JS FUNCTIONS
|
||
|
--------------------------------------------------
|
||
|
|
||
|
AdvAgg extends the available options inside of `drupal_add_css` and
|
||
|
`drupal_add_js`.
|
||
|
|
||
|
`drupal_add_js` - additional keys for $options.
|
||
|
|
||
|
- `browsers`: Works the same as the one found in drupal_add_css.
|
||
|
- `onload`: Run this js code when after the js file has loaded.
|
||
|
- `onerror`: Run this js code when if the js file did not load.
|
||
|
- `async`: TRUE - Load this file using async.
|
||
|
- `no_defer`: TRUE - Never defer or async load this js file.
|
||
|
|
||
|
Both `drupal_add_js` + `drupal_add_css` - additional keys for $options.
|
||
|
|
||
|
- `scope_lock`: TRUE - Make sure the scope of this will not ever change.
|
||
|
- `movable`: FALSE - Make sure the ordering of this will not ever change.
|
||
|
- `preprocess_lock`: TRUE - Make sure the preprocess key will not ever change.
|
||
|
|
||
|
|
||
|
TECHNICAL DETAILS & HOOKS
|
||
|
-------------------------
|
||
|
|
||
|
**Technical Details**
|
||
|
|
||
|
- There are five database tables and two cache table used by advagg.
|
||
|
`advagg_schema` documents what they are used for.
|
||
|
- Files are generated by this pattern:
|
||
|
|
||
|
css__[BASE64_HASH]__[BASE64_HASH]__[BASE64_HASH].css
|
||
|
|
||
|
The first base64 hash value tells us what files are included in the
|
||
|
aggregate. Changing what files get included will change this value.
|
||
|
|
||
|
The second base64 hash value is used as a sort of version control; it changes
|
||
|
if any of the base files contents have changed. Changing a base files content
|
||
|
(like drupal.js) will change this value.
|
||
|
|
||
|
The third base64 hash value records what settings were used when generating
|
||
|
the aggregate. Changing a setting that affects how aggregates get built
|
||
|
(like toggling "Create .gz files") will change this value.
|
||
|
|
||
|
- To trigger scanning of the CSS / JS file cache to identify new files, run
|
||
|
the following:
|
||
|
|
||
|
// Trigger reloading the CSS and JS file cache in AdvAgg.
|
||
|
if (module_exists('advagg')) {
|
||
|
module_load_include('inc', 'advagg', 'advagg.cache');
|
||
|
advagg_push_new_changes();
|
||
|
}
|
||
|
|
||
|
- Aggressive Cache Setting: This will fully cache the rendered html generated
|
||
|
by AdvAgg. The cache ID is set by this code:
|
||
|
|
||
|
// CSS.
|
||
|
$hooks_hash = advagg_get_current_hooks_hash();
|
||
|
$css_cache_id_full =
|
||
|
'advagg:css:full:' . $hooks_hash . ':' .
|
||
|
drupal_hash_base64(serialize($full_css));
|
||
|
// JS.
|
||
|
$hooks_hash = advagg_get_current_hooks_hash();
|
||
|
$js_cache_id_full =
|
||
|
'advagg:js:full:' . $hooks_hash . ':' .
|
||
|
drupal_hash_base64(serialize($js_scope_array));
|
||
|
|
||
|
The second and final hash value in this cache id is the css/js_hash value.
|
||
|
This takes the input from `drupal_add_css/js()` and creates a hash value from
|
||
|
it. If a different file is added and/or inline code changed, this hash value
|
||
|
will be different.
|
||
|
|
||
|
The first hash value will take the current_hooks_hash value which is the
|
||
|
third base64 hash value listed above in this section (Technical Details) as
|
||
|
the first part of the hash. This means that if any value is changed in this
|
||
|
nested array a different cache id will be used. You can see the contents of
|
||
|
this nested array by going to
|
||
|
`admin/config/development/performance/advagg/info` under
|
||
|
"Hooks And Variables Used In Hash". An example of this being properly used is
|
||
|
if you enable the core locale module the language key will appear in the
|
||
|
array. This is needed because the `locale_css_alter` and `locale_js_alter`
|
||
|
functions both use the global $language variable in determining what css or
|
||
|
js files need to be altered. To add in your own context you can use
|
||
|
`hook_advagg_current_hooks_hash_array_alter` to do so. Be careful when doing
|
||
|
so as including something like the user id will make every user have a
|
||
|
different set of aggregate files.
|
||
|
|
||
|
**Hooks**
|
||
|
|
||
|
Modify file contents:
|
||
|
|
||
|
- `advagg_get_css_file_contents_alter`. Modify the data of each file before it
|
||
|
gets glued together into the bigger aggregate. Useful for minification.
|
||
|
- `advagg_get_js_file_contents_alter`. Modify the data of each file before it
|
||
|
gets glued together into the bigger aggregate. Useful for minification.
|
||
|
- `advagg_get_css_aggregate_contents_alter`. Modify the data of the complete
|
||
|
aggregate before it gets written to a file. Useful for minification.
|
||
|
- `advagg_get_js_aggregate_contents_alter`. Modify the data of the complete
|
||
|
aggregate before it gets written to a file.Useful for minification.
|
||
|
- `advagg_save_aggregate_alter`. Modify the data of the complete aggregate
|
||
|
allowing one create multiple files from one base file. Useful for gzip
|
||
|
compression. Also useful for mirroring data.
|
||
|
|
||
|
Modify file names and aggregate bundles:
|
||
|
|
||
|
- `advagg_current_hooks_hash_array_alter`. Add in your own settings and hooks
|
||
|
allowing one to modify the 3rd base64 hash in a filename.
|
||
|
- `advagg_build_aggregate_plans_alter`. Regroup files into different
|
||
|
aggregates.
|
||
|
- `advagg_css_groups_alter`. Allow other modules to modify `$css_groups` right
|
||
|
before it is processed.
|
||
|
- `advagg_js_groups_alter`. Allow other modules to modify `$js_groups` right
|
||
|
before it is processed.
|
||
|
|
||
|
Others:
|
||
|
|
||
|
- `advagg_hooks_implemented_alter`. Tell advagg about other hooks related to
|
||
|
advagg.
|
||
|
- `advagg_get_root_files_dir_alter`. Allow other modules to alter css and js
|
||
|
paths.
|
||
|
- `advagg_modify_css_pre_render_alter`. Allow other modules to modify $children
|
||
|
& $elements before they are rendered.
|
||
|
- `advagg_modify_js_pre_render_alter`. Allow other modules to modify $children
|
||
|
& $elements before they are rendered.
|
||
|
- `advagg_changed_files`. Let other modules know about the changed files.
|
||
|
- `advagg_removed_aggregates`. Let other modules know about removed aggregates.
|
||
|
- `advagg_scan_for_changes`. Let other modules see if files related to this
|
||
|
file has changed. Useful for detecting changes to referenced images in css.
|
||
|
- `advagg_get_info_on_files_alter`. Let other modules modify information about
|
||
|
the base CSS/JS files.
|
||
|
- `advagg_context_alter`. Allow other modules to swap important contextual
|
||
|
information on generation.
|
||
|
- `advagg_bundler_analysis`. If the bundler module is installed allow for other
|
||
|
modules to change the bundler analysis.
|