that’s probably because there’s javascript-driven rendering taking place, but your js is aggregated an loads very late (inserted at the end of the HTML with the defered-flag). try if ticking the “force JS in head”-option solves this rendering issue?
frank
ah, on loopindex you’re “inline&defer”-ing, defered CSS loads very late as well, same issue really.
love the black labrador on loopindex homepage by the way, had one just like that … 🙂
Hi Frnak,
Thanks for the quick reply, I’ll check it out and let you know.
If I’ll use the HTML in the head, as you suggested, wouldn’t it have a bad implication on the above the fold rendering ?
I agree, he is indeed adorable 🙂
Thanks,
Guy.
If I’ll use the HTML in the head, as you suggested, wouldn’t it have a bad implication on the above the fold rendering ?
yeah, it is possible (likely) that when forcing JS in head and/ or not deferring CSS, you will indeed see some increase in rendering time. it’s a matter of priorities, really.
frank
Thanks Frank.
I’ve checked the “force JS in head”-option, it didn’t solves the rendering issue 🙁
on spectoos? I’d check, but is already back in the footer again 🙂
No, on loopindex.com, it is set now – http://www.loopindex.com/inline-comments/
Thanks Frank!
ah, but on loopindex you’re “inline&defering CSS”, and “the page freeze with a bad styling and after a second or two all components get to their styled position.” is due to the inlined CSS actually.
look at the two screenshots uploaded on http://imgur.com/a/sAmlI
one is the site fully rendered, the other one is with the main AO-CSS-file (which gets loaded later) disabled. so what you’ll see, when loading, is the one without the AO-CSS-file first and after approx. a second (well, can be more or less, depending on your bandwidth) the main AO CSS gets loaded and all is fine.
so either add “stuff” to the inlined CSS or don’t inline&defer (or accept the temporary styling issue, off course)?
frank
So if I understand correctly it is not because of the js, but because of the “Inline “above the fold CSS” which lacks some of the styling, correct?
I tried to find the lacking css part (used several critical path css tools), but none solved the problem.
Is there another way to know which part is missing?
Thanks,
Guy.
Is there another way to know which part is missing?
manually inspecting node style properties in your browser’s development tools and adding the missing styles to your above-the-fold CSS. not the easiest thing though (except if you’re kick-ass CSS wizard, off course)
frank
hmm .. I tried with criticalcss.com, the above-the-fold CSS is not perfect, but it’s better then what you have now.
Yep, I tried the same, but doesn’t look better 🙁
It is live now with the css generated by criticalcss.com
Any other way to track the right css that you know?
Any other way to track the right css that you know?
well, you could give this bookmarklet a spin?
this one seems better for /inline-comments/, no?
frank
Thanks Frank.
Yes it is, BUT I’m looking for the way to do it right (not you or someone else to do it for me) AND it is not 100%, there are still parts that get in their position in delay.
Two problems:
1. I’m kind of perfectionist
2. I would like to master it, so I can apply it to all my current sites and future sites.
Any advice?
