On the right hand side of the Critical CSS page, you can select which content you want to generate the Critical CSS for. Options are Homepage, All Pages, Specific Pages, Global Single Post, and Global Single Portfolio. Make your choice, and then click on Generate Critical CSS.

Depending on your choice, and the number of pages or posts etc. you have on your website, this CSS generation may take some time. You will see a dialog as can be seen below, while the CSS is being generated. Do not close the browser during this process, or it will be interrupted.

Once the process has completed, you will see the screen looks something like this, with the pages listed for which Critical CSS has been generated.

When you mouse over the generated CSS, you can see some links underneath each set to help you manage the Critical CSS. You can delete the set entirely, or you can clear or regenerate both the Mobile CSS or the Desktop CSS. There is also a Regenerate button at the far right, which regenerates both.

When critical CSS is generated it also checks for images above the fold which are set to skip lazy load. If any are found, it will save those along with the critical CSS and preload them to speed up load time.

After a major update of Avada, the Critical CSS will be temporarily disabled. This happens automatically, as after Avada has been updated, the old CSS can cause artifacts on your pages. The best way to restore the critical CSS is to regenerate all critical CSS (using bulk actions) and then enable it.

Should the Critical CSS be refreshed after an Avada update?

Yes, it should be regenerated. In bigger updates, a lot of CSS might change, but even in smaller ones, some things can change. As can be seen above, after major updates of Avada, Critical CSS is disabled temporarily for this reason, and users will get a dashboard notice about that, so that they can re-enable and regenerate it.

Should the Avada cache be cleared after generating Critical CSS?

No, it’s not necessary. If a third-party cache plugin is in use, it makes sense to do so. Critical CSS does add a specific style tag to the head tag with the above-the-fold CSS. And moves the rest of the compiled styles to the footer. So, it could be affected by cache plugins.

See the How To Use The Performance Wizard doc for full details of that process, but for our purposes, we just want to look at Step 3 of the Wizard. Here you can use the Find Recommendations button, at the top of the page, to scan your site for all the icons it uses. As you can see in the screenshot below, you will then see a list of all icons used and where they are used.

From Avada > Icons, you can then create a new Custom Icon Set to replace the icons you are using. To start, give the Custom Icon Set a name and click on Create A New Icon Set (or just hit Enter). This takes you to the Edit Icon Set page. Now we have created a Custom Icon Set, we have to populate it. To do this, click on the Icomoon link to open Icomoon in a new tab, where you can generate and download a custom icon set in the form of a zip file.

There are several methods to create a Custom Icon Set In Icomoon. You can load the Font Awesome Icon set and select your icons from there, either manually, or by searching.

But in our circumstances, we are replacing a specific set of used icons with a custom set of the same icons. Please see the How To Upload And Use Custom Icons In Avada doc for more general information on creating Icon sets in Icomoon, but for this task, perhaps the easiest way to recreate the specific icon set is to download them directly from the Performance Wizard and upload them to Icomoon.

To do this, the first step is to download the icons from the Performance Wizard. On the Icons page of the Performance Wizard, you will see the Full List of icons. As you can see from the screenshot below, you can click on this icons to download the svg file.

Once you have downloaded all the icons you need to create your set, you can create a new Empty Set in Icomoon for your custom icons to be uploaded into. This is found from the top menu, as seen below.

Then it is simply a matter of dragging and dropping the downloaded icons into your empty set in Icomoon.

Once you have selected all the icons for your custom set, click the Generate Font button at the bottom of the screen, as seen in the screenshot below.

Before continuing on to click Download, one important thing to note is that every icon pack you upload must have a unique Font Name and CSS Class Prefix before importing into Avada. You can change the Icomoon defaults in the Preferences (via the link next to the Download button, or from the top toolbar) before downloading your custom icon set, as seen below. Once you have done this, click Download.

If you don’t want to use the above method, the alternative is to add the FontAwesome Icon Set into Icomoom from the Icomoon Library, as seen below, and then either manually select, or search for the icons you need for your custom icon set.

Searching in Icomoon however, can give many choices, so you need to know which specific icon you used in your website to know which icon to select. This is why downloading the icons from the Performance Wizard is an easier method.

Whether you need to search, or can just recognize the icons you have used visually, you just need to go through and select the icons you need for your custom set. Once you have selected all the icons you need, you can go to the Generate Font button, as previously.

Once you have generated and downloaded your custom font set, you now need to upload it to your website.

Back on the Edit Icon Set page, you will find a simple upload interface to upload your custom icon set. (There is also a shortcut to this page in any element that has the Icon Picker. Here you will find a Plus button in the top right corner of the Icon Picker, which takes you straight to the Custom Icon page.)

To upload a Custom Icon Set, simply give the Set a name, and then click on the Select File button. Navigate to your icon set (as a zip file) and select it.

Then just click Publish in the right hand side. This will load the Custom Icon set. If you need to update the set later on, there is an Update Custom Icon Set button you can use to reupload the set, as seen below. The icons will now be available through the Icon Picker, in their own tab.

OK, that’s it. You can now return to the Global Options (Advanced > Features) and disable the Font Awesome Icon subsets. As you have a Custom Icon Set, these are now not needed.

