Prevent unstyled content flash
Hi everyone! I'm new in this discord, but i've been watching kevin's videos for a few years now. Super great!
But I have now finally run into an issue I cannot solve, on my own, with google, or the help of my friends..
For context: I am currently rewriting my website's static site generator.
Previously, my website was only a single page; a single html file.
But In the process of rewriting, I added a tag system, where each tag gets its own page (html file)
I used to just embed my css file in the index.html's head, in a style tag
But with these multiple pages, I thought I should put it into its own file, so it can be shared across all the website's html files
I assumed it'd cache it after the first time and then not need to flash unstyled content at me after that
However, I keep seeing flashes of unstyled content when I click through the pages, which looks terrible...
I've sent a video recording of it happening below, so you can see it for yourself.
this is the end of my the
<head> of every single one of my html files
as you can see, i'm already preloading it, but it did not help (much?)
I also kept the main page's background colour embedded in each html file, to at leaast prevent a bright white flashbang from happening, so at least it just looks bad, instead of actively hurting my users' eyes
but of course that is more of a hack than a proper fix...
So does anyone know how to prevent these flashes?
-# (please do not suggest any javascript methods; my website will not have any javascript)21 Replies
if at all useful, there is a build of my full website here: https://github.com/TechnicJelle/TechnicJelle/actions/runs/18639488048
you can also find the source code of the website there, which gets run through the SSG to generate this build output
(make sure to look on the
rewrite branch for that, though)
In my searching, I have found this information on MDN:
Note: Only link elements in the document's <head> can possibly block rendering. By default, a link element with rel="stylesheet" in the <head> blocks rendering when the browser discovers it during parsinghttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link I do not think this is working
the video seemingly did not attach correctly, my apologies
you should generate some critical/above-the-fold styles
just enough so the basic structure of the site doesnt look so broken
stuff like the layout, css variables, colors and other basic styles
I see...
Is that really the best option..?
Cause at that rate, I'll just dump the whole CSS file's content into the head of each HTML file again
it's the only option
and no, dont dump the entire css file
just the absolutely absolute necessities
Has this most basic problem really not been solved in the last 30 years of websites using CSS??
yes: critical/above-the-fold css is the solution
and no, this is not a basic problem
by far
also, check if you have the correct cache settings
How so?
This seems like very basic web features usage to me; a few HTML files linking to the same CSS file
That's been done for ages, has it not?
I did have the "Disable cache" checkbox disabled
that can cause the flash of unstyled content
physics
that's the problem
it takes time for the css file to be downloaded
Yeah no I get that
it also takes time for the html file to be downloaded, but the browser will only request the css later on
first, it has to receive some of the html
in the meantime, the browser has to show something
so, it uses just the default styles it has, and any inline css
this while waiting for the css to download
if the css takes longer than the page took to be rendered, well, you will see garbage
That it doesn't load perfectly immediately on first load is acceptable
But between page switches is very disappointing
Cause it doesn't even have to get any new files
It could just not render the new page until it's got the CSS file from its cache
Probably only delays by a few milliseconds
cache can smooth that out
depending on how the cache is set, it may need to revalidate the file, which is an http trip away
The cache headers on the web server?
Couldn't it show with the cached version and then re-render once it got the new one?
no, it must revalidate
yup
I see
I must say this is a disappointing situation
I get it, but it is disappointing
it is what it is
you can check if your server is sending the correct headers
it does look fugly when it flashes all unstyled
It really does..
MDN Web Docs
rel=preload - HTML | MDN
The preload value of the <link> element's rel attribute lets you declare fetch requests in the
HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle,
before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to bloc...
it doesn't do anything for the first load, but that may work
still doesn't do anything if the css takes too long and the cache headers require revalidating
Don't I have that already? https://discord.com/channels/436251713830125568/1429643106311077899/1429643106311077899
Unless I did it wrong..?