Make the site load faster

Performance Options

Options Panel → Advanced → Performance

This section will allow to compress files and switch off the loading of any unused files.

Minify

The minify option will compress the files so there are no unnecessary lines or space in the documents. There are JS and CSS options for this. JS must be Combined before Minifying. See below.

Combine

It is quicker if the browser only has one file request instead of multiple. Combining the files will merge everything into the least number possible. Be careful though, because Internet Explorer 9 and below has a limit of 4095 rules in a single CSS file, so this option may cause the styling problems in those browsers. We highly recommend you check your site in IE9 to ensure everything looks as it should.

Disable output

If there are scripts loading that you are simply not using for your site you can switch them off here. You must be sure you are not using the scripts you Disable or it will cause issues, though we have coded the theme in such a way as to not cause any errors if scripts are missing.

Improve site speed on mobile devices

Background images

Options Panel → Background → Images

Use Image groups to optimize images for smaller devices.

If you are using Background images on your site you should make at least one version for Mobile devices and apply them to the smaller devices.

You should also make sure images are compressed well. Adjust the quality level so it can the file size is as small as possible.

W3 Total Cache

W3 Total Cache is an indispensable tool for speeding up your WordPress site using caching: browser, page, object, database, minify and content delivery network (CDN) support. In fact we are using it on the React demo sites.

More tips

Correct color editing.

Palettes are really useful, but if you are using many then your site could lose performance. Perhaps you are not using all the colors from the Palette? You can keep CSS to a minimum by only adding the sections of color you require.

Using default border radius

It requires overriding many classes, so if it can be avoided. Then you can save some extra CSS by keeping the Border Radius at 2px.