Avada Optimization Guide

Less is more. The more elements/content the page contains, the higher the node count, and therefore the more that needs to be rendered. This is the excessive DOM count that is referenced in tests. Do you really need all that content on the homepage or can some be moved to subpages?

Avoid an above the fold slider, unless it’s important to the design. If you want a large hero image, it’s better to use a static image. When using a slider, the slide is JS driven and needs to wait for the rest of the document to be ready before fully rendering. This will decrease page load scores. If you want the slider on desktop but not mobile, you can use conditional rendering to display the slider only on desktop. Then add separate content for mobile.

Avoid very large images (large in dimensions and large in file size). Obviously images are important to a website, but ensure the choices make sense and that the images are optimized. See our Image Size Guide document for detailed information on this.

Set your largest above the fold image to skip lazy loading. This option is available for container background images and image elements and only available if lazy loading in the globals is set to Avada (recommended). By setting to skip the lazy load the image will be faster to load – important for LCP measurements in Google core web vitals. If you generate critical CSS this will also be used as a flag to preload the image – further improving load time.

Clever use of background colors, gradients and lightweight SVGs can often make a big impact. They give the visual impact without the loading time.

Avoid animations above the fold, for the same reason as using a slider. Using them further down the page is fine, but you want the viewport (the initially viewable area) to be quick and stable (no movement) when loading.

If you have a choice between a column background image or an image element (to accomplish the same thing) – use an image element. Responsive capability is superior and loading will be quicker.

Use Layout Sections for each area. When Layout Sections are used for each aspect of the site (header, page title bar, footer, content) Avada has more knowledge about what needs to render, and therefore assets can be made more efficient. The builder elements are also maintained and updated, legacy features are not. This is especially important for the header in order to avoid CLS.

Avoid embeds unless necessary. For example, embedding a third party form or multiple twitter feeds on your homepage. Not only do you have to wait for them to load, they often bring with them extra assets which might not even be required. For forms for example, it’s best to use Avada Forms where possible.

Use the Facade global option for the YouTube and Vimeo Elements. This will cause the video to only load when clicked, thereby reducing overall page load content.

Be selective about any extra plugins. More plugins will mean more assets being loaded and more memory usage. If there is the option of using a feature in Avada instead of a plugin, then we definitely recommend that. Avada assets are combined together to be more efficient than a plugin.

Create your own custom icon set and disable Font Awesome. If you only plan to use a select number of icons, then try out the Avada icons feature and create your own lightweight icon set. See the How To Replace Font Awesome Icons With A Custom Icon Set doc, for more information on this process. Alternatively, if you do still want to use Font Awesome, disable the subsets you aren’t using in Global Options – Theme Features.

If you are adding custom CSS in a child theme, chances are you would actually be better to add it to the global options custom CSS. This will vary, but usually the child theme CSS is loaded separately as part of another request, whereas the global options custom CSS is compiled into the main file with the rest.

Generate Critical CSS for above the fold content. This option can be enabled in the performance Wizard, or in the Global Options > Performance tab. You can then generate critical CSS for specific pages to assist the above the fold content loading faster.

Avoid parallax on mobile. If you are using parallax on containers, set to off for mobile. It should not have a big impact on the design of the page and the parallax will make the page less responsive on mobile. Especially important for the time to interactive measurement in Google core web vitals.

Avoid automatic popups. Popups to get newsletter subscriptions may look nice, but will be treated negatively by Google page speed insights as having a negative impact on user experience.

Lazy Loading – Avada. Do not use lazy loading from a plugin and Avada. This will almost certainly break image loading on the front-end and will not be beneficial. Avada lazy loading ensures carousels and dynamic content work properly, it is also tied together with critical CSS. So we definitely recommend sticking with Avada lazy loading.

Font Face Rendering – Swap All

Preload Key Fonts – None (or if your LCP is a heading, then the font weight used for the heading)

Emojis Script – Disable, unless you need it (comment area)

jQuery Migrate Script – Disable, unless you need it for a plugin. Even still we would recommend disabling and finding a more update option instead of the plugin.

Load jQuery In Footer – On. This will vary depending on content and plugins. Best approach is to turn it on and then check your website. If you notice issues then disable it, if you don’t then leave it on and the page load should be faster.

