WordPress allowed me to get a better job & better projects in just a Year. I will give you tips, tricks and guide you into WordPress development so you can get more income. Sign up to my 7-day email course!
Divi theme is a great theme for people who aren’t tech-savvy. The Divi Gallery Module is a module where you can create galleries with a slideshow effect. If you have many images in one or more galleries on a page, that page will have a lot of images that load without being seen. In this tutorial, I’ll show you how to optimize the Divi Gallery Module with a few code snippets.
In a recent project, I had a page with a lot of Divi Galleries with the slider effect. That page, when fully loaded, had over 270MB in size and it would load in 4.5 minutes. That page also had videos and other resources which were not galleries, but after the code, I’ll show you here, that page (initial) size was reduced to 40MB and the time required to load to 30sec.
So, this code has reduced the page size by 85% and the load time by 88%. That is a significant performance improvement, don’t you think?:)
Be aware that this code will work only for WordPress 4.7 and above.
All the images are loaded with the default markup, having the
src attribute filled with the URL of the image. That’s fine. But when you have a lot of images, your visitors will have to wait some time for images to load. That could also hurt their data usage.
What if we put the image in a custom attribute and put a placeholder image (of few kb’s) to every image
The shortcode of the Divi Gallery is
[et_pb_gallery]. With the filter
do_shortcode_tag, which was introduced in WordPress 4.7, we can change the output of the gallery.
In the function
my_gallery_shortcode, we are checking if we are on the tag
et_pb_gallery. If we are on that tag, we will change the output of the shortcode.
We are also checking if that script was already enqueued so we don’t have to do it more than once.
To change the output, we are using the regex. The function that we will use to perform the regex is
In this function, we are placing the value of
src attribute as
src attribute is now set to a placeholder image. You could set your own placeholder image there.
Now that we have all the images set with placeholders, we need to set the first image of each gallery to the original source. You could do that also with some inView scripts to check if the visitor is able to see that image. But for the purpose of this tutorial, I’ll just show you how to set those images on page load.
We are iterating through each gallery with the class
.et_pb_gallery_items. Since each image is wrapped inside an element with the class
.et_pb_gallery_item, we need to check the first element with that class. After that, we are getting the image inside the element and then we are changing the value of the
src to the original value.
The first image is now fine. But, what when we click on the next image? What will happen then? Nothing. The image will still be set as a placeholder image.
There are two parameters passed to that trigger: direction & next slide element. We will need to use the second parameter.
We are then finding the attribute
data-original in the next slide. When we find that, we will know that we have found the image. When we know that, we can change the
src value to the original image.
Do you use Divi for building websites? Have you ever optimized some parts of Divi or something else?
If you want to up your WordPress development knowledge, I have a course, you might like. Building Themes, Plugins, optimizing them & selling is something you might want to know? Check it out: Become a WordPress Developer.
Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.
In less than 2 weeks, I have earned $1,800 by working on a custom solution with Easy Digital Downloads without any prior experience. Let me teach you how you can too with various custom solutions.Get the eBook