A

Stefano CappelliniSC

AI • Deep Learning • Machine Learning • Software Engineering

(WordPress) How to speed up you your Divi gallery if you are using only the first thumbnail

; In: ,

Yesterday I got a call from a friend asking for help with his Wordpress website: a web portal based on Divi theme that was running incredibly slow. After some time inspecting the website, I found the problem: the gallery module and the way he was using it.

Updates

  • Mon, 8 June 2020: Added a small dummy image to fix a bug with the Divi gallery zoom.

Intro

Let's assume you want to add a single image/thumbnail to your page, for example an image related to a project you made, and you want it to be clickable: if you click this image/thumbnail, a lightbox opens, showing all the photos related to that specific project - that is the gallery of that particular project.

This seems to be the perfect job for the Divi Gallery Module and, indeed, it is! You simply add one gallery module and you configure it in this way:

  • Under the Content tab:
    • Image count: 1, in order to show only one thumbnail
    • Show Pagination: No, we do not need it
  • Under the Design tab:
    • Layout: grid

Everything works perfectly fine but the website starts running slow. What's the problem?

The problem

The problem lays in the way the Divi Gallery Module works: whenever you add a Gallery Module, Divi creates (and thus your website will load) one thumbnail for each image of the gallery, even if you actually need to show only the first of them - as in this example. This means, for example, that if you have a gallery of 100 images, Divi creates and your website will uselessly load all the related 100 thumbnails.

Here is the perfect time for a disclaimer. Don't get me wrong: Divi Gallery Module works perfectly and this behaviour is fine if you are using the module "the right way", that is to show a gallery with its thumbnails and pagination. This problem arises when you do not need the thumbnails1. In addition, other, more elegant solutions might be possible, but this is the easiest workaround I found to quickly solve the problem.

Solution

Luckily enough, internally the Divi Module does not make use of those thumbnails: in order to make its work it only needs the enclosing links. Thus we can detect and delete the thumbnails we do not need (we will keep only the first thumbnail of our gallery, that is, the one we are actually showing).

Step 1

The first step is to create a Child Theme. This is an always valid rule: never never never changes the original theme because all the edits you make will be lost when you update it. If you do not know how to create a child theme, Divi got you covered: take a look at this page.

Step 2

Add this code to your functions.php (the one you have created in step 1):

add_filter('do_shortcode_tag', 'fast_gallery_tip', 105, 2);

function fast_gallery_tip($output, $tag){
    if('et_pb_gallery' === $tag && preg_match('/my_divi_fast_gallery/', $output) === 1){
        $pattern = '/<img[^>]*>/';
        $index = 0;

        return preg_replace_callback($pattern, function($matches) use (&$index) {
            return $index++ === 0 ? $matches[0] : sprintf('<img src="%s/square.jpg"\>', get_stylesheet_directory_uri());          
        }, $output);
    }
    return $output;
}

The code is available as a gist too: click here.

This code simply:

  • Gets called whenever a Divi gallery gets created
  • It then focuses only on the galleries we want to optimize (the one having the class my_divi_fast_gallery). This is important: we do not want to break all the other galleries working perfectly fine!
    • Obviously you can substitute this class name with the one you prefer. Keep in mind that this classname should not be something that can accidentally show up in your URLs, classes and so on.
  • On each of those galleries, it removes all the unused thumbnails, keeping only the first one - the one you are actually showing in your page
  • There is a little twist, however! You cannot simply delete the thumbnails you are not using. Instead, you should replace them with a simple dummy image (ideally, a small 1x1 jpeg image that will be cached). In the code snippet before, that's the square.jpg file! This is because Divi will need this thumbnail (even if not shown) to perform its computation during the zoom effect.

Step 3

To conclude, remember to add the class my_divi_fast_gallery (or the one you chose) to the all the galleries you want to optimize. You can add this class (even if you have already some custom classes) in your gallery setting menu, under the Advanced tab, in the CSS ID & Classes subsection.

In addition, remember to upload the dummy image file you've created in the previous point. You need to place it in your child theme root directory.

Congratulation, your website is running faster now!


  1. A similar problem (with a different solution) might arise even if you are using the module as a simple gallery. 

Comments

comments powered by Disqus