How to move optimized render-blocking JS file to the bottom of page

  • Resolved artinkb

    (@artinkb)


    9 years, 10 months ago

    Hi. I’m trying to move a render-blocking JavaScript optimized by Autoptimize to bottom of the page but I can’t find any feature or option to do it. It’s recommended by Google to place it below the fold and I’ve included the link to Google Page Speed for you to see it.

    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.alternisit.com%2F&tab=desktop

    Is there a way to place the optimized render-blocking JavaScript file to the bottom of page?

    Best,
    Art

    https://www.ads-software.com/plugins/autoptimize/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Frank Goossens

    (@futtta)

    it is placed at the bottom of the HTML with defer flag by default, but I guess you have “force JS in head” active. uncheck that option and the optimized JS will not be render blocking.

    Kind regards,
    frank

    Thread Starter artinkb

    (@artinkb)

    I’ve disabled the “Force JavaScript in <head>” and it caused the dynamic text in the website with LayerSlider to not work anymore. So I checked the box again.

    The same thing happens for css and Google PageSpeed says Optimize CSS Delivery.

    I tried different settings and yet I can’t figure out a way for this to function properly. Do you know what could be missing or wrong?

    Best,
    Art

    Plugin Author Frank Goossens

    (@futtta)

    regarding JS; forcing JS in head indeed makes it render-blocking. the alternative is trying to exclude the layerslide JS from optimization.

    regarding CSS; there’s info on why it is render-blocking and how to tackle that in the FAQ.

    Hope this helps,
    frank

    Thread Starter artinkb

    (@artinkb)

    After many tries I found out that jquery.js was needed for JS Exclusion then everything started working. So now the Force JS and Look for Script only in <Head> is disabled or unchecked. I can’t get further from here to stop the Render Blocking. Since I resolved the older render blocking, now it show jquery.js as render blocking file.

    For CSS render blocking, I’m using CSS General Data only. I checked the FAQ and after few hours of trying different settings it didn’t get better.

    Is there no way around it? This is more of a long run job to figure out how these things work.
    Best,
    Art

    Plugin Author Frank Goossens

    (@futtta)

    Well, if you really want no render blocking JS, you’ll have to look into replacing LayerSlider with something that doesn’t break when jQuery is not (yet) available.

    For CSS, if it is not too big, you could simply “inline all CSS” (cfr. FAQ).

    have a nice weekend!
    frank

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to move optimized render-blocking JS file to the bottom of page’ is closed to new replies.