We are on our journey to master the Drupal performance, after having our previous Part 1: Caching published a couple of weeks ago, we've been lucky enough to get into Issue 386 of TheWeeklyDrop newsletter, Planet Drupal, and got much love and good feedback on Twitter.
If you haven't already read the first part of the series, the ultimate guide for faster Drupal: Part 1 Caching, please feel free to read that article too.
Note: You don't necessarily have to do all of these, some items listed here are replaceable with each other as well, so proceed with caution!
Faster Drupal - Part 2: Aggregation and CDN
- The one and the only holy grail: Advanced CSS/JS Aggregation
On every Drupal optimization post you’d read you have to setup and configure AdvAgg module, but you gotta do what you gotta do!
AdvAgg features and core benefits are listed on the module page completely, so go ahead and read them all, configure it the way that works best for you and move on
Advanced CSS/JS Aggregation Drupal module
Note: If you have Mod Pagespeed you might not need AdvAgg module, make sure that you don't overlap your own workBut that’s not all, if you are on Drupal 7, you should consider checking Speedy module as well, in some areas, this might work a bit better so make sure to check it out as well
Drupal MinifyJS module
- CDNize the whole project, as much as you can! You may use CDN module too
- Consider if you can make your own scripts defer/async (a new challenge when it comes to Drupal js aggregation)
Okay, this round was much easier thanks to AdvAgg module for taking care of half of the things we need to do for us! Note that on the frontend side you can Uglify, Minify and make sure everything that you code, will become compressed, whether it’s CSS, JS or even images or SVG files! Now let's get to it, Image optimization.
- Drupal 8: Use the Responsive Image module wherever possible and create the appropriate styles. It uses the <picture> tag which is what we really want
- One might say we have one too many image optimization modules in Drupal, which is a good thing! For that we tested some, experienced with some of them and here’s what we suggest: Use blazy and lazyload_images (Drupal 8 that uses IntersectionObserver instead of scrolling events), Also consider: lazyloader and image_lazy_loader when using the picture module for responsive images in Drupal 7. There is also a lazy loading option that works well
- Image optimization: for main images/icons used in the design (Yes you can optimize SVG files as well), also the best tool for that is not in Drupal, try ImageOptim desktop app, Also there’s an API-based service available with a Drupal 7 module, take a look here, might worth setting/selling this up to clientsAlso in the same context, we can use ReSmush.it which is free (But should donate some beer to them)
Drupal 7 Module, Drupal 8 Module
- Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. There's a really good module that help you serve WebP, it's called, you guessed it; WebP.
- Serve WebP images with your web server with the MOD PageSpeed by Google for Apache and Nginx.
Or conditionally serving WebP images with Nginx.
Bonus tip: Even favicons should be optimized. Sometimes people ignore the weight of a favicon file. You shouldn’t!
For the next week, we will be covering subjects regarding Drupal database/web server tweaks & improvements, stay tuned.