CSS & JS Compilers

CSS & JS Compilers

15/05/2018

The CSS Compiler was introduced in Avada version 3.8. The CSS Compiler is a great way to optimize the CSS styles which are dynamically generated from the various option settings on your site. This is done by compiling the styles into one file for each page/post, providing a performance boost. The JS compiler is mainly for debugging purposes and should remain enabled on your site. Please continue reading below to learn more about the JS & CSS Compiler.

What Is The CSS Compiler?

When the CSS Compiler is disabled, each option which relates to the page / post being loaded is processed by your server and the styles are all compiled into a single stylesheet which is loaded in the page through the <head> tag. Since these styles can change based on your settings, they're referred to as "Dynamic CSS" styles. The processing of each option into a compiled stylesheet happens on each page load which requires more work for the server. The CSS Compiler can be enabled, for increased efficiency.

IMPORTANT NOTE In Avada 4+ the CSS Compiler option is enabled by default.

Explanation of Each Compiler Method

The CSS Compiler will save the work the server did when compiling the options into a stylesheet so it doesn't have to be repeated each page load. There are two methods of storing the Dynamic CSS which you can choose from or Disabled. Just select the method of your choice and save the Theme Options.

    • File - When you enable the File compiling method, your styles will be saved as a .css file for the page/post it relates to. This file will be stored in wp-content/uploads/avada-styles and loaded when the page is loaded again. This saves the server the work of having to process your site's settings on each page load. This will remove Avada styling from loading in the <head> tag. Note: This file will automatically be regenerated when you update your settings. If you have a caching plugin or server cache on your site, you should clear your cache to ensure your changes are loaded.
    • Database - The Database method will save the compiled CSS in the database instead of as a file. The styles will be loaded in the <head> tag as inline styles for this method as apposed to a .css file as with the File method. This method can increase your database size considerably if you have a large site. For  sites with 20-30 pages, this won’t be a problem. However, if you update your website regularly with new content and posts (for example 10K+ blog and portfolio posts), using the Database method is not recommended.
    • Disabled - When the Compiler is disabled, it will not save the styles in any way. Each setting will be compiled anew into Dynamic CSS and loaded through the <head> tag as inline styling. This is the least efficient method.

    What Does The Head Tag Look Like With And Without The Compiler

    Page Source Without CSS Compiler

    Uncompiled CSS

    Page Source With CSS Compiler

    CSS Compile

    The JS Compiler

    The JS compiler (JavaScript Compiler) will be enabled by default. This will combine individual Avada related JS files into a single loadable file. This improves efficiency in page load times. This should remain enabled on your site. The option is there to disable the JS compiler for debugging purposes. Doing so will load the individual and unminified JS files.

    JS Compiler

    Reset Fusion Caches

    This button will allow you to reset all the Avada related compiled styles, compiled JS files and cleans up the database of any saved styling related entries. This normally happens automatically on your site when updating the theme or other actions like saving a page, your theme options, etc. However, you can use this button to manually clear your compiled styles, if you are uploading theme files via FTP or you notice your theme options not applying changes or odd behavior along the lines of your changes not taking effect.

    Note: This won't delete your settings or change your site appearance. It only affects compiled files which are a "saved" version of your settings. This won't change your actual settings or affect them in any way.

    Important Note About Server Cache

    For unique cases where you are using cloud flare and a cache server, like varnish cache, enter your cache server IP to clear the theme options Dynamic CSS cache. If you do not do this you may not see your changes instantly on refresh. Consult with your server admin to find out your server IP address.

    Recent Posts

    Recent Tweets

    For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
    I Accept