Google Page Speed Score Problem

Hi,
I'm facing a problem to setup Hummingbird Pro plugin for Google Page Speed opportunities. I don't know how to work with Eliminate render-blocking resources, Defer unused CSS, Serve images in next-gen formats, Defer offscreen images & Reduce server response times (TTFB).

Site Link: https://vivortho.fr/
I did the basic optimizations from Hummingbird Pro. But my google page speed score is very low. So, I want to fix page speed and I need the green score.
Please, give me instruction to fix page speed opportunities to optimize.

  • viobru
    • Recruit

    Hi, Chris!

    Happy New Year!

    Thanks for contacting us, hope you are doing great :slight_smile:

    I checked the site on Page Speed Insights and I see that you are getting a very good score on desktop, but a low one for mobile: And I see that the improvements that you mention are suggested by PSI for the mobile version, but unfortunately Hummingbird does not provide different optimization for mobile version and there is a reason for that. Let me share this great explanation that my teammate Adam provided to another member that was facing the same issue:

    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.

    Back to your questions:
    - Eliminate render-blocking resources and Defer unused CSS
    This can be improved via Asset Optimization, by applying changes to the files (combining, minifying them or moving them to footer). I see that you have already applied some, but since this is a process of "trial & error" seems that the current changes are not positively affecting the mobile version (or at least not much). I would suggest that you give them another try applying different options to them. In any case, let me remind you that changes under Asset Optimization should be done carefully (one or two at a time) and checking each time that the front-end still loads fine so you know which changes to revert, if necessary. And please make sure to CREATE a COMPLETE and UPDATED BACKUP of the entire site before applying any new change, so you can always get back to the current state if new changes do not help improving this.

    - Serve images in next-gen formats
    This can be improved if the images have a different file format (JPEG 2000, JPEG XR or WebP). To achieve this you would need to manually edit the images and save them on any of these other formats.

    - Defer offscreen images
    There are some plugins in the WP repository that allow you to do this, like Lazy Load or a3 Lazy Load.

    - Reduce server response times (/)TTFB)
    Please check this article about how to work towards resolving TTFB issues: How to Reduce TTFB to Improve WordPress Page Load Times.

    Hope this helps!

    Kind regards,
    Violeta

  • Chris
    • New Recruit

    Hi Viobru,
    Thanks for your great reply.

    I'm very happy to get your suggestion. But how you get 21/97 score on Page Speed Insights test. Where I am only getting 18/80 scores in test. So, I'm bit confused.
    Is it possible get the green score for mobile test? Because, most clients push me for mobile test score. So, I need the solutions for mobile version.

  • Patrick Freitas
    • Staff

    Hi Chris

    How are you today?

    But how you get 21/97 score on Page Speed Insights test. Where I am only getting 18/80 scores in the test. So, I'm bit confused.

    This score sometimes can get different scores, depending on site speed/cache etc. at the moment of the test.

    I suggest you take my teammate suggestion to improve the page speed test. Also, you can take a look at our blog post about the new Speed test

    https://premium.wpmudev.org/blog/the-new-google-pagespeed-insights-a-perfect-100-is-now-super-easy/

    Let us know if you need any help on this.
    Best Regards,
    Patrick Freitas

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.