Cannot eliminate render blocking JS and CSS

  • Resolved vmajor

    (@vmajor)


    6 years, 5 months ago

    If I use automatic minify settings the site breaks, likely due to manged CSS but all the JS and CSS are no longer render blocking according to the google tool. When I use manual no minification of anything occurs as far as I can tell and all the JS and CSS remain with their render blocking status.

    There are no errors on admin end. All options on the Minify page are set to enable, and JS is set to Non-blocking.

    I tried everything I could think of. Nothing elicited any workable response, hence my post.

    Maybe it has something to do with this option: JS file management:

    Theme:

    Files are minified by template. First select the theme to manage, then add scripts used in all templates to the “All Templates” group. Use the menu above to manage scripts unique to a specific template. If necessary drag & drop to resolve dependency issues (due to incorrect order).

    I have no idea what that means. Nevertheless I added JS that are used by the active theme (41 scripts), did nothing. I also have duplicate of the theme used (both child and parent) in the list of themse so I am not even sure which one to add scripts under, and why.

    V.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years, 5 months ago

    Hello @vmajor

    I am sorry about the issue you are having with Manual minify and I am happy to assist you with this.
    Manual minification can be very tricky and complex as it requires adding your JS and CSS files manually and in proper order.
    Adding all fiels at once is not an ideal solution. Manual minification requires you to add those files one by one, save all settings and check your website and testing tools. YOu can also try to use Non-blocking using “async” or Non-blocking using “defer”.
    One thing that you can try is to use Auto Minify and exclude JS and/or CSS files that are causing your website to break from minifying in Performance>Minify, Advanced sub-box, “Never minify the following JS files:” and “Never minify the following CSS files:”
    We also have a our Professional Support solution to Eliminate Render-Blocking JS in Performance>Support.

    I hope this helps!

    docbt

    (@docbt)

    6 years, 5 months ago

    @vmajor I would check, if you get errors in your browser developer console.

    You will see errors of dependencies and can fix it by reordering or moving required scripts to the header/after the <body> tag…

    In my options I also had to disable linebreak removal in the js minify settings. I got an error of the ultimate member pickerdate function with linebreak removal.

    For me it works with scripts in the head as renderblocking. All scripts in the body with defer.

    Another thing I noticed is, that the manual settings have to be done in the parent theme, if you have a child theme. Otherwise nothing was minified at my site…

    • This reply was modified 6 years, 5 months ago by docbt.
    Thread Starter vmajor

    (@vmajor)

    6 years, 5 months ago

    Thank you for the replies and @docbt thank you for mentioning the console. When I select to minify JS I get 400 bad request errors.

    When I select to minify CSS no errors are reported but the site layout is broken.

    Minify HTML & XML does nothing, I guess it is intended for static pages of which I have none.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years, 5 months ago

    Hello @vmajor

    You should try reordering/moving those JS files as well as your CSS.
    If your layout is broken that means that you need to reorder your CSS or potentially not add a specific CSS to minify.
    Are you using any other minify solution?

    Thread Starter vmajor

    (@vmajor)

    6 years, 5 months ago

    OK I will try that. My example above was with the auto option.

    No I was not using additional minify solutions (that I am aware of) and I had disabled cloudflare minify and purged caches.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    6 years, 5 months ago

    Hello @vmajor

    I am not seeing any render-blocking issues after testing your website on GTMetrix: https://gtmetrix.com/reports/shop.venn-cycling.com/8o4CzJAH
    However, I think you should optimize your images with some Image optimization plugin like Ewww Image optimizer or SmushIt. This will reduce the weight and the load speed of your website!

    Thread Starter vmajor

    (@vmajor)

    6 years, 5 months ago

    Thank you for looking Marko, yes I have been working on the site. I use Smushit but the issues is with me reusing images in different locations than originally intended. I will need to resize them to match the page requirements.

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

The topic ‘Cannot eliminate render blocking JS and CSS’ is closed to new replies.