October 9, 2015

Optimizing WordPress Pictures Beaverbuilder Cache

Optimized Picture

A lot of WordPress authors and administrators are using Google Page Speed Insights and/or GTMetrix to test if their WordPress pages and blogs are efficient enough. Generally speaking those tools are good in giving you an assumption if everything is alright or not, but please don’t take them too serious. The goal should not be to reach 99 percent of all possible optimizations. Those tools are giving you an indication and nothing more. Some page which has only 5 pictures, but those could be further compressed by 70 percent, will most likely get a similar ranking than a bigger website with 500 pictures, and every picture still having a potential of further compression by 1 percent.

WP Beaverbuilder is a fantastic theme and it’s doing a great job in optimizing the whole website and you will usually get some very good results in all speedtests. For this page for instance, I’m getting a green over 80 percent on Google and A+ on GTMetrix, but if I’m using the “Post Carousel”-Feature Google is dropping to a bad 27 percent and GTMetrix is giving me a thumbs down with a very bad E-grade. However, the page still “feels” very fast, hence I decided to have a deeper look at the reports:

The key finding is a “Cache”-folder brim BeaverBuilder in my upload folder.

/wp-content/uploads/bb-plugin/cache/

You can delete all files in this folder without any pain or effect on your page. But once a visitor is calling a page with your “Post Carousel”, this folder fills up again. Hence what the team around Beaverbuilder is doing, is copying/caching the original picture in this cache and using HTML / CSS to downsize the pictures too look good in the Post Carousel. The size in the Post Carousel has roughly a width of “215 px” only, and consequently the speed tests are complaining that the files are far too big.

So you have basically 2 options: either don’t use the Post Carousel, if it’s important to you to have “green” results in the all speed tests, or do something about it!

Optimizing WordPress Pictures Beaverbuilder Cache

In the following I will show you how to easily optimize this cache on DEBIAN or Ubuntu. This will work as well on other Linux distributions, but you most likely will have to search a bit how to get the tool installed on your distribution.

First of all, we have to install ImageMagick:

apt-get update
apt-get upgrade
apt-get install imagemagick

Now move into the cache folder, please note that it is located outside of your plugin’s directory!

cd whatsoeverrootpath/wp-content/uploads/bb-plugin/cache/

With ImageMagick now installed you can optimize your pictures in multiple ways. Please check the man-page for all possibilities. The easiest way is to shrink them to a certain size or just simple by a certain percentage. I’m doing the latter with a 50 percent optimization for those cached pictures.

mogrify -resize 320x240 *.jpg

or

mogrify -resize 50% *.jpg

I suggest you are playing around a bit, on what fits best your homepage. But once you have shrunk those pictures in the cache folder, you will again get very good results in the page speed tests. Please don’t forget that you don’t do any harm, by deleting those files. That’s why I’m suggesting that once in a while you are deleting this cache with:

rm -rf *.jpg

and after that you are calling your post carousel and you have to wait until the cache is filled again, and you are running again the above optimizations.

Jeannot Muller

Entrepreneur, developer, author.

Click Here to Leave a Comment Below

Leave a Reply: