Render Blocking

  • Resolved hey1234512345

    (@hey1234512345)


    6 years ago

    Hello, I was wondering how you would go about getting rid of render-blocking resources on a website. I have the Hummingbird plugin. One of the instructions say to “switch to inline CSS to inline files that are critical to the first paint of the page”. How do you decipher what files are critical and what files are non-critical?

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    6 years ago

    Hi @hey1234512345

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

    The CSS “structure” of most WordPress-powered sites and the way it’s all included in the site doesn’t really make it that easy to “identify and extract” such critical CSS but there’s quite a simple way to deal with those “render blocking” resources in most cases:

    – in Hummingbird’s “Asset Optimization” page enable “Advanced mode” and make sure to use “re-check files” so the list of assets would be “up to date”

    – the second button from the right for each CSS file is “Inline” option and I’d recommend” just “bulk-enabling” it for all the files, then publishing changes and checking site if it works fine

    – then also check performance

    – in the next step you would also want to try to move as many CSS files as possible to the footer (third button from the right for each file) but that would be best to do “in chunks” of a few files at once as moving CSS to footer might sometimes cause issues with execution of some JS files and/or so called “flashes of unstyled content” (when page looks like no CSS is applied for a brief moment).

    “Render-blocking resources” an also be JS scripts but the rule would be pretty much the same except that instead of “inline” option there’s “load after page is loaded” option which basically defers script loading – so in this case I’d also go “in chunks” of a few files at ones to make sure it doesn’t break the site.

    Best regards,
    Adam

    Thread Starter hey1234512345

    (@hey1234512345)

    6 years ago

    Thank you for the response! According to PageSpeed Insights, the render blocking is gone on Desktop but it is still there on mobile. Do you have any suggestions to fix this issue for mobile?

    Thank you

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    6 years ago

    Hello @hey1234512345

    I hope you’re doing well!

    I apologize for the late reply! The Hummingbird applies the changes for desktop and mobile views. Perhaps the mobile view is cached somehow. Please purge all the caches, site’s cache, server cache, and check if you have Cloudflare.

    Please try an AMP plugin for the mobile’s view. It is a stripped-down AMP code framework that increases mobile speed, which is important for the mobile site’s visitors.

    Here are the most popular AMP plugins:
    https://wordpress.org/plugins/amp/
    https://wordpress.org/plugins/accelerated-mobile-pages/
    https://wordpress.org/plugins/amp-wp/

    Let us know how it went!

    Kind regards,
    Nastia

    Thread Starter hey1234512345

    (@hey1234512345)

    6 years ago

    Hello Nastia, thank you for the reply. It’s already been fixed but thank you to you and everyone who helped out. Much appreciated.

    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    6 years ago

    Hello @hey1234512345

    I hope you are doing well!

    Glad to know that you have fixed this 🙂

    I’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Render Blocking’ is closed to new replies.