Drupal 8 module of the week: ImageOptimize
laura
02.02.2018

Sometimes, we have clients that come to us with an already built website, and we need to make changes, thus making them perform better. This happened a couple of weeks ago. We had a project that leads us to a great module, and as sharing is caring, here we go.

The background

This Drupal 8 website came to us for a couple of changes, some of them regarding SEO optimization. After a thorough investigation, we managed to see most of the problems, most of them regarded keyword optimization, problems with meta-information, and heading.

We’ve also included and submitted a sitemap to help robots index content quickly. Then, we’ve dealt with a great number of broken links and crawling errors, as well as some canonicalization problems. Everything was done by the book. The real problem appeared when we’ve inspected the speed of the website. With a loading speed around 12s, the website was seen as a snail by the search engine, causing a rise in bounce rates.

Huge non-optimized images on the main page

The server was not the problem, so we had to dig deeper and see what was causing the problem. The CSS was relatively clean, so what could’ve caused such a loading speed. With 6 sliders on the homepage, videos, gifs, and several high-resolution images, the homepage was a mammoth. Should we mention that everything was in high-resolution?

In the words of one of our colleagues, “we should be grateful that the loading speed is so small”.

Drupal 8 Image Optimize module

As manual optimization was not a solution, we moved to a more clever Drupal 8 solution.
That’s when Image Optimize came into the picture. Available for Drupal 8 and Drupal 7, this module is a life-savior when it comes to image optimization.

Image Optimize or ImageAPI Optimize enables the optimization of an image when that image is saved, thus resulting in a better loading speed. It is easy to install and may reduce up to 30KB. Tens of developers are backing this module, so you may want to give it a try.

Always remember to check the Image Optimize pipelines configuration (Configuration > Media > Image Optimize pipeline) and to add a new optimization pipeline.

Then, to make it work, always remember to flush the cache. To apply the compression to all the existing images, you may want to flush the image cache with the drush image-flush --all command.

Again, this module works fine for smaller projects. As the project was a bit more complex, we’ve also proceeded to the use of a gzip compression method for better results.

Also, as part of the project, our UX designer advised removing some of the sliders from the homepage. Another variant would’ve been to use a Drupal 8 render pipeline, but after several discussions, we have decided not to use it this time.

Any thoughts on the ImageOptimize module? Use the comment section below!

This is relevant for …

Post a comment