Solving the Avada PageSpeed Problem

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.

28 Kommentare
  1. Sean Knowles
    Sean Knowles says:

    I seem to be having a nightmare here. The first 2 steps work as described. The third step with the fusion-recent-posts.php I have searched using dreamweaver and notepad. I cannot find that code block anywhere? I must be doing something wrong!!

    Antworten
    • Jan-Peter Lambeck
      Jan-Peter Lambeck says:

      Ok, so you are sure that you got the correct file? If you are using Avada 5.0.6 it should be /wp-content/plugins/fusion-builder/shortcodes/fusion-recent-posts.php. In that file you should take a look at line 204. A search for 'default' == $layout should take you there as well.

      Antworten
  2. Alex
    Alex says:

    Hi , I also did website with wordpress and avada, i hava a question about the loading speed.

    it is the main.min.js, I found it is very large, and before it works, the portfolio will not show and the navigation will also not work with sencondary dropdown menu.

    so i wonder, if we can extract the important code outof the main.min.js file, to save loading time.

    Antworten
    • Jan-Peter Lambeck
      Jan-Peter Lambeck says:

      Hi Alex,

      I haven’t tried it and would also consider it too much work, since you will have to do it all over again after each update of Avada. You still get into the 90s of all PageSpeed-Tools even with it, so I don’t think it is worth it.

      Cheers
      JP

      Antworten
  3. Ricardo
    Ricardo says:

    Hi again Jan-Peter,

    The solution for the portfolio grid view not work for me. I have changed the line in fusion-portfolio.php:
    $this->image_size = ‘full’;
    for
    $this->image_size = ‘medium’;

    and I see in Chrome inspector this line:

    Avada loads medium image!! but in the last line loads full image.

    In PageSpeed Insights: Items that you should correct: Optimizing these images:
    If compressed http://domain.ltd/…example.jpg it would save 90.4 KB (68% reduction).

    Why Avada is still loading the full image??

    Very thanks for our work and blog and sorry for my english, I’m spanish ;)

    Antworten
  4. Ricardo
    Ricardo says:

    Well, one more time ;) :

    and I see in Chrome inspector this line:
    img width=”211″ height=”300″ src=”http://domain.ltd/wp-content/uploads/example-211×300.jpg” class=”attachment-medium size-medium wp-post-image” alt=”Example” srcset=”http://domain.ltd/wp-content/uploads/example-200×284.jpg 200w, http://domain.ltd/wp-content/uploads/example-211×300.jpg 211w, http:/domain.ltd/wp-content/uploads/example.jpg 317w” sizes=”(max-width: 211px) 100vw, 211px”

    Antworten
  5. matuh
    matuh says:

    How about the image carousel? I have three image carousels on my page with 11 images all together and the site will load all of them in full sizes. Is there a way to load only the small size images?

    Antworten
    • Jan-Peter Lambeck
      Jan-Peter Lambeck says:

      Hi matuh,

      I have not tested it and currently do not have the time to do so, but a quick look revealed the file fusion-image-carousel.php in the same /wp-content/plugins/fusion-builder/shortcodes folder. In there you’ll find the same pattern. Look for $image_size = ‘full’; around line 226. Changing full to blog-medium or something else might already do the trick.

      Cheers,
      JP

      Antworten
  6. Adam
    Adam says:

    Hi! Awesome article! I could optimize many images on the main page due to your tips and it works fine, however I don’t know how I could optimize images in Post Slider. Would you please be so kind as to give me any tips how to do it? Where should I change the settings?

    Thank you very much! I wish you happy Easter!

    Adam

    Antworten
    • Jan-Peter Lambeck
      Jan-Peter Lambeck says:

      Hi Adam,
      sorry for the late response. I haven’t had time to look into this. You probably need to examine the fusion-post-slider.php in the /wp-content/plugins/fusion-builder/shortcodes. Can’t tell you much more right now – would have to take a closer look and play around with it.
      Cheers
      JP

      Antworten
  7. matuh
    matuh says:

    Image frame module has the same problem. I can’t find the code in fusion-imageframe.php Any ideas what and where needs to be changed?

    Antworten
    • Jan-Peter Lambeck
      Jan-Peter Lambeck says:

      Hi matuh,
      sorry for the late response. Unfortunatly it is not as easy with the image frame module. I haven’t had much time to look into this. So no direct solution at the moment. Sorry. :(
      Cheers
      JP

      Antworten
  8. Chris
    Chris says:

    Very interesting.

    This is also the case for Avada Carousel Element, the thumbnails in the carousel are full size images, is there any way to make Avada Carousel use proper scaled images for these thumbnails?

    Antworten
    • Chris
      Chris says:

      I edited the fusion-image-carousel.php

      $image_size = ‘portfolio-two’;

      $image_size = ‘blog-medium’;

      Changed both the above to ‘thumbnail’ which changes the image size on the page BUT GTMetrix still reported that those image are being scaled with CSS/HTML

      Antworten

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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