In an effort to increase website page speed/performance on a mobile device, I since decided to take a stab at getting rid of several render blocking css files based upon Google Pagespeed recommendations/results whereby I ended up using Sitelocity's free online critical path css generator to create a critical css file for rendering above the fold content only. While this appears to have dramatically increased the overall pagespeed of my website pages by as much as 4s with speeds as low as .8s in using a mobile device, it has also resulted in a FOUC (flash of unstyled content) for a split second whenever a page is first loaded from the server (as opposed to a cached copy). Although my pages load extremely fast on a desktop or laptop PC, and while this particular behavior occurs within a blink of an eye, being the perfectionist that I am, I still find this FOUC to be annoying whereby others who visit my site may also feel the same way and leave as fast as they came. I am also beginning to wonder if the FOUC represents a trade-off for the page speed increase provided whereby the original css files are no longer loaded in the head or above the fold of content on each page. Any suggestions regarding this subject matter in how it may be addressed/corrected are appreciated. Oh, I should also add that I have been using coffeecup editor (paid edition) since I first designed my website over ten years ago as well as when I recently decided to redesign/update to a responsive website in October, 2018. For those interested, my website address is: https://www.inspectabuilding.com Thank you ahead of time.
Update: BTW, I forgot to add that ironically the FOUC described above only occurs in viewing my website in Google Chrome and FF but not in my least favorite and seldom used browser MS Edge. I also do not experience this behavior on my mobile phone. Figure?

The W3C Markup Validation Service lists a number of warnings and errors for that web page. Addressing those might (but won't necessarily) help.

In case it may help others to identify what is happening, here is a screen-shot of the flash.



Frank

This script link points to the wrong location.
https://cdnjs.cloudflare.com/ajax/Libs/ … ery.min.js

Thanks for the feedback. In response to the first reply, in no disrespect, I am only too familiar with W3C Markup Validation Service as I have used it many times over the years. Unfortunately, the warnings and errors you alude to have absolutely nothing to do with this issue and will not address/correct same. On another note, kudos on the screenshot taken of the flash, I couldn't have done better myself. As for the 2nd reply, as I had initially suspected the script link provided, I temporarily deleted it and tested my pages again hoping this might do it but there was no change. I am now wondering if I might be able to create and insert some type of code that serves to delay the display of my website pages while the remaining css load. Then again, if this were to work it may very well negate the page speed to be gained meaning this was all for nothing.

All considered, I have since decided to remove and abandon use of sitelocity.com critical-path-css-generator for generating a critical css used to style above fold content in order to remove render blocking css regardless of the page speed increase performance gain to be had on a mobile device as the split second FOUC that results is definitely not worth it. As such, if anyone reading this has a proven method or recommendation that has worked without flaw for them to remove render blocking css that can also provide the increased page speed performance on a mobile device without experiencing any FOUC on a desktop PC, I would be eager to know. Thank you ahead of time.

The screen shot of the flash provided courtesy of Frank Cook prompted me to open and take a close look at the critical css I had been using that was supposed to provide the minimum rules required to style all the above fold content thereby allowing me to relocate and load the remaining css asynchronously. What I failed to realize in the very beginning was the fact that if a Critical CSS fails to include every rule required to render all above-the-fold content on any website page, the FOUC (Flash of Unstyled Content) effect is more than likely going to occur. In reality, upon examining the crtical css file, I have further come to realize that it didn't contain all the necessary rules required to render the above fold content on each and every page of my website. This is most evident given the navigation html elements that appear in the screen shot taken of the FOUC experienced in each and every page of my website. Needless to say, this was most disappointing given the page speed performance enhancement achieved on a mobile device withstanding the split second FOUC. However, and as already mentioned, IMO the FOUC is not worth the page speed improvement, so I removed the critical css and other modifications returning my website pages to their original html and css format. FWIW, the critical css was acquired from sitelocity.com critical path css online generator. Given my experience, I would definitely advise against using sitelocity.com critical path css online generator. If anyone can recommend an effective tool with a good track record known to generate a critical path css that contains all rules required to effectively render all above the fold content on a website page, I would be more than eager to know. Thank you ahead of time.

This video may be of some help
https://youtu.be/Ay2uty18TFA

Upon further review of the critical path css generated by sitelocity.com, I discovered that the path created to one of the css that provides the rules for my navigation bar was in error. Upon addressing/correcting the path provided in error, it became evident that this was the reason for the FOUC. For those of you who may have read my previous or last post regarding this matter, this further substantiates what I had stated earlier in that if a Critical CSS fails to include every rule required to render all above-the-fold content on a website page, the FOUC (Flash of Unstyled Content) effect is more than likely going to occur. I should also add that it took a painstaking amount of time in going over and comparing the minimum css generated by sitelocity.com to the original unaltered ccs that provided the rules for my website pages. However, I must admit that in so doing, I was able to discover the error in the path provided for the css to load and provide all the rules required to render above-the-fold content in preventing the FOUC issue. Case closed. All I can add is that it I wish I cold have found a critical path css generator that worked flawlessly to begin with in creating a minimum css that renders above the fold content not to mention that the js provided and recommended by sitelocity.com in order to implement their critical minimum css and remove the render blocking css, was totally unnecessary. On a positive note, according to google PageSpeed, I was able to increase my website pages speed score on a mobile device anywhere from 77 to 90.