Putting CSS Above JS

  • Resolved Brandon Olivares

    (@cocreation)


    9 years, 4 months ago

    Hello,

    Just installed Autoptimized and configured it. It makes the site noticeably faster.

    I’m on WPEngine, and using their page performance tool to test my site. It gives me this suggestion:

    If it’s impossible to remove all the blocking JavaScript files, move all CSS requests above them in the page. Otherwise, these requests can’t be made until the JavaScript completes, which will add length to the page load. You host 4 such files, and load 4 from third parties. There are a number of plugins that can help order your files correctly.

    Consider putting as much JS in the footer as possible so that it processes after the DOM is rendered.

    I enabled all the relevant settings in Autoptimize. Here’s my site: http://cocreationcoaching.org

    Here are my settings:

    JS:

    • Force JavaScript in <head>? Unchecked
    • Also aggregate inline JS? Enabled
    • Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js
    • Add try-catch wrapping? Unchecked

    CSS:

    • Generate data: URIs for images?: Unchecked
    • Remove Google Fonts? Unchecked
    • Also aggregate inline CSS? Checked
    • Inline and Defer CSS? Unchecked
    • Inline all CSS? Unchecked

      • Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css

    Any way I can improve the above?

    I’m also only getting a 62 on Google Page Speed Insights… 🙁

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

    (@futtta)

    9 years, 4 months ago

    well, as per the HTML source the autoptimized CSS is loaded long before any JS and the autoptimized JS is loaded very late (and is deferred), so no problem there.

    looking into your google pagespeed insights results, there’s a number of 3rd party hosted JS/ CSS (which AO does not optimize) that are render blocking.

    what you can fix, however, is the render blocking CSS, by either “inlining all CSS” (easy) or “inlining & deferring CSS” (better). both options are explained in the FAQ.

    hope this helps,
    frank

    Thread Starter Brandon Olivares

    (@cocreation)

    9 years, 4 months ago

    Thanks. I’ll try that out. 🙂

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

The topic ‘Putting CSS Above JS’ is closed to new replies.