Home Forums Community Forum Unnecessary JS Files Load Even When Fusion Elements Disabled

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • nlabrake
    Participant
    Post count: 1

    As I was making efforts towards improving the performance on our site, I happened to notice that there are a lot of unnecessary JS filed that are loaded onto the site – ones that come from Avada and especially the Fusion Builder. Many of these are associated with fusion elements, but they load even when those elements are disabled.

    This was to my surprise, but after looking into the code, they do have code that automatically enqueues all these scripts regardless of whether or not its associated element is enabled or not.

    I would like it if Avada would pay attention to details such as these, because there are a lot of JS files that come from their fusion builder (I think it’s somewhere in the neighborhood of 50 – 70 files) – and not all sites need every one of those scripts.

    When you have the JS compiler turned on this problem probably doesn’t seem as visible, but that doesn’t change the fact that inside that JS file is an enormous amount of JS that you may or may not be using. What I also found out is that when you have the JS compiler turned on, you cannot simply dequeue the JS files and expect them to go away – that isn’t how their code works. Instead, they have an array of scripts that they use to create the final compiled JS. And unfortunately, they don’t have filters on that array either.

    So what I had to do is create my own filter in their theme (which I really don’t like doing at all – since it’s not at all good to modify a third party theme).

    So I’ll share my code here, with a strong suggestion that Avada adds such a filter. Add this filter inside wp-content/themes/Avada/includes/lib/inc/class-fusion-dynamic-js.php:
    /**
    * Get the scripts.
    *
    * @static
    * @access public
    * @since 1.0.0
    * @param bool $reorder Whether we want to reorder the scripts or not.
    * @return array
    */
    public function get_scripts( $reorder = true ) {

    // Add this filter here so you can take out scripts you don’t want
    return apply_filters( ‘avada_scripts_array_final’, self::$scripts );
    }

    If they did this, it would give you the ability to take out unneeded scripts – though really they should just check whether associated Fusion Elements are enabled, and if they are not enabled, then don’t add them in the script.

    Michael C
    Keymaster
    Post count: 437

    Hi @nlabrake,

    This is already implemented in the builder. If you have an element disabled then the element specific JS will not be enqueued because the element class will not be loaded (which contains function add_scripts). However, not all JS files are specific to just one element – some are also shared with Avada. So for any like that the JS files still have to be enqueued even if the element is disabled.

    For example, if you disable the Flip Box element then fusion-flip-boxes.js will not be enqueued. However, if you disable the blog element fusion-blog.js still will. That is because the core Avada theme also utilizes that same JS file and is required for the archive layouts.

    Also please note, if you don’t want a script enqueued you do not need to add a filter, you can use the methods in the class. For example:

    Fusion_Dynamic_JS::deregister_script( 'bootstrap-modal' );

    rvencu
    Participant
    Post count: 1

    In my case I disabled the Chart element. I really do not think chart.js would be required by Avada core, I never use charts in my site. Is that a bug?

    joesideas
    Participant
    Post count: 4

    @rvencu this is also true for me. I disabled all the unnecessary features, but it’s still loading scripts for things like chart, lightbox, flexslider, etc things I disabled but are still loading (and don’t seem logically required on a theme – wide basis).

    I also reset the fusion caches, but these still persist.

    Chart.js alone is about 150kb, dang that’s huge!

    I’d love to know how to disable all the unnecessary scripts / requests, that would be cool.

    jstoops989
    Participant
    Post count: 9

    I too find this to be a cause for concern. As an example, one of my client sites is a very simple single-page layout, in the fusion builder options I only have 10 out of 54 elements enabled but the site still processes 87 JS requests.

    There are many listed that cannot possibly be required simply for Avada to function:
    -alert
    -lightbox
    -fitvids
    -fusion video
    -chart
    -easyPieChart
    -flexSlider
    -fusionMaps
    -carousel
    -popover
    -tooltip
    -sharingbox

    I understand that with such a full-featured and flexible theme, some sacrifices for performance have to be made. As it stands though, I have a hard time getting most sites under the magic 3 second number, which sucks when you have successfully done everything every speed test and optimization tool has told you to do.

    notebleu
    Participant
    Post count: 1

    To build on what Michael C wrote, and based on another post that I came across (https://theme-fusion.com/forums/topic/related-posts-not-showing-on-post-pages/), I was able to put together a solution to this using the Avada Child Theme.

    I found that disabling Fusion Builder Elements in the Fusion Builder settings did not consistently remove the desired JS references from the site.

    I was able to manually dequeue these JS calls by adding the following to the child theme’s functions.php:

    add_action( 'wp_enqueue_scripts', 'custom_disable_theme_js' );
    
    function custom_disable_theme_js() {
        Fusion_Dynamic_JS::deregister_script('avada-comments');
        Fusion_Dynamic_JS::deregister_script('avada-general-footer');
        Fusion_Dynamic_JS::deregister_script('avada-mobile-image-hover');
        Fusion_Dynamic_JS::deregister_script('avada-quantity');
        Fusion_Dynamic_JS::deregister_script('avada-scrollspy');
        Fusion_Dynamic_JS::deregister_script('avada-select');
        Fusion_Dynamic_JS::deregister_script('avada-sidebars');
        Fusion_Dynamic_JS::deregister_script('avada-tabs-widget');
        
        Fusion_Dynamic_JS::deregister_script('bootstrap-collapse');
        Fusion_Dynamic_JS::deregister_script('bootstrap-modal');
        Fusion_Dynamic_JS::deregister_script('bootstrap-popover');
        Fusion_Dynamic_JS::deregister_script('bootstrap-scrollspy');
        Fusion_Dynamic_JS::deregister_script('bootstrap-tab');
        Fusion_Dynamic_JS::deregister_script('bootstrap-tooltip');
        Fusion_Dynamic_JS::deregister_script('bootstrap-transition');
        
        Fusion_Dynamic_JS::deregister_script('cssua');
        
        Fusion_Dynamic_JS::deregister_script('fusion-alert');
        Fusion_Dynamic_JS::deregister_script('fusion-blog'); // !
        Fusion_Dynamic_JS::deregister_script('fusion-button'); // !
        Fusion_Dynamic_JS::deregister_script('fusion-carousel');
        Fusion_Dynamic_JS::deregister_script('fusion-chartjs');
        Fusion_Dynamic_JS::deregister_script('fusion-column-bg-image');
        Fusion_Dynamic_JS::deregister_script('fusion-count-down');
        Fusion_Dynamic_JS::deregister_script('fusion-equal-heights');
        Fusion_Dynamic_JS::deregister_script('fusion-flexslider');
        Fusion_Dynamic_JS::deregister_script('fusion-image-before-after');
        Fusion_Dynamic_JS::deregister_script('fusion-lightbox');
        Fusion_Dynamic_JS::deregister_script('fusion-parallax'); // !
        Fusion_Dynamic_JS::deregister_script('fusion-popover');
        Fusion_Dynamic_JS::deregister_script('fusion-recent-posts');
        Fusion_Dynamic_JS::deregister_script('fusion-sharing-box');
        Fusion_Dynamic_JS::deregister_script('fusion-syntax-highlighter');
        Fusion_Dynamic_JS::deregister_script('fusion-title');
        Fusion_Dynamic_JS::deregister_script('fusion-tooltip');
        Fusion_Dynamic_JS::deregister_script('fusion-video-bg');
        Fusion_Dynamic_JS::deregister_script('fusion-video-general');
        Fusion_Dynamic_JS::deregister_script('fusion-waypoints');
        
        Fusion_Dynamic_JS::deregister_script('images-loaded'); // !
        Fusion_Dynamic_JS::deregister_script('isotope'); // !!
        
        Fusion_Dynamic_JS::deregister_script('jquery-appear');
        Fusion_Dynamic_JS::deregister_script('jquery-caroufredsel');
        Fusion_Dynamic_JS::deregister_script('jquery-count-down');
        Fusion_Dynamic_JS::deregister_script('jquery-count-to');
        Fusion_Dynamic_JS::deregister_script('jquery-easy-pie-chart');
        Fusion_Dynamic_JS::deregister_script('jquery-event-move');
        Fusion_Dynamic_JS::deregister_script('jquery-fade'); // !!
        Fusion_Dynamic_JS::deregister_script('jquery-fitvids');
        Fusion_Dynamic_JS::deregister_script('jquery-fusion-maps');
        Fusion_Dynamic_JS::deregister_script('jquery-hover-flow');
        Fusion_Dynamic_JS::deregister_script('jquery-hover-intent');
        Fusion_Dynamic_JS::deregister_script('jquery-infinite-scroll'); // !
        Fusion_Dynamic_JS::deregister_script('jquery-lightbox');
        Fusion_Dynamic_JS::deregister_script('jquery-mousewheel'); // !
        Fusion_Dynamic_JS::deregister_script('jquery-placeholder');
        Fusion_Dynamic_JS::deregister_script('jquery-request-animation-frame');
        Fusion_Dynamic_JS::deregister_script('jquery-sticky-kit');
        Fusion_Dynamic_JS::deregister_script('jquery-to-top');
        Fusion_Dynamic_JS::deregister_script('jquery-touch-swipe'); // !
        Fusion_Dynamic_JS::deregister_script('jquery-waypoints'); // !
        
        Fusion_Dynamic_JS::deregister_script('lazysizes');
        Fusion_Dynamic_JS::deregister_script('packery'); // !!
        Fusion_Dynamic_JS::deregister_script('vimeo-player');  
          
    
    //     Fusion_Dynamic_JS::deregister_script('jquery-easing');      
    //     Fusion_Dynamic_JS::deregister_script('modernizr');
    //     Fusion_Dynamic_JS::deregister_script('fusion-testimonials');
    //     Fusion_Dynamic_JS::deregister_script('jquery-cycle'); // !    
    //     Fusion_Dynamic_JS::deregister_script('jquery-flexslider'); // !
        
    }

    This is probably not a comprehensive list of everything that Avada loads in, I used this approach in combination with disabling Elements in the UI, which probably removed some other library references. It was really easy to put this list together by grep-ing for the JS file names in the Avada theme folder, though, so if you have other JS references that you want to remove, you just need to find the name that’s used to invoke it (ie: jquery-flexslider) and add another call to

    Fusion_Dynamic_JS::deregister_script('jquery-flexslider');

    As you can see from my example, we didn’t need most of the JS that was being loaded by the theme and these changes reduced the file count by 100 and 1.2MB!

    marklchaves
    Participant
    Post count: 689

    Omg @notebleu & @Anni,

    You guys rock. I just reduced my requests another 8% (from 96 to 88 now–woohoo!). Thanks to you two.

    As a benchmark, before any performance tuning on the very first version of my site, I was seeing 135 requests. I’ve even complained about this before in a previous forum post.

    Huge thanks for sharing this with everyone,
    mark

    marklchaves
    Participant
    Post count: 689

    Sorry for the extra post. Just wanted to give appropriate kudos to @akread and @michael-c. Great work! 🙂

    Salt-Media
    Participant
    Post count: 20

    Incase anyone is a little unsure about using functions I found this Plugin really useful to unload JS, Asset Cleanup and used in conjunction with Query monitor to monitor any issues with unloading scripts

    idogan
    Participant
    Post count: 9

    @notebleu
    Hi Thanks for sharing this
    But when I try
    It disables menu
    I couldn’t find out which line of code disables Menu
    Thanks

    idogan
    Participant
    Post count: 9

    Now I have found the problem line
    It is tooltip. I removed 2 line related with tools tip, menu appeared again

    Here is the result
    Unused Javascript problem gone, It is solved.
    My pagespeed insight score increased from 60 to 75-80
    I have left 10 point to reach 90 now 🙂
    I have done alot of optimisation to get this result
    I removed all of the sliders, Optimised and decreased size of all images
    I used litespeed cache and cloudflare
    I removed google analytics and rocketloader which are decrease pagespeed score.
    Most of the Avada performence settings have advers effect, they decrease pagespeed score inadvertedly. This may be conflict with litespeed cache, I don’t now but very strange.
    After One month of work without coding I achieved 75-80 Pagespeed score on mobile. On desktop it is easy to get 95.
    So mobile is not good in Avada
    If I can do without coding knowledge, Avada programmers can easily get 90 pagespeed score

    idogan
    Participant
    Post count: 9

    Other useful settings

    I used DNS prefetch when necessary
    I used preload key request also
    I solved passive event listener problem with a code, found in a forum like this. I run that code as
    Here is the code

    (function() {
    var supportsPassive = eventListenerOptionsSupported();

    if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
    }

    function overwriteAddEvent(superMethod) {
    var defaultOptions = {
    passive: true,
    capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
    var usesListenerOptions = typeof options === ‘object’;
    var useCapture = usesListenerOptions ? options.capture : options;

    options = usesListenerOptions ? options : {};
    options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
    options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

    superMethod.call(this, type, listener, options);
    };
    }

    function eventListenerOptionsSupported() {
    var supported = false;
    try {
    var opts = Object.defineProperty({}, ‘passive’, {
    get: function() {
    supported = true;
    }
    });
    window.addEventListener(“test”, null, opts);
    } catch (e) {}

    return supported;
    }
    })();

    Unfortunately I don’t have the link to code writers original source
    I added this with the help of snippets plugin as js file

    JoshWolfenberg
    Participant
    Post count: 1

    @notebleu thank you for the custom_disable_theme_js() script. It works great!


    @salt-media
    thank you for the recommendation to use Query Monitor Plugin. It shows script dependencies and makes debugging a breeze!

    Feeling much better removing these unnecessary scripts from Avada!

Viewing 13 posts - 1 through 13 (of 13 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.