UPDATE (14.03.2017): Updated the post to add the solution for the portfolio grid view.

UPDATE (13.03.2017): Updated the post to reflect the current version of Avada (5.1.1).

UPDATE (11.02.2017): Updated the post to reflect the current version of Avada (5.0.6). Thanks to Sean for the hint!

Avada is a widely used commercial multipurpose theme for WordPress developed by ThemeFusion. You may like or dislike these big multipurpose themes with all their options and of course often a lot of stuff you actually don’t need, but the fact stays that for many people these themes are very convenient and easy to use and at least they are often still maintained compared to other small themes that receive no love after the initial release anymore. For this very same reason a few of my customers are also using Avada for example. That was all fine with me until I discovered a „little“ problem. The PageSpeed score was way down and the page load very slow. Of course all sites were generally optimized (images, caching plugin and so on). So what happened?

The problem

Googles PageSpeed and GTmetrix quickly revealed the problem: A lot of huge images that got scaled down. This is actually weird, because usually WordPress takes care of the images by creating different sizes of the same image and only delivering the appropriate size, as long as the theme plays by the WordPress Codex. Now Avada handles some things a bit different: If you are using the grid view to display your blog posts on your start page or for example a recent post element, Avada spits out the featured image of all the blog posts in full size and scales them down afterwards. Meaning your visitor will easily be downloading more than 5 MB of images just to see a small version on the overview. The screenshot below illustrates this with the start page on the left and a single blog post on the right.

avada-problem

Of course you want the nice, large full size image on the single blog post itself, but for the overview a small version will do just fine. So what does the (normally very good) Avada support has to say about this?

„At the time, the only solution would be to improve your image optimization to reduce the page’s size. Another possibility to optimize this, is to add a smaller first image as the post’s feature image. This will be used as the grid featured image. Then add the full size image as the second featured image. You can disable showing the first featured image in the post options below the content editor. If you don’t want a slider on grid layout of these images, go to Theme Options > Slideshows; and disable the auto play feature.“

Well, image optimization is not really a solution, because you don’t want to mess up your nice looking large image on the blog post page itself, so reducing the image size is not an option. The images actually are already optimized – just for the single post view and not for the grid view. The second way would generally work, but editing all your blog posts and always creating two versions of your image is just too much work for something that should be solved somewhere else. We just want Avada to use a smaller image version for the grid view and the recent posts element. That shouldn’t be that hard and – to spoil you up front – it actually isn’t.

The solution for the grid view

First of all you should always be working with a child theme. Otherwise all of the changes you will perform next will be lost on a future update of the Avada theme. So if you are not already using a child theme, you may want to fix that first. You can read all about the use of child themes on wordpress.org. Of course you still can make the following changes directly in the Avada theme directory, I just do not recommend it. I also assume that you know how to use a FTP program to access the files on your server and know how to simply edit a .php file with a text editor. If you are not sure how to do this, you might want to ask a friend who does.

You will need to edit this file: new-slideshow.php. It can be found in your Avada theme directory that should be somewhere like /wp-content/themes/Avada. When you are using a child theme, as I recommend, you will now need to copy this file in your child theme directory, prior to editing it there. In this file you need to look for the following lines of code.

In the new-slideshow.php:

$size = ( 'Grid' == $layout || 'Timeline' == $layout ) ? 'full' : $size;

As we can see this is were Avada is told to send out the full size version of our image for the grid view. So we just need to change the red highlighted word to a size we want. We can basically use all sizes that are provided by WordPress or Avada. For example you could change it to blog-medium to use the by Avada set size 320px x 202px. If you want to have more control, you can also set it to the default WordPress size medium. Now you can change the size in the WordPress admin panel under Settings -> Media. Of course you will need to let WordPress recreate all image versions if you change the size. There are several plugins out there that will do this for you, for example Simple Image Sizes. I cannot tell you, which version will work best in each case. You will need to just test it with Googles PageSpeed and GTmetrix. I recommend starting with blog-medium and if it still isn’t optimal to try using a custom size.

The solution for the recent posts element

Unfortunately the recent posts element is generated by the mandatory fusion builder plugin of Avada. This means we will really be forced to make this change after each update of the plugin over and over again. You need to edit the fusion-recent-posts.php that can be found in the plugin directory: /wp-content/plugins/fusion-builder/shortcodes

In the fusion-recent-posts.php look for these lines of code:

if ( 'default' == $layout ) {
    $image_size = 'recent-posts';
}

You can probably already guess what we will need to do now. You have the same option as above. It may also make sense to use a different size here, if the recent posts images are smaller or bigger as the grid view images. Just test out again, what works best for you.

The solution for the portfolio grid view

If your a using the portfolio grid view and are NOT using the „fixed“ setting, you will have the same problem. (Note: „fixed“ is the default at the moment. So this only matters, if you are using the „auto“ setting.)

Therefore you will need to edit this file: fusion-portfolio.php. It can be be found in the other mandatory plugin folder, the „Fusion Core“: /wp-content/plugins/fusion-core/shortcodes.

In the fusion-portfolio.php look for these lines of code:

// Set the image size according to picture size param and layout.
$this->image_size = 'full';

Same as before: Change full to whatever is useful in your case.

Conclusion

Well, of course it would be nice, if the Avada developers would fix this problem in a more user friendly way in the future. If nothing else, another option on the element settings tab to change the base image size manually (just select one from the already created ones, no need to generate new thumbnails) would be a great improvement already and since there are so many options anyway that shouldn’t be a big deal. We will see – even though I found threads dating back to October 2014 already describing this problem with no real solution. Till then I’ll hope this workaround will help you out to get your PageSpeed score to normal levels. In my cases the page size went from over 5 MB to less than 1 MB again and the PageSpeed score jumpend from 27 to 93 (of course the images are generally optimized and a caching plugin is being used). The time your website needs to load initially is a very crucial factor and you still have to factor in slow mobile connections these days. In general you should never let your visitors wait longer than two seconds. Otherwise many of them will already have jumped to another thing. So my general rule of sum is to stay below 1 MB in general, if possible.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.