how to prevent FOUC

colak · 2016-10-19 12:14:14

I am trying to write a js_Load() javascript function document.body.style.visibility='visible'; as described in the first answer here but instead of the body to target a class.

Basically I am trying to improve the page speed of the site hiding javascript and css below the fold but by doing that I created a FOUC

The background: I am already using javascript to change the class of the body from no-js to js

The idea: I create a simple css

.no-js {visibility:visible} 
.js {visibility:hidden}

If a simple javascript could target the js class and change it to visible after loading the page, I hope that the FOUC would disappear…. Or maybe not as the no-js class would remain until the the loading of both jquery and the script.

Any ideas?

philwareham · 2016-10-19 13:03:53

IMHO, don’t bother, you’re making no difference to the page speed anyway – CSS is by its design a page blocking resource for the very reasons that if it weren’t, you’d get FOUC. Load your CSS as high in the head as possible (and as a flat file, not via Textpattern styles panel) and speed it up using better methods than worrying about a non-existent ‘fold’. Such as serving from a static domain, serving images as sprites to reduce HTTP requests, etc.

colak · 2016-10-19 14:04:45

philwareham wrote #302315:

IMHO, don’t bother, you’re making no difference to the page speed anyway – CSS is by its design a page blocking resource for the very reasons that if it weren’t, you’d get FOUC. Load your CSS as high in the head as possible (and as a flat file, not via Textpattern styles panel) and speed it up using better methods than worrying about a non-existent ‘fold’. Such as serving from a static domain, serving images as sprites to reduce HTTP requests, etc.

Thanks so much Phil. That argument actually persuaded me to give up. Something I should have done a couple of hours ago. The css and js are served as flat files via the use of plugins. Whenever possible I use css instead of images so as to clear the inevitable clatter.

jakob · 2016-10-19 16:05:29

You could also consider lazy-loading images so that they are only loaded as you scroll to them – probably only really worth it on image-heavy pages. You can also make non-essential javascript load asynchronously so that it doesn’t hold up page loading.

BTW: neme.org is unreachable (blocked) for me too at work (IP range 93.217.xxx.xxx, Deutsche Telekom, dynamic IP that changes daily) but it works fine on mobile, and IIRC at home too, which are on a different providers’ network.

colak · 2016-10-19 17:04:37

Hi Julian, I’ve tried the async attribute a number of times but for some reason the rotating slides stop working.

I have no idea why your ip is not accepted as I currently have no blocked ips.

philwareham · 2016-10-19 17:59:01

Do you use Cloudflare at all, I had an issue where one of their IPs was on a blacklist (they got it sorted out, but you might have similar).

Also, if you don’t use Cloudflare and are looking to speed up your site, I’d recommend them (the free version is good). Made quite a difference to page render speeds in my own tests.

colak · 2016-10-20 06:56:44

Hi Phil, It’s more about expanding my knowledge rather than actually having noticeable problems with the speed. According to Pagespeed, the server responds in 0.28 seconds which might be slow in today’s speeds but it is not a worrying delay.

The front page of the site has an acceptable speed too considering the whole site is served using ONLY the default template.

<!-- Trace summary:
Runtime   : 332.94 ms
Query time: 21.49 ms
Queries   : 21
Memory (*): 6490 kB
-->

philwareham · 2016-10-20 07:48:18

If you have access to the DNS records for the site, honestly try Cloudflare.

The only drawback is that as the DNS is routed through them, if their service goes down, so does you site. This has happened in the past (thousands of sites were affected by a DDOS attack on Cloudflare) but last couple of years they have been pretty bulletproof.

colak · 2016-10-20 08:53:08

Hi Phil, what worries me with Cloudflare is that they service pirate sites. Furthermore I wouldn’t want NeMe to be affiliated with large corporations. This also goes for mailchimp, amazon etc.

Having said that we are guilty of using google services.

Textpattern CMS

Textpattern CMS support forum

#1 2016-10-19 12:14:14

how to prevent FOUC

#2 2016-10-19 13:03:53

Re: how to prevent FOUC

#3 2016-10-19 14:04:45

Re: how to prevent FOUC

philwareham wrote #302315:

#4 2016-10-19 16:05:29

Re: how to prevent FOUC

#5 2016-10-19 17:04:37

Re: how to prevent FOUC

#6 2016-10-19 17:59:01

Re: how to prevent FOUC

#7 2016-10-20 06:56:44

Re: how to prevent FOUC

#8 2016-10-20 07:48:18

Re: how to prevent FOUC

#9 2016-10-20 08:53:08

Re: how to prevent FOUC

Board footer