Optimising perceived performance by avoiding issues like FOIT, FOUT
As web developers, we strive to provide the best experience for users of our sites and applications as possible. However in Pega, due to heavy usage of iFrames the basic content needs to be optimised more to improve user experience because with each click to open a rule or even on some legacy end user portals we load an iFrame which in turn gets loaded with its own set of stylesheets,javascript. With new fancy font faces in picture, we have additional HTTP requests separate from the HTTP request for the web page markup.Now we should decide whether to show page text before the needed font files arrive, or wait for the font files, showing nothing until the text is ready to render with the required web fonts.
FOUT stands for “Flash of Unstyled Text”. FOUT is what happens if web page designers decide to display the page in full before font files arrive. FOUT is actually a special case of FOUC – Flash of Unstyled Content – in which the browser renders the entire web page briefly with default browser styles because the markup has loaded but the CSS sheet that dictates layout of the page has not. After a short time (often less than a second) when the CSS sheet does load the whole page re-flows to take on the layout defined by the CSS. This can be very disorienting to the user and at times give the impression of a broken website.
FOIT stands for “Flash of Invisible Text”. FOIT is the phenomenon users get when the page designer chooses to render the layout of the page but wait to place visible text until the custom fonts have loaded. From an information consumption standpoint, this leaves the page unusable for a short time
Hence we need to make use of mitigating techniques to make the application have the appearance of a high level of performance.We can opt for both CSS based or JS based solutions for this depending on our requirement like:
1. Reduce file sizes
2. Use the CSS "font-display" property
3. Font Preloading
or others as mentioned in https://css-tricks.com/fighting-foit-and-fout-together/
The simplest way to be used in Pega is use of font-display property, with which we can avoid a FOIT pretty easily, using the fallback or swap value on our choice.
- swap: Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This may again lead to flash of unstyled text or FOUT.
- fallback: Acts as a compromise between the auto and swap values. The browser will hide the text for about 100ms and, if the font has not yet been downloaded, will use the fallback text. It will swap to the new font after it is downloaded, but only during a short swap period (probably 3 seconds).
We still need to be careful as font-display is not fully supported yet!
But finally, after adding this property, we were able to fix our FOIT issues (at least on browsers supporting this feature) which was coming across each iFrame.