Avada Speed & Performance

20/08/2020

Avada is created with both speed and performance in mind. On its own, Avada is highly optimized and provides you with the ability to get good speed test scores on most tools like GTMetrix, Google PageSpeed Insights, Pingdom, and Web Page Speed Test. Of course, the result will depend heavily on the content you add. But Avada also offers a range of options throughout the theme to help you further tweak performance and load times. Let’s have a look at what’s on offer.

Performance Tab

Towards the bottom of the Avada Options, you will find the Performance tab. This tab has a range of options to help tweak load times, depending on your preferences. These are split into three categories, Performance, Dynamic CSS & JS, and Progressive Web App.

Performance

  • Enable Lazy Loading – Enable lazy loading for your website’s images to improve performance. What this option does is stop images loading until they enter the viewport. If you have a long page with lots of images, this would decrease the page’s initial load time considerably.

  • Font Face Rendering – Choose “Swap All” for faster rendering with possible flash of unstyled text (FOUT) or “Block” for clean rendering but longer wait time until first paint. “Swap Non-Icon Fonts” will use a mix of the first 2 methods (“swap” for text fonts and “block” for icon-fonts).

  • Emojis ScriptIf you don’t use emojis you can improve performance by removing WordPress’ emojis script.

  • Load Stylesheets In Footer – Set to ‘on’ to defer loading of the stylesheets to the footer of the page. This improves page load time by making the styles non-render-blocking. Depending on the connection speed, a flash of unstyled content (FOUC) might occur.

Dynamic CSS & JS

  • CSS Compiling method – Select “File” mode to compile the dynamic CSS to files (a separate file will be created for each of your pages & posts inside of the uploads/fusion-styles folder), “Database” mode to cache the CSS in your database, or select “Disabled” to disable.

  • Load Media-Queries Files Asynchronously – When enabled, the CSS media-queries will be enqueued separately and then loaded asynchronously, improving performance on mobile and desktop.

  • Enable CSS VariablesEnable this option to use CSS Variables (Custom Properties). Makes compilations faster and lighter, but is not compatible with older IE browsers.

  • Cache Server IP – For unique cases where you are using cloud flare and a cache server, ex: varnish cache. Enter your cache server IP to clear the theme options dynamic CSS cache. Consult with your server admin for help.

  • Enable JS Compiler – By default all the javascript files are combined. Disabling the JS compiler will load non-combined javascript files. This will have an impact on the performance of your site.

  • Reset Fusion Caches – Resets all Dynamic CSS & Dynamic JS, cleans-up the database and deletes the uploads/fusion-styles and uploads/fusion-scripts folders. When resetting the caches on the main site of a multisite installation, caches for all sub-sites will be reset. IMPORTANT NOTE: On large multisite installations with a low PHP timeout setting, bulk-resetting the caches may timeout.

Progressive Web App

  • Enable Progressive Web App – Enable this option if you want to enable the Progressive Web App feature and options on your website. This is primarily a caching app, under development at Google. For more information on this, please refer to this document.

  • Cache-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will use the cached assets. Use this for static assets that don’t change like images and fonts.

  • Network-First strategy file typesFile types added in this list will be cached in the browser. Subsequent page requests will first try to get a more recent version of these files from the network, and fallback to the cached files in case the network is unreachable. If your site’s content gets updated often we recommend you can use this for your content.

  • Stale-While-Revalidating strategy file types – Any file types added here will be served with a cache-first strategy, and after the page has been loaded the caches will be updated with more recent versions of the selected file types from the network. Use this for assets that may get updated but having their latest version is not critical.

  • App Splash Screen Logo – Logo displayed for your website at 512px x 512px when installing as an app. Logo image must be in PNG format.

  • App Display Mode – If the user installs your site as an app, select how the app will behave.
  • App Theme Color – Select a color that will be used for the header of your app, as well as the browser toolbar-color on mobile devices.

Theme Features

In the Avada Options, you will find the Theme Features under Advanced > Theme Features. This tab has a large range of options to enable or disable various Avada features, such as Mega Menus, YouTube and Vimeo API Scripts, Google Map Scripts and many more . If you are sure you won’t be using them, turning these features off will help improve load times, as the features will not be loaded.

View the Theme Features Options!

Avada Builder Elements

You can also disable any of the Avada Builder Elements you are not using. You can find these at Options > Builder Options > Avada Builder Elements, from the Avada Dashboard. Disabling unused Elements can lead to a small increase in performance, but use with caution. Disabling an element will remove it from all pages/posts, old and new. If it was on a previous page/post, it will render as regular element markup on the front end.

Avada Builder Elements

Site Optimization

Despite all the performance options we provide, when it comes to site optimization, Avada plays a much smaller part than you might imagine. Avada is optimized so that it’s fast on its own, and can be tweaked to be faster as shown above, but ultimately, user content will primarily dictate how fast your site will perform. Images play a huge factor in speed results, as well as hosting, extra plugins, content, and more.

Just as an example, if you have a site that’s 1100px wide and upload a 2000px image on a page, your page speed score will drop heavily. This is because sites like Google or GTMetrix will see a 1100px container that unnecessarily has an image in it that is almost twice its size.

There is a wealth of external tools you can use to analyze your site’s loading times, and to find the bottlenecks and non -optimized content that will affect the load speed of your pages. For more information on these tools, please see the following docs:

Some Important Resources