Optimizing Layout Shifting and Flashes of Invisible Text

Introduction to Flashes of Invisible Text

When a browser loads a file, it allocates a specific dimension, size, and position for each of the elements present and structures the whole page accordingly. But when any element changes its position, dimension or size, it becomes a cause of change in position of all the adjoining elements. Eventually, the shift occurs in the whole page, known as the Layout Shift. Layout shifts can be on purpose also, as a container changes its size according to user action like click or scroll.

Layout shifts can happen for several reasons, and FOIT is one of them. FOIT stands for Flashes of Invisible Text. When the browser loads the file and finds that the custom fonts are not loaded yet, in this case, the browser will leave the text space empty or wait until the fonts are loaded.

The most impactful CSS in which we can stop the rendering of the elements and reduce the paint and layout shift time. Click to explore about, CSS Content Visibility Property to Boosts Rendering Performance

What is FOIT?

The FOIT is the loading mechanism that decides the text area is to be kept blank until the custom fonts are loaded. FOIT helps the browser handle the time between the page loads and the fonts load. The font file size of the page is heavier than the rest of the page. So, it causes a blockage in rendering the other elements of the page, like images. As the web fonts take time to load, the other elements need to wait until the fonts are loaded. This leads to the overall delay in the page's response time and downgrades the user experience.

As the layout rendering is halted till the time fonts are loaded, how the web fonts are loaded is called font block timeout. Different browsers have different font block timeouts like chrome, opera, firefox has a timeout of 3 sec, Explore has 0 sec, and safari has an infinite font block timeout. With the help of FOIT, we can display our content when it’s fully loaded, so there are no variations in fonts. FOIT puts more weightage on the visual representation of the fonts as the original fonts are not replaced by some other default fonts, which can hinder overall page design.

A web browser consists of various structured bundles of code that are required to perform certain tasks to retrieve HTML, CSS and javascript. Click to explore about, How the Web Browser Renders the Pages

Difference between FOIT and FOUT?

FOUT stands for Flash of unstyled text, another loading mechanism like FOIT. In the FOUT mechanism, when the custom fonts are not loaded, it does not cause any blockade for the rest of the page layout rendering process. Instead of waiting for the custom fonts to load, change the fonts of the text with the default font and continue with the layout rendering of the rest of the page, and as soon as the custom fonts are loaded, swap it with the default fonts.

FOUT is measured by Font swap timeout, allowing the browser to display the default font over the custom font. Almost all the browsers have a font swap timeout of infinite.

The main difference between FOIT and FOUT:-

The main difference between the FOIT and FOUT can be seen through the following parameters:

Performance

In the FOUT mechanism, the speed of the page is not compromised as it can display the text on the screen as soon as it is rendered with the standard font. Whereas in the case of FOIT, the browses have to wait at least 3 sec to load the full page.

Appearance

FOIT will display the expected content, as it does not swap the fonts while the page is loading, whereas, in FOUT, there is a swap of the fonts as it does not cause any delay while the rendering of the page. FOIT should be chosen if developers weigh more on the page's appearance over the performance, or FOUT If performance matters more.

User Experience

In FOIT, the user experience is compromised over the design. Three-second loading time is considered high while optimizing the page's overall performance, as FOIT puts more weight on the visual identity of the chosen font.

Whereas in FOUT, changing fonts after the page is loaded can generate the feeling of minor operating problems in the page as the font will change on the visible text after the page is loaded, as FOUT weighs more on textual content.

The splitting of code into components or numerous bundles which can be loaded when there is a demand or in parallel. Click to explore about, Code-Splitting in ReactJs with Its Best Practices

How to Fix Flash of invisible Text and layout shifts?

Steps to fix flash of invisible Text and layout shifts are below:

Layout Shifts

Layout shifts can be tackled by reserving the minimum space for the dynamic content or the content added from any user action.

The use of attributes like min-height and min-width will allow the browser to reserve the mentioned minimum amount of space for your content and increase the size of the content when needed.

Flashes Of Invisible Text

Preload fonts

While using custom, the font file should contain the “rel” tag with preload or prefetch attribute.

With the preload attribute, we inform the browser to start the download of the required file as soon as possible. Still, it can affect the initial page load as it will be prioritized in the resources queue, and the other important file will have which will eventually increase the initial page load time.

Instead of preloading, we can use the prefetch attribute, which will inform the browser to be prepared for the download as the following resources are required for page load.

Uses of Optional fonts are listed below:

Font download timelines: Timeline consist of three major segments

Block: During this period, when an element is requested for the custom font, and the font is not loaded yet, then the fallback font is rendered, and a swap of font happens as soon as the custom font is loaded.
Swap: At this stage, the text using the invisible fallback font is swapped with the custom font as soon as it is loaded.
Fail: The value period occurs immediately after the swap period, and if the custom font is not loaded, it is marked as a failure, and the fallback font is used as usual.

A tool that enables end users, administrators and organizations to gauge and evaluate the performance of a given system. Click to explore about, Performance Monitoring Tools and Management

Font-display values

The font display have five value:

Auto: In auto, the strategy similar to the block value is used as the default strategy by the browser.
Block: In the block strategy, the browser is given a short period of 3 sec. The browser can apply the default font in these three secs if the custom is not loaded. It also gives an infinite period to swap the fallback font with the custom font when it is loaded.
Swap: A swap, the browser has an infinite period to swap the default font with custom font, and there is no block period in the swap, as the text is displayed in the default font only in the first instance. In this, the browser will display the text in default font as soon as the text is rendered but will swap it with the custom font when it’s loaded.
Fallback: In fallback, the browser is given a concise block time of 100ms and a short swap period of 3 sec. If the time for block and swap is passed, the default font is used for the rest of the page timeline.
Optional: The optional value is similar to the fallback value, but in optional, the browser can decide whether to download the custom font or to keep the default font. It is best used when a user is connecting on a weak network, and the browser can choose not to download the custom font to keep the page load light on the user's weak network.

Code Example

@font-face {
font-family: 'Lobster';
font-display: swap; // ----> the fix!
font-style: normal;
font-weight: 400;
src: local('Lobster Regular'), 
     local('Lobster-Regular'), 
     url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format('woff2');
}

The font-face has a font-display property and can have values like auto, block, swap, fallback, optional.

font-display: swap property informs the browser to use the default font until the custom font has been downloaded. After that, it will swap the current font to a custom font.

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs.Click here for our Digital Product Development and Engineering Services

Conclusion

FOIT should be used in case the design of the content is the utmost priority for the end-users, not the page load time. FOUT can be used in the case where providing the content to the user is the utmost priority, for which the design of the content can be compromised for a few seconds or till the whole user interaction.