To use your new Custom icon Set, head to any element that uses an icon, including the Icon Element. There, you will see any custom icon sets at the top of the icon picker, and you can now just choose the set and select icons from that.

This screen is just where you begin the Performance Wizard. At the top of the page, there is a Run PageSpeed Insights buton, which you can use to do a before and after comparison of your page loading times.

There is a reminder that the optimization process should only be run once the website has been completed, and there is a link to the Performance related documentation, and a Let’s Start button. Click that to begin the Performance Wizard.

In this step, you can disable any features you aren’t using, thereby reducing the amount of code loaded. Please be cautious, as disabling a feature you are using will result in broken behaviour until it is enabled again.

As you can see in the screenshot below, the Wizard loads with the current Features as set in the Global Options. At the top of the page, there is a Find Recommendations button, which when clicked will scan your website and offer you recommendations about the various features.

Once, the scan is complete, you will see the Wizard’s recommendations. The green ones mean that the current option is appropriate, the red ones are options which the Wizard recommends be changed, and the blue ones are ones that can’t be automated, and require you to consider the options yourself. The Apply All button, found next to the Find Recommendations button at the top, will apply all the red recommendations. But best practice here is to take your time to go through each of these features and make your changes.

Once you have made your choices, click the Save Changes button at the bottom, before clicking Next Step.

In this step, there are two options relating to Icons. You can choose which Font Awesome icon subsets you want to load, and you can set Font Awesome v4 Compatibility.

If you click the Find Recommendations button, the Wizard scans your website and offers a range of infomation pertaining to the icons used on the site, to help you make your choices. It offers a full list of all the icons used on the site, breaking them down into the individual pages they are used on. (If they are under the Meta column, this means they are not used directly in the content, but are in used in a menu). This list is useful if you want to convert your Font Awesome icons to a single custom icon set to improve your load time. See the How To Replace Font Awesome Icons With A Custom Icon Set documentation for more information on that process.

The recommendations for the two font options let you know which subsets you can turn off, or need on, and in the Font Awesome v4 Compatibility option, the recommendation also lets you know if you have any old v4 icons, which you could then update, so you could turn off v4 compatibility.

Once you have made your changes on this page, click Save Changes, and then Next Step.

In this step, you can check which fonts are being loaded on your website and optimize how those fonts are served. Ensure all families and variants selected here are required. Fewer variants will mean fewer requests and therefore faster loading. This page is split into two sections – the Global Fonts, and the Font Serving Global Options.

Clicking on Find Recommendations checks how many font variants are being used on the site, and makes recommendations about the Font Serving options. There are five font options you can change, depending on your website. They will all affect performance to some degree. For example, you can Preload Key Font Variants for a faster LCP (Largest Contentful Paint) if the LCP on your site is a font. Again, when you are done, click Save Changes and then Next Step.

In this step, you can disable any Design, Layout or Form Elements you aren’t using. When disabled, the Elements will not load and will therefore not be available in the Builder.

There are three buttons at the top of this page. Find Recommendations, Enable All, and Disable All.

Clicking on Find Recommendations scans your website to see which Elements you are using, and deselects all the Elements you are NOT using. If your website is finished, you could then save your changes, thus stopping any unused Elements from loading. Just be aware that you would have to re-enable these Elements to use them at a future time.

In this penultimate step of the Wizard, you can optimize how the CSS and JS assets should be enqueued. These options can have a large impact on the performance of the page load but some of these can also break functionality, particularly if you are using a caching plugin, so be sure to test your site after any changes.

When you are done with your changes, click Save Changes and then Finish Wizard.

This takes you to the FInish page, which clears the site cache and assets. The Wizard also displays how many plugins you have, as these can have a big effect on performance. If you have missed any possible improvements, these will be listed on the right-hand side, next to the Active Plugins.

At the bottom, are some links to specific docs that can help with your understanding of website optimization, and how to perform further optimization, such as optimizing for above-the-fold content, and ensuring that your images are all the right size and optimized as well. Finally, at the top, you can click the Run PageSpeed insights button again, to see how the site has improved.

There are always more things you can to to optimize your site, like choosing faster hosting, running a CDN, installing a caching plugin, further optimize your images and much, much more, but the Performance Wizard is a great first step once you have completed your site, to get it up to speed.

Performance Tab – find the ideal option combination (it’s impossible to be prescriptive here, as this is not the same for everybody)

WebPageTest is a website performance testing site, targeted mainly towards developers. It offers a plethora of website performance testing options, in a freshly revamped interface. Of all the major testing platforms, this one is often considered the best, due to it’s enormous number of options. Let’s dig into the options on offer with this awesome tool.

At the top of the page content, there is a dropdown menu with the links to the other result tabs. We will cover them one at a time. There is also an option to Re-run the test, and an Export Files link to download the data in various formats.

WebPageTest is a highly regarded testing platform, with a toolset mostly suited for developers, or advanced users. There are a profusion of testing locations, and this service gives you all the information you could ever need to optimize your website’s loading time.

Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Avada.

Apart from our many documentation resources, the Facebook Avada User’s Group has a large and very active membership, and this topic is regularly discussed on the Group.

One of our recommended plugins, the PWA plugin, also is well worth a look, when trying to speed up the loading of your site using plugins. What PWA does is to provide a range of different caching strategies, based on your site and the frequency of content updates.