Web

🡸 lup: 20251020#124638

browser render engines try too hard.

possible remedies to FOUC:

more of a placebo, tbh.

<link rel="preload"
	href="[URL]"
	as="style" />

if as attribute is font, it additonally requires crossorigin attribute (THANKS, CORS).

there are multiple ways to do it, but most use javascript.

all of them start the same way: make hiding the absolute first thing.

<html>
  <head>
    <style>
html {
  visibility: hidden;
  opacity: 0;
  background: [background color];
}
    </style>

setting the background color prevents the whole page from flashing white.

the CSS method doesn’t require JS, and it’s probably the easiest: just append this to the last line of the last CSS file loaded:

html {
	visibility: visible;
	opacity: 1;
}