[Hummingbird] When activating cdn option, source order is chanded.

When activating cdn option, source order is chanded.
I enqueue my css files using wp enqueue style in my original theme file.

//wp_enqueue_style( 'animate.css3.7.0','https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css', array(), false,'all');
//wp_enqueue_style( 'nice-select1.1.0','https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css', array(), false,'all');
//wp_enqueue_style( 'magnific-popup1.1.0','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', array(), false,'all');
wp_enqueue_style( 'bootstrap4.1.3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', array(), false,'all');
//Style.css
wp_enqueue_style( THEME_SLUG . '-style', get_stylesheet_uri(), array('bootstrap4.1.3','fontAwesome5.4.1'), CURRENT_THEME_VERSION, 'all' );

In my case, when not activating cdn option, the order of above files is
<link rel='stylesheet' id='bootstrap4.1.3-css' target='_blank' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='ultimate-gutenberg-style-css' target='_blank' href='https://ug.idea-hack.com/wp-content/themes/ultimate-gutenberg/style.css?ver=1.0' type='text/css' media='all' />

And then, when activating cdn option, source order is
<link rel='stylesheet' id='ultimate-gutenberg-style-css' target='_blank' href='https://ug.idea-hack.com/wp-content/themes/ultimate-gutenberg/style.css?ver=1.0' type='text/css' media='all' />
?
??Other files
?
<link rel='stylesheet' id='bootstrap4.1.3-css' target='_blank' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css?ver=4.9.8' type='text/css' media='all' />

This make a different css result on my website, and I want to fix the order of these file.
How should I fix this?
I want to ask for a help.

Furthere more, when activating cdn option, some my css files is not changed to display cdn version.
For example
<link rel='stylesheet' id='ultimate-gutenberg-style-css' target='_blank' href='https://ug.idea-hack.com/wp-content/themes/ultimate-gutenberg/style.css?ver=1.0' type='text/css' media='all' />

I want to know why not cdn version is displayed, and how to fix it.

King Regards
KAZUKI KIKUCHI

  • Adam Czajczyk

    Hello KAZUKI KIKUCHI

    I hope you're well today!

    There's no option to "manually re-order assets" but there are options to move them to header or footer, or "inline" them and - in case of JS assets - to also load them with a delay (after the entire page has been loaded). That's actually the "core" of Asset Optimization feature and the WPMU DEV CDN is an additional option here.

    I check current Asset Optimization configuration on your site and I can see that it's actually not configured at all, which means that it doesn't do anything at the moment. Enabling only "WPMU DEV CDN" there will "offload" some assets to our cloud but only those that are already compressed for some reason (e.g. an original CSS/JS file came minimized or it was compressed by some other plugin etc). If you look at the assets list on "Hummingbird -> Asset Optimization" page you'll notice that, for example, bootstrap CSS file is marked there as already compressed while Gutenberg one is not.

    What happens next is that apart from offloading the file to our CDN the plugin must actually de-register the given asset (the one that's offloaded) and re-register it with a different source (an URL from CDN) so this does result in changing order in some cases.

    Please note that if you switch the "Asset Optimization" configuration page to an "Advanced mode" you'll be given much more options: compress, combine, move to footer, move to header, inline (for CSS) and "Force load this file after the page is loaded" (for JS). Fine tuning all these options for all the assets would also result in changed order of the assets but would let you achieve the maximum optimization level possible to achieve without breaking the site. This is a task that might take some time and is very individual for each setup - there's no "universal configuration" - but it's the way to proceed to actually benefit from HB optimization, especially when the site's complex if it comes to CSS/JS resources that its using.

    This should be set in a first place and only once you know that the site is working fine after that, the WPMU DEV CDN should be enabled. However, please note that while in most of the cases this gives an additional performance boost, there are also cases where it's not necessarily a good idea to enable it as it might (like here) slightly change assets order or even interfere with some other CDN's used (e.g. if assets are actually already fetched from CDNs). Please note also: it's not important that the asset order is being changed but it's important how it's changed in relation to other assets - and this is why the compress, combine, move to footer/header etc options are there and can be changed separately each option for each asset. Experimenting with this should let you achieve a "working balance" between optimization and keeping the site fully functional.

    The bottom line is: there's no universal and standard way of setting that all up and while Hummingbird can give a really nice performance boost, it is a complex tool and requires some effort and "trial & error" to be fully configured.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.