Reduce page display flickering when using many flexbox, image icons, fonts

Question

I have a HTML page with many uses of flexbox and a few icons div with CSS background-image.

When opening the HTML page (even locally, without using networking) in the browser, there is some little flickering (probably less than 100 milliseconds, but still):

some items move a few pixels (because of flexbox centering)
some icons take a few milliseconds to load
fonts take a few dozens of milliseconds to load, so we can see the content displayed with default font (maybe < 50 ms) and then with the right font (@font-face...)

How to ask the browser to only display/show a HTML element such as a toolbar

IT goldman · Answer

You can use for images a specified width and height. This is also according to google insights to prevent "layout shift"
As for fonts, maybe this would work

@font-face {
  font-family: "My Font";
  src: url("/fonts/My-Font.otf");
  font-display: block; /* Fix flickering */
}

or this:

Icons are part of fonts. Maybe indeed according to @AlignItems answer have their visibility set to hidden by default, then on window load event, show them again.
Background image shouldn't matter. Don't forget to set fallback background-color might prevent some flickering.

Lorik · Answer

How to ask the browser to only display/show a HTML element such as a toolbar only when it's ready to be 100% painted in a definitive way (without further moving/flickering)?

One thing is very important to note: A browser does not render HTML/CSS asynchronously!

The issue is not the loading time of the HTML/CSS, instead it's the loading times of your async content (such as images/api calls/so on...)

To fix the issue you're having about the content flickering, you have 2 solutions:

Use skeleton loaders. Skeleton loaders are a way to fill in contents of a page that are still being loaded asynchronously, but without losing the layout of your page which, in this case, is your issue. Learn more about this here.
Decrease loading times. If you can decrease loading times of your async data, you can make it render basically instantaneously, barely (i.e. <20ms) noticing the shifting. Of course this is still not the best solution in terms of UX, but it is the fastest solution. One of the best way to decrease your load time would be to compress images, or to decrease your font family sizes.

Here is another nice article that I found which could hopefully help u out even further. Good luck!

AlignItems · Answer

This method worked for me:

First, add display: none;(opacity: 0; and visibility: hidden; works too) to your .
Make two functions:

function loaded() {
  // Change 'block' to default display value of your body element.
  document.querySelector('body').style.display = 'block';
}

requestAnimationFrame(loaded);

Andrew Kruglik · Answer

Maybe you're looking for window.onload:

.header-toolbar {
  visibility: hidden;
}

window.onload = function() {
const toolbar = document.querySelector('.header-toolbar');
toolbar.style.visibility = 'visible';
};

Or you can use a special loader, some spinner, which will be shown until window.load.

herrstrietzel · Answer

As pointed out by @Lorik: better focus on reducing layout shifts.
So optimizing all external assets is always a good idea.

Another approach could be to inline critical css in your HTML.
Critical means all css rules necessary to style the initial page view (without scrolling) a.k.a "above-the-fold" content.

This can be a tricky task, since depending on a device's viewport size, it's hard to get the ultimate critical css.

However you might find a decent compromise by inlining only style rules e.g for your main nav/toolbar.

@font-face {
  font-family: MontserratWoff2;
  font-style: normal;
  font-weight: 900;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC73w5aXo.woff2') format('woff2');
}

.woff2{
  font-family:MontserratWoff2;
  font-weight: 900;
}




  Home
  About us
  Legal notice
  Privacy policy


One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

In the above snippet the main nav can render the font instantly, whereas the next paragraph will render slightly delayed.

Inline font subsets as data-url

Apart from using the more efficient woff2 font format you could also add a subsetted font for the "critical letters" (used in your main nav) via data url.

This can be a suitable approach, especially if your man navigation uses only capital letter.

You can create a subsetted using a tool like transfonter
reducing the character/glyph range to e.g "ABCDEFGHIJKLMNOPQRSTUVWXYZ.:;?!"

Drawbacks
Obviously your HTML's filesize will increase.
As a result if your maintaining your code in plain HTML - readability will also suffer.

See also

Reduce page display flickering when using many flexbox, image icons, fonts

5 Answers

This method worked for me: