Website theme not working correvtly

After using hummingbird my website doesn't work correctly. Now the menu in mobile is not clickable and the footer is hidden under the video. also f101 and other codes appear on screen. on my desktop version the home screen slider is zoomed in and the menu and fotter are all white

  • Adam Czajczyk

    Hello Arien

    I hope you're well today and thank you for your question!

    Unexpected issues like these usually happen because of the Hummingbird's "Asset Optimization" settings. Optimization of CSS/JS resources is a complex process and while the plugin attempts to set it up automatically to provide the best optimization, it's not always able to. On some setups/in some cases additional manual configuration is necessary.

    That being said, to confirm whether Asset Optimization is indeed the culprit here, please go to "Hummingbird -> Asset Optimization" page and look if you can see a list of files there or a button to "Activate" it. If it's the first one:

    - go to the "Hummingibird -> Asset Optimization -> Settings" page
    - scroll it down and click on "Deactivate" button
    - if you got any cache on site (may it be Hummingbird's Page Cache or other caching plugin), clear the cache

    If you now clear browser cache, the site should get back to a working condition. Let me know if that happens please.

    Please also enable support access to the site for me so I could take a closer look at the issue. To do this, please go to the "WPMU DEV -> Support" page, click on "Grant Support Access" button and let me know here.

    I'll then access the site, check Asset Optimization's and site's settings and help you tweak them to make it all work together.

    Best regards,

  • Adam Czajczyk

    Hello Arien

    Thank you for your response and enabling access.

    I checked your site and I see that Asset Optimization is indeed turned on and there are render blocking issues reported. Assuming that you managed to set Asset Optimization in a way that it doesn't break the site, the way to address this would be some further tweaking of AO settings.

    The way the Asset Optimization works is that it performs couple of operations on the JS/CSS resources:

    - it can minify them (so kind of "compresses" them so they were smaller, loading faster as a result)
    - it can combine them (joining multiple resources/files in to a smaller number of "common" files)
    - it can move them to footer - such script would be called from the footer instead of "somewhere earlier"
    - it can defer JS loading so JS scripts would load only after the page is fully loaded.

    These last two options are most relevant in case of dealing with "render blocking" resources. However, the nature of the optimization (regardless whether it's done by Hummingbird or any other "optimization" plugin) is that it's nearly impossible to "automatically detect" most efficient and at the same time fully "safe" settings. The same settings may bring different results on different setups and everything has a meaning here - WP, theme and plugins configuration and even server configuration.

    The bottom line is that it's "a bargain" - a matter of finding the "breakpoint" between as much optimization as possible and maintaining the site fully functional.

    The huge advantage of Hummingbird's "Asset Optimization" tool here is an amount of control that it gives you over how resources are optimized. Therefore, to keep the site fully working and still eliminate as much "render blocking resources" as possible (though I cannot guarantee whether it will be all of them or not) the way to proceed would be as follows:

    1. clear and disable Page Caching first so it wouldn't interfere with testing
    2. switch off WPMU DEV CDN in Asset Optimization option for the same reason as above
    3. open and incognito browser tab for testing the site so the browser cache wouldn't interfere
    4. (optional) it might be handy to print out/take a screenshot of "render blocking resources" list from performance test

    5. On "Hummingbird -> Asset Optimization -> Assets" page where you got a list of resources with optimization options look for "Move to Footer" button for CSS files and "Move to Footer" and "Force load this file after page has loaded" buttons; then go through the files listed as "render blocking" one by one:
    - switch on "move to footer" option for one of the files
    - check the site whether if it's working fine; if so, move on with the next file, if not - switch the option back off and move on to the next file
    - repeat that with all the "render blocking" resources (CSS and JS)
    - then repeat the same procedure with "Force load this file.... " button for JS resources (enable, check, proceed) one by one.

    This way you'll be able to safely deal with as much render blocking resources as its possible without breaking the site.

    6. After that's finished, enable WPMU DEV CDN again and see if that helps more with render blocking resources and performance score or not and keep it enabled or disabled depending on the result
    7. Switch Page Caching back-on and once the cache rebuilds site should be set as good as possible.

    Kind regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.