[Hummingbird Pro] Optimization

Hello! I updated the WP backend, theme and plugins and out optimation scores dropped dramatically in the Hummingbird test. Our scores used to be giht 70's and now we are in the low 40's. I've made some adjustments, but I can't seem to get the scores back up and don't want to break the site, there are quite a few new items I am not sure how to best optimize, Things like:
"Eliminate render-blocking resources"
I have a whole lot of hummingbird resources that populate in this area along with google captcha and a few theme files.
Same applies for the "Remove unused CSS"

Any tips or help that can be provided would be greatly appreciated.

Thanks!

  • Jennifer
    • New Recruit

    Hello Nebu,

    I have granted access to our staging which shows very similar results to the production site. The only difference is that production site does use a CDN whereas the staging site does not. You can see from the light house report I pulled today (please let me know how I can send this to you) scores are better than what is represented in Hummingbird but a lot of the resources listed for improvement relate to the Hummingbird plugin.

    I guess I am not sure what I should be doing and the best way to improve the site and it's performance.

  • Nebu John
    • Staff

    Hi Jenniffer,

    Hope you are doing good today. :slight_smile:

    To share the lighthouse report with us, you could generate a JSON file of the report and share with us. To know more about generating reports, the below-given URL might come handy:

    https://developers.google.com/web/tools/lighthouse/

    To share the report with us, upload it to any file sharing service like Dropbox or Google Drive or use something like Pastebin to paste the code there and share the URL.

    The lighthouse, Page Speed Insights tools, etc are used to give ideas on what could be done to help speed up a website and shouldn't be associated with search engine ranking. From information, Google has released only very slow websites are penalized in search results. However, it also depends on the type of search query. Sometimes people are willing to wait longer for certain search queries. That being said faster load times have been linked to better conversion rates, so it's definitely worth improving the load time based on the real load time experienced by end users. Hummingbird helps you here.

    Further, I checked and could notice on your site currently, there is "Asset Optimization" enabled in Hummingbird but not configured to the fullest.

    I realize that the feature might be slightly confusing as upon activation it scans the files and that might look like it optimizes them. But it's not quite how it works: it scans the files to make a list of what could be optimized but then you need to take some time to actually configure it.

    When you go to "Hummingbird -> Asset Optimization" page you'll notice a list of CSS and JS files and there are 4 buttons next to each of them (ignore the fifth one). For CSS files they are (from left to right): "compress", "combine", "move to footer" and "inline" and for JS files they are: "compress", "combine", "move to footer" and "load after the page is loaded". The point is, to put it simply, to get as many of them enabled as possible without breaking the site.

    The compression makes files smaller so they load faster. Moving file to footer causes it to be fetched after most of the HTML and other resources have been fetched which also speeds up rendering speed. Making CSS file inline causes it to be actually included in page source instead of being loaded as separate file which in turn reduces the number of requests (which, again, affects performance positively) and setting "JS" file to be loaded after the page is loaded '"delays" loading and executing JS scripts to the moment after the entire page is already loaded to the browser - that too speeds up page rendering and reduces the "render blocking scripts" amount.

    Setting that up, however, is a bit "tricky" because every site is different and can "react" differently and there are also quite complex relationships between all these assets. As a result, there's no way to fully and 100% fail-proof automate it. That means that it has to be configured manually and the best way to do this is to go in small parts: start from the top of the list and experiment with combinations of these options being enabled/disabled for 1-3 files at the time, all time checking the site to see if nothing goes wrong - and if anything does, tweak these options for these files until as many of them are enabled as possible while the site works fine. Once you got that set, proceed with the next few files and so on until the end of the list. There's a chance that at some point you might also need to get back a bit but there's really no "ready to use recipe" for that.

    Feel free to get back to us if you have any doubts or need any help further.

    Kind Regards,
    Nebu John

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.