Increase your Drupal site PageSpeed score: Part 2 - AdvAgg
After completing part 1, and installing the Boost module we are left with a Google PageSpeed score of 93/100. A decent increase with minimal effort. To get to the next stage it will require a lot more work, and is only suggested for advanced users.
There are two pieces we are missing to get our PageSpeed score up, according to the Insights Tool
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Minify JavaScript
Google PageSpeed is telling us that we need to move our JS and CSS files from the header section of the site to the footer, so the web browser can load up all the HTML first and then execute the JavaScript and apply the styles from our CSS file. It's also saying our JavaScript could use some extra work to make it even smaller.
This is why we need the Drupal module: Advanced CSS/JS Aggregation
AdvAgg will allow us to apply some extra compression and aggregation, and also move the render-blocking files to the footer.
Advanced CSS/JS Aggregation
AdvAgg is a little more indepth and uses a few server-side applications to perform its tasks, so we need to get your server setup properly to handle these tasks. As I mentioned in part one, we are running a nginx server and this guide will only handle nginx configuration.
Here is what the server block looks like for our test Drupal site, the import sections are bolded:
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /var/www/html/drupal;
index index.php index.html index.htm;
gzip on;
gzip_http_version 1.0;
gzip_disable "msie6";
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
# This matters if you use drush prior to 5.x
# After 5.x backups are stored outside the Drupal install.
#location = /backup {
# deny all;
#}
# Very rarely should these ever be accessed outside of your lan
location ~* \.(txt|log)$ {
allow 192.168.0.0/16;
deny all;
}
location ~ \..*/.*\.php$ {
return 403;
}
# No no for private
location ~ ^/sites/.*/private/ {
return 403;
}
# Block access to "hidden" files and directories whose names begin with a
# period. This includes directories used by version control systems such
# as Subversion or Git to store control files.
location ~ (^|/)\. {
return 403;
}
location / {
# This is cool because no php is touched for static content
try_files $uri @rewrite;
}
location @rewrite {
# You have 2 options here
# For D7 and above:
# Clean URLs are handled in drupal_environment_initialize().
rewrite ^ /index.php;
# For Drupal 6 and bwlow:
# Some modules enforce no slash (/) at the end of the URL
# Else this rewrite block wouldn't be needed (GlobalRedirect)
#rewrite ^/(.*)$ /index.php?q=$1;
}
### advagg_css and advagg_js support
location ~* files/advagg_(?:css|js)/ {
access_log off;
expires max;
add_header ETag "";
add_header Cache-Control "max-age=2628000, no-transform, public";
try_files $uri $uri/ @rewrite;
}
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
#NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $request_filename;
fastcgi_intercept_errors on;
fastcgi_pass unix:/var/run/php5-fpm.sock;
}
# Fighting with Styles? This little gem is amazing.
# This is for D6
#location ~ ^/sites/.*/files/imagecache/ {
# This is for D7 and D8
location ~ ^/sites/.*/files/styles/ {
try_files $uri @rewrite;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires max;
log_not_found off;
}
}
Restart your nginx server with service nginx restart or sudo service nginx restart - If it fails, the configuration above may not be suitable for your setup (HINT: php5-fpm and php5-cgi are required and check where your php5-fpm.sock is installed)
If everything went to according to plan we can move forward with AdvAgg.
The first thing we are going to need to do is download and enable the module. AdvAgg comes with one module, and seven submodules.
advagg_js_compress, advagg_validator, advagg_js_cdn, advagg_mod, advagg_css_cdn, advagg_bundler, advagg_css_compress, advagg
We need to enable advagg, advagg_mod, advagg_js_compress, advagg_bundler and advagg_css_compress
We will also want to have HTTPRL installed to allow AdvAgg to do compression and aggregration on-the-fly.
After these modules are enabled, check your status report to make sure everything is okay. One common problem is your files directory not being properly writable so if that issue comes up, check the permissions.
Lets start with /admin/config/development/performance/advagg
- Check - Enable advanced aggregation
- Check - Use cores grouping logic
- Check - Use HTTPRL to generate aggregates.
- Choose - Aggressive ~ 10ms
Everything else can be left default, next move on to CSS Compression (/admin/config/development/performance/advagg/css-compress)
- Check - YUI Compression for both File and Inline Compression
Everything else can be left default, next move on to JS Compression (/admin/config/development/performance/advagg/js-compress)
- Check - JSSqueeze for both File and Inline Compression
- If you have the JSMin library installed and configured on your server, use that, it's faster
Everything else can be left default, next move on to Bundler (/admin/config/development/performance/advagg/bundler)
- Change the CSS Bundler to 1 (to only create a single CSS file)
Everything else can be left default, next move on to Modifications (/admin/config/development/performance/advagg/mod)
- Check - Enable preprocess on all JS
- Check - Move JavaScript added by drupal_add_html_head() into drupal_add_js()
- Check - Move all external scripts to the top of the execution order
- Check - Move all inline scripts to the bottom of the execution order
- Check - Move all browser conditional JavaScript to the bottom of the grou
- Check - Move JS to the footer (All)
- Check - Deferred JavaScript Execution: Add The defer Tag To All Script Tags (may break site, test first)
- Check - Enable preprocess on all CSS
- Check - Move CSS added by drupal_add_html_head() into drupal_add_css()
- Check - Move all external CSS to the top of the execution order
- Check - Move all inline CSS to the bottom of the execution order
- Check - Move all browser conditional CSS to the bottom of the group
- INLINE CSS/JS ON SPECIFIC PAGES
- <front>
Leave everything else as default, and save.
After this your site should be able to achieve a 100/100 PageSpeed score for desktop, and a 100/100 pagespeed score for mobile. Good luck.