Improving Score Metric "First Meaningful Paint"

Hi there,

I just read this article (https://premium.wpmudev.org/blog/improve-first-contentful-meaningful-paint/) on WPMUDEV's blog, and I would love if someone could help me to understand what exactly I would have to do if I wanted to minimize the number of render-blocking external stylesheets and scripts.

I am assuming I have to configure something in the Asset Optimization of the Hummingbird Pro plugin. – Right?

I am a little worried, that if I press any of the buttons there, that I could break the site. What is the recommended approach?

Thanks for your help, guys!

Kind regards,

Katrin

  • Adam Czajczyk
    • Support Gorilla

    Hello Katrin

    I hope you’re doing well today!

    Before I get to the point, let me just say something: yes, you “can” “break” something but… you can’t :slight_smile: Hummingbird does not make any permanent changes to the site so even if anything breaks on site while you are going through the Asset Optimization settings – that can be undone and no permanent changes are made by the plugin.

    So let me now give you a brief “step by step” guide:

    1) First, start with a small change in Divi settings:

    – go to “Divi – > Theme Options -> General” and disable these options: “Minify and Combine JavaScript Files”, “Minify and Combine CSS files”; save settings

    – go to “Divi -> Theme Options -> Builder -> Advanced” and disable “Static CSS File Generation”

    I know that this sounds counterintuitive but the point is to avoid specific “conflicts”.

    2) Go to the “Hummingbird -> Dashboard” page and click on “Clear Cache” button there

    3) Go to “Hummingbird -> Asset Optimization” page and click on “re-check files” button; while the check is in progress disable the WPMU DEV CDN option that shows up in that popup.

    Once the check is finished, the most “tricky” part starts. It’s “tricky” because that’s actually what you asked about and there’s no single, universal “algorithm” or “configuration” – it requires some “trial&error” testing and how complex/time-consuming it will be, it depends on the specific site. Furthermore, it’s something that you would best do on your own because you do know your site best and you won’t miss any issues “on the way” if they happen.

    That said, after check is finished you’ll see a list of CSS and JS files (just like it shows up know, but it’s important to not skip steps above!), where for each file there are five buttons. From left to right they are accordingly:

    – “compress”, “combine”, “move to footer”, “inline”, “exclude” for CSS files

    – “compress”, “combine”, “move to footer”, “force load this file after the page has loaded”, “exclude” for JS files

    We will ignore the last – “exclude” – button completely. Also in next steps ignore buttons that are “grayed out”. So to proceed…

    4) For two-three files starting from the top of the list, enable all the options (ignoring “exclude” and grayed-out buttons); Scroll the page down and click on “Publish changes” at the bottom.

    5) Open the site (front-end) in another browser or an incognito tab and browse it for a while extensively; look if everything’s working fine. If you see that anything broke, get back to those 2-3 files configuration (step 4) and, literally, experiment with combination of buttons enabled/disabled until you keep as many of them enabled as possible while keeping the site working.

    If everything’s ok, move on to the next 2-3 files on the list.

    6)… repeat steps 4 and 5, going down the list of files, until you reach the end of it.

    The general goal is to get as many of these “buttons” enabled there as possible without breaking the site.

    Once you got that finished there’s one more step: enable WPMU DEV CDN on “Hummingbird -> Asset Optimization” and see if the site performs better with it. This can be switched on or off at any time so keep it the way that gives better results.

    If you come across some issue during the process that you can’t handle (following step 5 above) or you set all the optimization but the site is still “under-performing”, let me know please and I’ll check it again to see what else/more could be done.

    Best regards,

    Adam

  • Katrin
    • Flash Drive

    Hi Adam,

    quick question: when I am finished with all these steps you so carefully explained, do I have to change back the 3 Divi settings again, or do they stay this way as long as these settings are set this way in Hummingbird?

    Thanks!

    Regards,

    Katrin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.