FOUC Subsequent to Incorporating Critical.css

[boilerup73]

I recently decided to defer rendering of my css style sheets by implementing a critical.css in my head using critical.css generated by sitelocity online critical path generator. While this has brought up a page speed on one of my pages from 77 to 99 in testing with Google PageSpeed, I now seem to be getting some FOUC in the process. As such, while this has considerably increased the speed of this one page (along with others I have experimented on but have since removed the critical.css from), I have reservations about implementing the critical.css on the remaining pages of my site as I find the accompanying FOUC (as fast as it may appear and disappear) to be extremely annoying. As such, I would have to believe that most anyone visiting my website may feel the same and immediately leave. What say you? FWIW, the url of my website page used to implement the critical.css is as follows: https://inspectabuilding.com/commercial-property-inspections-portfolio.html
Thank you ahead of time.

Update: Just discovered that the FOUC issue explained above doesn’t appear to occur in viewing my website page with critical.css in MS Edge browser but only appears to occur in Google Chrome and FF. Figures? Needlesss to say, if this behavior only occurred in MS Edge browser, I could live with this given that most people use Google Chrome.

[uxfed]

There are two ways off the top of my head in which you could tackle this issue.

1. (probably the easiest) You seem to already have a JS loader, where the content will show after fully loading, but said JS isn’t loading early enough, hence why you’re seeing the FOUC before the JS loader has… loaded.

2. (what I would do) Get rid of the JS loader and amend your critical.css to include styles relating to everything “above the fold”. This means styles for all the content you see when you first load the page before scrolling. Anything below can load later.

[boilerup73]

The critical_min.css already contains styles relating to only content ‘above the fold’, hence the inclusion of ‘min’ in the name of the css. As for the JS loader you refer to, I believe it may be preferable to add a .js that hides the display until all remaining css are loaded to resolve the FOUC issue. Once again, as the FOUC occurs for only a split second when a page is first loaded from the server, one thing I’ve recently noticed is that my page speed on a mobile device has been substantially increased going from 5c to less then 2s in most cases. As my page speed on a desktop was already well below 2-3 seconds or in the 1.6 second range, my thinking is that the page speed on a mobile device is becoming more important in that more and more people are using their mobile phones not to mention that Google has been saying for a long time that they eventually anticipate giving more weight to how a site performs on a mobile device as opposed to a desktop for ranking in the serps. If true, the trade-off in having a split second FOUC in viewing my website on a desktop seems moot at this point in time since the behavior doesn’t occur on my mobile phone device. What say u?

[uxfed]

I didn’t actually look last time but I’m not seeing a critical.css or critical_min.css file being served. I see what is likely a malformed attempt at it. Check how to use link tags at https://www.w3schools.com/CSS/css_howto.asp.

As for the JS loader, you should be either starting it immediately (without the current wait) or get rid of it. It kinda just gets in the way otherwise.

To your more general question, FOUC is bad and looks very unprofessional. FOUT (flash of unstyled text) can be okay if it’s not too jarring – I do that on some sites while fonts are loading.

[Author]

Posts