FOUC on Firefox
Firefox has a strict timeframe for rendering the inital page layout, which gives the “flash of unstyled content” (FOUC) issue a better chance to occur.
What is FOUC
The term FOUC refers to the scenario when a browser initially displays the webpage in the browser’s default stylesheet; and within a split-second, it applies the proper website’s requested stylesheets to the elements (Here is an example). On Firefox it is accompanied by a warning message on the console: “Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.”
The FOUC is caused by the “late” arrival of stylesheets. Certain browser engines make their own decisions on what is considered “late”.
When a webpage is requested, the browser fetches and parses the HTML. During which, when a browser engine encounters an external stylesheet, it has to decide whether to “stall” or “not to stall” the processing of remaining elements. If the browser decides not to stall on a resource, it might render some elements based on a temporary measures, and later on, correct it when it receives sufficient stylesheet information; that act results in the sudden switch of layouts referred to as the flash. 1
Chris Harrelson made a compilcation of Stylesheet Loading Behavior
accross browsers, which said
“Gecko blocks Painting DOM Elements on obtaining external style sheets
declared as a descendant of <head>,
except for those declared via @import within another style sheet.”.
His repository also provides strategies to avoid FOUC;
however they do not guarantee to overcome the FOUC on Firefox as
there is another character in the story.
Firefox Profiler shed more lights on the matter, as can be seen from the below visualization. The First Contentful Paint (FCP) had happened before the external stylesheet was completely downloaded. That means stylesheets, even though usually perceived as “render-blocking” resources, are not completely “render-blocking” on Firefox.
In fact, linked stylesheets are render-blocking on Firefox under a time limit.
The option nglayout.initialpaint.delay
decides how long the engine is allowed to finish the initial layouts
before it starts painting to the screen.
This option can be accessed in the browser
Configuration Editor.
Since Firefox 53, its default value was
reduced
from 250ms to 5ms 2.
A network latency that exceeds 5ms will result in the FOUC on Firefox if the site relies on the external stylesheet for its main layout.
How to avoid it
While web visitors who use Firefox, can adjust the configuration of
nglayout.initialpaint.delay at wills if they consistently suffer from
the FOUC, this behaviour leaves web owners with limited choices to
completely avoid the FOUC for every visitors of the websites.
The theoretical way is to embed or inline critical style rules in the HTML, which usually referred to as the “above the fold”. This makes these rules available to the browser immediately. In other words, it eliminates the impact of network latency on the outcome of the initial paint. However, the extraction of “critical CSS” adds a burden to maintainability, and (in some cases) discards the advantage of caching.
A trick/work-around widely suggested on the internet is to explicitly
postpone the painting of the DOM until the stylesheets are ready. For example,
by having a script block somewhere before the body elements;
or by initially hide the content, then toggle its visibility when appropriate.
The above are the only methods I am aware of that, by design, would be able to completely prevent the FOUC on Firefox regardless of other factors that are less in the site’s owners controls such as network latency and cache’s availability.
Conclusion
The general idea to avoid layout shifts is to feed the browser engines with sufficient instructions early on so that the engines can effectively plan and execute the rendering. Optimize resources loading helps lower the chance of layout shifts in general.
On Firefox, FOUC can still occur for a relatively well-optimized resources loading strategy if the fact that stylesheets are not completely render-blocking is not taken into accounts. However, such FOUC is not something people see regularly, especially after caching has been established. It is interesting to investigate, however whether it’s worth fixing is left for the site owner to decide.
The FOUC Problem (2006) by Dave Hyatt ↩︎
I think this setting is quite extreme, as the human eyes are unlikely to recognize motions this fast. A higher threshold might be able to lower the impact of network latency while not sabotaging responsiveness and user experiences. How long is too long? ↩︎