[Hummingbird] How can I know which files to minify/optimise without breaking the site?

Hi there,

When I minify/optimise my files in Asset Optimization the CSS appears to be missing from my homepage. If I click 'See this page unminified' it goes back to normal. Is there a way of knowing which files affect what CSS/which ones I can optimise and which ones I should leave?

I can never seem to narrow it down by disabling/enabling each one individually as the caching throws everything out.

Any help would be greatly appreciated.

Thanks so much,

Zak

  • Nahid

    Hey Zak !
    Hope you are having a great day!

    Fabio Fava is correct. Unfortunately, there is no way to determine optimizing which file could break the layout of the pages beforehand. The only way to know that is by trial and error.

    I'm quoting from our documentation page here:

    The most important thing when working with Advanced mode and making changes to how your site loads files is that you test things out after every single change.

    It is not recommended to select all your files, click on Bulk Update, and enable all of the options at once. This could have disastrous consequences for your site, and break a lot of things! Please do not do this!

    You won’t be able to apply every option to every file, so it is very important to test as you go. (and make sure to click on Save Changes beforehand!)

    If a change you make does not work or affects the Front End of your site, then just go back to the Minification section and undo the last change you made. After you save your changes again and clear your cache, everything will be right back as it was before.

    This process can take some time to get right, but once you do it will be worth it!

    Moreover, I'd also recommend disabling caching for the time being as otherwise, you'll have to clear cache after every change.

    Hope this helps. Let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

  • Nahid

    Hey Zak !
    Hope you are having a great day!

    Yes, 'Move to Footer' and 'Inline CSS' on the advanced tab page are also based on trial and error.

    "Move to Footer" refers to a popular type of optimization which makes the CSS/JS file load at the footer, i.e. after all other HTML content when the page is loaded. You can know more about this step and it's importance here. This should be triggered as a part of "removing render blocking resources".

    What "Inline CSS" does is, scrapes out the CSS styles from the associated CSS file and lays it along with the HTML source in an inlined form. This makes the browser load the CSS styles along with the HTML content, not requiring it to load an entire CSS file. This should be triggered as a part of "optimizing CSS delivery of stylesheets".

    Hope this helps. Let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

  • Nahid

    Hey Zak !
    Hope you are having a great day!

    Yes, "Move to Footer" can be used for scripts which handle popups that load after a specified amount of time, making sure that the order that the files are loaded in is correct. The position (header/footer) of the file doesn't matter in such a case as the time count is started after the full page, i.e. the content and resources are loaded in usual cases.

    Any CSS file can be inlined, it is a method of speeding up the loading of your site. This doesn't require your browser to download the CSS file every time the page is loaded, rather display the CSS styles directly within the HTML. You can know more about this method here.

    Moreover, something additional to note regarding these optimizations is, as mentioned in Hummingbird Performance Test recommendations, it can be very hard to get a perfect score for this rule. Some plugins and themes due to their design may not be able to handle their scripts deferred to the footer without breaking, so will have to be left in their original position. And often combining and minifying all CSS files will not completely remove their impact on your score. Just try multiple combinations to improve this score as much as possible.

    This article can be of help regarding these optimizations. You can also take a look into this part of our documentation.

    Hope this helps. Let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.