Hummingbird low mobile score

Mobile score is 29/100 when testing with Google PageSpeed Tool. Done everything in Hummingbird but performance score still the same.

And First Byte Time is also lower.

  • Adam Czajczyk

    Hello Lucas

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

    I checked the site - both PageSpeed and the site setup - and that's a bit more complex than "just Hummingbird". The Hummingbird plugin works on "resources" so it is processing assets that are loaded by the site, despite whether it's mobile or desktop: if a given asset is being loaded, it is processed by Hummingbird.

    The point is: apart from some WP-core assets, there are also CSS/JS resources added by theme and plugins and it's a matter of which of them are being loaded and in what order for desktop and mobile.

    For example:

    - some themes do not load certain CSS (or load different) for mobile views, some are addressing that via CSS media queries and some are not even using media queries (even though they do provide some level of responsiveness).

    - some themes load all assets and render all the page elements despite of the device, letting the browser "re-position" them, while some are excluding parts depending on a device

    - some themes serve images of different dimensions (that can be achieved via CSS and/or img srcset in HTML) depending on device, some just scale the same image dynamically

    These are just some of the aspects that affect this but together with a way HTML is "structurized" by the theme (so e.g. to mark "above the fold" content) it's what mostly causes such a big difference between mobile and desktop score.

    Once good thing though is that if a desktop score is reasonable, I wouldn't worry too much about mobile score. I'm not saying it's not important but ultimately, a subjective load speed would be more important than a set of tips on what possibly could improve speed (and that's what PageSpeed score and suggestions actually are).

    That said, there still is something that could and should be done and it should improve both score and performance as a result. If you look at the "Hummingbird -> Asset Optimization" page you'll notice that all the options there are disabled - all the buttons are white (some are gray but that's a different thing, see below). This means that currently Hummingbird is actually not doing any optimization on of the assets on site. The only thing it does is it puts them on our cloud. I'd recommend following then:

    1. temporarily disable Page Caching in Hummingbird (it's not necessary but will make it easier to follow with next steps)
    2. on Hummingbird -> Asset Optimization disable WPMU DEV CDN for now too
    3. on Hummingibrd -> Assets Optimization page run "re-check files" option (make sure that WPMU DEV CDN option is disabled there in the popup as well) and once it's done you will want to configure actual optimization.

    That's a bit daunting task and more of a "trial & error" rather than "science" but that's the nature of the optimization process and a consequence of HB giving control over asset optimization on such a granular level.

    If you look at the resource list, you will notice that for most of them the "Compress" button is grayed out or there's a little yellow icon on the left of asset name saying that the asset has already been compressed. So that column (the "compress" button) can actually be skipped. But there are more options to "play with". What you'd want to do would be to:

    - enable "Combine" option and move to footer or inline as many CSS resources as possible without breaking the site
    - enable "Combine" option, move to footer and enable "force load this after the page has loaded" for as many JS resources as possible without breaking the site.

    The best way to do it is to focus on "one column" at the time (e.g. start with "Combine") and enable it for 2-3 files from the top of the list, then visit the front-end and give it a moment to actually apply the option (it's automatically processed after the front-end has been visited) then check the site if it's working fine. If it isn't, adjust the option "combination" until it works fine again. Then proceed with next 2-3 files on the list and so on until the end of the list. Once that's done, do the same for the next "option column".

    I realize it's time consuming but it will let you really optimize assets delivery, which in turn should affect performance and score positively.

    Once it's all set up, enable WPMU DEV Cloud, give it some time so resources where actually synced and test again to see whether it helped or not (in most cases it helps quite a lot but sometimes it's better to keep that option disabled, there's no "universal rule", it has to be checked).

    Finally, after that, enable Page Caching again, let the cache rebuild and see how the site performs.

    Other than this, a good option would be to take care of how the theme handles resources, especially CSS and images but that might actually mean either finding and using a different theme or a custom development so I understand it might not always be possible.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.