When I view my live site on jxshooter.com (primary domain), and jxshooter.netlify.app(subdomain) the HTML loads slightly before the CSS on the side menu. I was wondering how this can be solved or if its on my side? I’m using react so I’m not sure when I should import the css files so they appear first
Live Site: jxshooter.com
Frameworks like React and Vue heavily rely on lazyloading assets. This is controlled by and within React, as React is what tells the browser what do download and when.
I mostly use Vue and not React, but check out their documentation regarding lazyloading and you will probably find your answer.
PS: What you experience is normal, and not something you should be to worried about. Unless the delay is immense. If the HTML and the CSS is within the “core” of your React app, then what you experience is normal on a slow connection, the browser will always load HTML before CSS and JS, after all, the CSS and JS files you want to load, are defined within the HTML.
On Chrome 89, all the 3 css files are downloaded right after the HTML file is downloaded and parsed, and I observe no flash of unstyled content. So, it means HTML is rendered after the css files are loaded.
I observe no FOUC on Firefox and Safari either.
Browsers have to know what to download before they can actually download them. As a result, they have to at least look at the tag in the html. Since your html file is short, so you cannot tell whether the browser start download as soon as the tag is reached, or after the whole html is ready.
If you want the browser to receive CSS files even faster, one of the options would be server push. I don’t know whether netlify support it, but for some http servers and CDN, you can add some special tags in the document head or response header (not possible for static sites), to let the server start a server push.
Another option would be service worker. However it won’t work on the first load.
However I did notice a flash of unstyled text, on first load only. However that is because of the time required for downloading font files. This is when you have to choose from flash of unstyled text, or flash of invisible text.
Thank you two for responding so quickly!
@yw662 what you mentioned about FOUT and FOIT was just what I needed, I wasn’t aware of this behavior beforehand… So after doing some research, I added font-display: block; to my @font-face for all my different font sizes and it worked!
if you’re curious you can see how it looks now: jxshooter.com
Glad to hear that and I can also confirm your text rendering behavior is now FOIT.
Congratulations!
Hey @jjwilkin,
Site’s lookin good! When I visited the bare domain, I got an SSL error. To get rid of that, I went ahead and issued you a new SSL certificate to cover the bare domain and www.
One other thing: we recommend using the www subdomain as the “primary” one, with the bare domain redirecting to that (so, opposite of what you have here): Netlify App
If most of your visitors are in the US, the configuration won’t matter a ton, but will be a substantial improvement if you’re expecting visitors from around the world. Here’s an article with more on why we recommend that:
and @yw662 thanks so much for the knowledge drop!
Thanks so much! I set the www. as the primary domain, that’s super insightful. Also, I’d just like to mention how much I appreciate the service you guys provide, keep up the great work.