Have been using Foundation 6 since it came out. I was attracted to the idea that the generated code would be smaller and the pages quicker to load. I watched a lot of videos and got to grips with the swatches method of creating styles and in general I do like it. However…
Of the 3 sites I have built with it, I am finding an annoying amount of FoUC (Flash of Unstyled Content) on page load which I didn’t have at all with Foundation 1 or other platforms (Foundry) - no matter how complex the site. Ironically, I am now installing a preloader on all sites that use Foundation 6 which seems a bit counter productive given that the codebase is supposed to be leaner, meaner and quicker and I am deliberately slowing down the loading of the page!
I have tried all sorts of things including just a single-page test with virtually no special features (animations, light boxes, parallax etc) just a menu and a couple of containers of text but to no avail.
I fully accept that it may be something that I am doing wrong (or not doing) but it is getting annoying now so any help or advice would be welcomed.
The clients of 2 of the sites both pointed it out to me but the 3rd client hasn’t mentioned anything yet. Of course, as soon as I install the preloader, it goes away. This site does not have a preloader installed and if you move across the main menu you will (hopefully) see what I’m talking about.
For reference, the same thing happens in Firefox, Safari and Chrome. My clients that pointed it out were using Edge and IE so I don’t think it’s a browser thing.
So, is it something that I am doing wrong? Has anyone else come across this? To be honest, it’s left me scratching my head a bit. Is it something that I should just accept? I am baffled as to why NONE of the sites I ever built with F1 did this but it’s showed itself in F6 now??
Edit: As a comparison, this site (built with F1) doesn’t show any sign of FoUC:
That hero-image of the cat you are using has a size of 1.1MB as well as pretty huge dimensions. Maybe you could try to reduce the size and see if this improves the loading speed?
Ooh thanks Jay - good spot! I don’t know how I let that one slip
I’ve optimised this down to 145k now but it hasn’t solved the problem. It doesn’t happen every time but when it does (and it’s quite random), you can clearly see the the un-rendered main menu as a bulleted list down the left hand side of the page. Also, I have tested this with pages with just a menu and a couple of blocks of text and it still happens.
My guess is that it’s something to do with the menu but I can’t be sure.
It’s pretty woeful. I don’t have F6, but I can’t believe this is down to it. I’m no expert at this sort of thing, but it looks like the style sheets are taking forever to load.
Yep that’s it! It’s never taken that long though! This QT grab shows what’s happening the majority of time:
I don’t know what’s causing it either but I have built many, much more complex sites than this in Foundation 1 and (more recently) Foundry and I have never come across it before.
Of course it may not be down to F6 but it does seem conicidental that the 3 sites it happens on are all F6 sites. I would love to hear from Joe to see if he’s come across this before?
I have also seen this behaviour only on Foundation 6 sites. Last month I even rebuilt a site in Source to what was the problem… In fact it only happened on Foundation 6 and now I always put a preloader on Foundation 6 sites. I would be interested to know what is causing this too, as sometimes these issues relate to how often I use a specific framework.
So in Foundation 6.5, CSS styles have started to load asynchronously. Before, the rendering of the page would be paused until all CSS was downloaded. Google does not like this to happen any longer. Therefore, F6 no longer pauses the page content from being rendered. It loads the CSS in the background. Once the CSS its downloaded its applied to the page.
Ah OK - thanks Joe. Yes, on the other 2 F6 sites I have used the preloader which has kept my clients at bay but at least I know know that it’s actually a thing and I’m not going mad although sometimes I do think we are slaves to the way Google likes things to happen!
For what it’s worth, I use pre-loaders on almost all sites. I want the user to see the site as it’s been designed to be seen, not as it loads into the browser.
although sometimes I do think we are slaves to the way Google likes things to happen!