Load Stylesheets In Footer – Off. Having it on will result in page shift which will contribute to a high CLS score. If you want to defer the styles the better option is to use the critical CSS option. When the page has critical CSS it will automatically move the rest of the styles to the footer.

Enable Gzip Compression – Off. This one depends on your host, but having some form of compression is important. Most modern hosts will automatically use compression – in which case you can leave off. If you are unsure you can test by turning on and then testing your website performance.

Enable Video Facade – On. If you are using a lot of Vimeo or YouTube videos then turn on. If you are not using videos then leave it off.

CSS Compiling Method – File. Only use database if you must, only use disabled if you are actively working on the site and debugging.

Load Media-Queries Files Asynchronously – Off. In most situations the load times will be worse when enabled.

Enable CSS Variables – Either, but On will be fine as default.

Enable Critical CSS – Set to on. On your page content ensure you have set your page above the fold image to skip lazy load. Then visit the critical CSS page and generate critical CSS for your page. This will add critical CSS to the head of the page and move the rest of the styles to the footer. It will also preload the image set to skip lazy load. Both of these should contribute to an improvement in the LCP metric in Google core web vitals, but it depends on hosting and the content.

Enable JS Compiler – On.

Enable Progressive Web App – Either. Its unlikely to improve first page load, therefore speed tests wont pick up on why its good. However, for page loads after the first the PWA should improve speed a lot. So it can be nice to enable

Turn off Elastic Slider unless you need it (unlikely)

Turn off post types you aren’t using (slider, portfolio, FAQ).

Turn off the Font Awesome subsets you don’t need, and consider switching to a custom icon set only.

Font Awesome v4 Compatibility – Off. If you do have version 4 icons, edit the pages and select a new icon (will be version 5 by default)

Load Frontend Block Styles – Off (unless needed)

Legacy Button Presets – Off. These are the color presets – green, blue etc. A fairly substantial amount of CSS can be saved by having this disabled and setting the desired colors to the button instead.

API scripts (YouTube, Google) Turn these off unless you are using them.

Disable elements you don’t use in Avada – Builder Options. This will save some CSS from being loaded and speed up PHP page building. JS is already conditional based on element usage on the page.

Disable any plugins you are not using. Plugins recommended by Avada are only for a specific purpose – they are not mandatory. If you are not using any sliders ensure you have all slider plugins disabled. Same goes for any other plugins you no longer need.

Get good quality hosting that is suited to WordPress. This will improve server response time. We use WPEngine.

Ensure you are up to date with PHP. If your host isn’t providing recent versions of PHP you may way to consider switching elsewhere. Newer PHP versions are more performant and will improve server response.

Cache. There are so many options here and different setups. You can have a cache plugin like WP Rocket, super cache etc. Also there is cache offered by hosts. There is loads of information out there on the subject. Just remember, the more cache the more you need to clear and check at update time. Also, always avoid using two options for the same thing (cache, minification, lazy load etc).

Minification. You can use a plugin to improve minification. However beware, you will not always get positive results and like caching you can end up causing problems. In most cases, you are better served leaving off and improving the content.

Image CDN. There are various image optimization and serving platforms. It’s best to try these out and find a combination which works for you. Popular plugin options are Smush plugin and EWWW image optimization. For CDN, we recommend CloudFlare. Finally, also bear in mind some hosts provide this as standard. For example Siteground offers WebP image generation in their optimization plugin.

Experimentation. Especially with performance plugins, its good to give them a test and find the winning formula for your setup. Just remember to clear caches between testing.

Load the page yourself before testing for load time. This is important if you are changing global options and then testing straight away to find the best score. For example, say you enable a cache plugin and then visit GTmetrix to test the URL straight away. The page will not be cached by the plugin yet and therefore you won’t actually be seeing a representative result. Best to visit the page yourself first (just a simple page load in your browse) then test. Additionally on first page load the CSS and JS files are compiled, which means more processing time than subsequent page loads.

Google Page Speed. Faster to do than using the website, you can use the Lighthouse feature in Chrome developer tools. https://developers.google.com/web/tools/lighthouse. Just ensure you are performing this in an incognito window where you are not logged in. Otherwise the scores will be worse, due to admin asset loading.

Image Size Guide

Is Your Site Running Slow?

How To Speed Up Your Site Using Plugins

Comprehensive Guide To WordPress Image Optimization