0

I have been fixing up a sites JS, moving it to the bottom, minifying, etc. And it's all gone okay except on the blog (of an e-commerce site), as the page loads it's causing the header to be un-styled for a second or so, but it isn't happening on any other part of the site, even though they share the same CSS/JS. The blog is image heavy, but with images disabled (and I've tried disabling scripts too), it still happens. It's only happened since I've made changes, which I can't revert simply, but the changes are all positive and should help if anything. I can't see any JS causing it (as I removed the scripts to see if it was in there) and it doesn't happen in FF.

I would share a link but it's behind a closed staging server. And I could provide code but I'm not sure what, and there's a lot.

So, I had hoped I could use Dev tools to figure out what's happening, possibly the timeline view or something. I just don't know how I'd go about doing that.

Any advice?

Ed: I used the network tab on both the staging and the live site, as you can see from the image, they're identical, the css is the first thing loaded after the actual page, and on the live site it's actually ga.js. So it's even more of a puzzle now...

enter image description here

evu
  • 1,031
  • 2
  • 10
  • 29

2 Answers2

1

Don't worry, figured it out... It was the Stylebot Chrome Extension.. No idea why it was causing it now after making those changes though, and why it didn't affect the live site. I had no styles defined in it for this domain. A bug I guess.

Cheers all the same :)

evu
  • 1,031
  • 2
  • 10
  • 29
0

Timeline tab in the dev tools is for benchmarking / site performance testing. If you want to know what's happening as in what content is being loaded, when and where, you can use the network tab for that.

It's also a common practice to stuff console.log() everywhere with some relevant message so you know when some part of code is being run.

Swiffy
  • 4,401
  • 2
  • 23
  • 49
  • Hi Piwwoli, I've updated the question to include a screen shot of the network panel. I could console.log but no JS is even running at that part of the page load, it's all at the bottom. – evu Jul 16 '14 at 09:20
  • Since you've been moving stuff around, maybe it is simply caused by you including the files in wrong order? Like are the – Swiffy Jul 16 '14 at 09:23
  • I thought that, but there's only 1 css file and I removed ALL javascript (in thinking something might be adding a class or something) but nothing changed, I've just noticed that the file is .5kb larger too, though I actually removed a line of code (unnecessary code) so if anything it should be smaller... And diffing them shows no difference.. Getting even weirder. – evu Jul 16 '14 at 09:26
  • Hmm well FOUC is rarely caused by CSS, since the page should be always loading that first before showing the page, so it is most likely something else (such as javascript, but...). – Swiffy Jul 16 '14 at 09:32
  • Yeah, on the live site, a lot of tracking JS is loaded before the css, where as on the staging server the only thing loaded before the css is the favicon (just like live site). So if anything it should be better on the staging... – evu Jul 16 '14 at 09:34