JavaScript and CSS in above-the-fold content

  • kurogane

    (@kurogane)


    9 years, 2 months ago

    Hi,

    I want to know how i can fix java and css. I’m trying to use the critial path but for me not working.

    I’m just putting what Autoptimize minified CSS generate to criticalpathcssgenerator page but i’m getting worst than before.

    Also how i fix render-blocking jquery.js

    Here my site: http://bit.ly/2nnKuBy

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

    (@futtta)

    9 years, 2 months ago

    for critical CSS have a look at this great instruction-video by AJ@wpfaster;

    for jquery.js; AO exludes that from JS optimization by default because a lot of themes/ plugins break if it’s not excluded, but you can always try removing js/jquery/jquery.js from JS optimization and check if your site functions that way?

    hope this helps,
    frank

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    Thats what i do and my site breaks, i lost my background and anothers elements.

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    Thats what i do

    you mean removing jquery.js from the exclusions? well, then you’l have to re-add it and live with it being render-blocking I’m afraid.

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    No, CSS part.

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    then you’ll need to look into alternative tools to generate your critical CSS, e.g. this bookmarklet (chrome) or the premium https://criticalcss.com/ …

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    No sure how that google work, can you explain it? if not i going to use the premium one.

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    ow, that’s not simple to explain I’m afraid. maybe google around for “how to use a bookmarklet”?

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    I just notice something, I tried to put only body -> background in inline and defer CSS and not working refused to work, maybe a bug?

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    I tried to put only body -> background in inline and defer

    not sure I understand, what exactly did you put in the “above-the-fold” input-field?

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    Try to put this simple code

    body {
  background: #FF0000;
  border: 0;
  margin: 0;
  padding: 0;
}

    The code above should be make a red background.

    Not going to work because ovewrite with css file generate Autoptimize “autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css”

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    that’s how it’s supposed to work; your critical CSS is a subset of your normal CSS, and is only to be used until the full (deferred) CSS is loaded. the deferred full CSS will effectively overwrite the styles of the critical one 🙂

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    Because of that my backgroud image not work.

    This is what i have, Autoptimize generate two files

    autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css
    autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css

    So this happen, inline css > autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css > autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css

    “The problem” this file have background autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css (mobile) then autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css have another backgroud (desktop), so for some reason the last css file not load only load the first css thats is why i lose my background image.

    <style type="text/css" id="aoatfcss" media="all"> ..... inline code ..... </style><noscript id="aonoscrcss"><link type="text/css" media="all" href="autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css" rel="stylesheet" /><link type="text/css" media="screen" href="autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css" rel="stylesheet" /></noscript>

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    hmmm … autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css is not your mobile CSS, but the media="all" one, whereas autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css is media="screen".

    but hard to tell what to do with only this info, could you share your site’s URL so I can have a quick look @kurogane ?

    Thread Starter kurogane

    (@kurogane)

    9 years, 2 months ago

    Its my first post.

    Plugin Author Frank Goossens

    (@futtta)

    9 years, 2 months ago

    missed that one 😀

    ok, so as your site is running without “critical css” for now and as you currently also have

    
<link type="text/css" media="all" href="http://www.luminariastv.com/wp-content/cache/autoptimize/css/autoptimize_5d5547fafc63cae9b5ac1708b0168b4f.css" rel="stylesheet" /><link type="text/css" media="screen" href="http://www.luminariastv.com/wp-content/cache/autoptimize/css/autoptimize_b688b9c8541d6fbfa33c29c655a63f45.css" rel="stylesheet" />

    this implies the problem is not with one (deferred) CSS overwriting the other, but rather a problem with your critical CSS after all OR that something is breaking the javascript that tries to load the deferred CSS. do you have a non-production-site where you could activate “inline & defer” with the critical CSS you were experimenting with?

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

The topic ‘JavaScript and CSS in above-the-fold content’ is closed to new replies.