Eliminate Render Blocking

  • Resolved akashmughal21

    (@akashmughal21)


    4 years, 5 months ago

    I tried eliminating render-blocking JS using defer from W3 Total Cache modification settings. I set the Before </head> embed type as “Non-Blocking using Defer”. But, it breaks my site and no image and some CSS don’t even load after rendering of HTML.

    Then, I try “Non-Blocking using Async”. It’s working fine with most of the pages. However, some pages don’t load any images even after the complete rendering of the HTML Page. On refresh, the page loads perfectly, or even on multiple refreshes, it doesn’t load. Further, it doesn’t happen always. Sometimes it loads perfectly and when you refresh the page multiple times, the page breaks.

    I can’t share any specific URL as the issue is so random. Like for me, the following URL loads perfectly. But when I refresh the page multiple time. It loads ok then breaks. Then on another refresh, it loads ok and on next it breaks and goes on.

    https://templatesfreedownload.com/category/graphic-design/

    The image of the broken page is: https://ibb.co/JFNRz6n

    I have tried clearing cache of the browser, Cloudflare, and w3 total cache. Also, try on another system. But, the issue persists.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter akashmughal21

    (@akashmughal21)

    I have tried tweaking between different combinations for before </head> and after </body> settings.

    All the combinations show some kind of Minified Jquery and Image Loader errors in Chrome Dev Tool for all pages except settings both to “Non-blocking using Defer”.

    Although, it hasn’t produced any significant image on the performance of my site for mobile phones while checking on google page speed insight. However, a good impact on the desktop version performance justifies its use. Thanks for the awesome plugin bundle with a lot of helpful performance tweaks.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @akashmughal21

    Thank you for your question and the information provided.
    This is sim;y the issue with the files that are being minified and jquery being loaded after those files.
    The possible solution is to add files manually and in proper order. This can be tricky but it can also give better results.
    Simply the way some plugins/themes JS files are built are causing this and when you defer those minified files the bags might break.
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Eliminate Render Blocking’ is closed to new replies.