#CSS in css file instead of Js

61 messages · Page 1 of 1 (latest)

grizzled ocean
#

Hi, is it possible to get the css in .css file, because on first load, people see an unstyled page on the first load.

brisk blade
#

Styles are put in a css file. Unless you have a very old or custom angular configuration.

grizzled ocean
#

When i'm running in dev:ssr, I see the styles.css

#

but once builded in production mode, it doesn't exist

#

this is production

#

this is dev, both angular universal

brisk blade
#

Post that as text. My guess is that you have a link to the css file at the end of line 13.

grizzled ocean
# 
<!doctype html>
<html lang="nl" class="pxp-root">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap" rel="stylesheet">
  <base href="/">
  <title>Vind vrijwilligerswerk | Vlaams Steunpunt Vrijwilligerswerk vzw</title>
  <!--CONFIG-->

</head>

<body>
  <app-root></app-root>
  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpQteDUzJ7ulrp-_6B499KRROrvoJUgVU"></script> -->
</body>
</html>
#

not set by myself

brisk blade
#

The code you post doesn't match the screenshot you posted before. Post the generated production html file, as text.

grizzled ocean
brisk blade
#

See :

<link rel="stylesheet" href="styles.49221ad1637b4bd4.css" media="print" onload="this.media='all'">

So a css file is being generated and used.

grizzled ocean
#

but why does it not load before js

#

idk

#

first second you can get this

grizzled ocean
brisk blade
#

Your initial web page content seems to be generated on the server-side. That has been done, presumably, to be able to start displaying information as fast as possible, without having to wait for the whle Angular application to be downloaded and start.
This initial HTML relies on a CSS file to be displayed in a user-friendly way. But

  • this CSS file is quite huge: 602kB
  • this css file is transferred without and compression
    So obviously, it takes some time to load, and the browser thus displays the html without formatting during that time.
grizzled ocean
#

Is that the main problem?

#

That the CSS file is huge

brisk blade
#

Having the browser display something before the CSS file has been loaded is, IMHO, a good thing. It allows people with a really bad network to at least be able to see something while the styles are being loaded. But yes, you need to enable compression of your assets on the server, and you need to reduce the size of the CSS. Just looking quickly inside, it seems that it contains the bootstrap CSS twice.

grizzled ocean
#

Is one of the first things I should have done

grizzled ocean
#

Indeed, bootstrap twice

brisk blade
#

You have other problems BTW: the whole page is 10MB. It has 4 images that are more than 1MB in size: they appear to be pictures of people that are displayed at a size much smaller than the original size, and the pictures are in PNG format, which is not a suitable format for photos. Using JPG would be a lot more efficient.

grizzled ocean
brisk blade
#

I would instruct the people who provide those images to store them in the right format to begin with, and with the right dimensions. But if that's not really possible, there are services that exist that will return the images with the best format and dimensions based on parameters you pass and headers passed by the browser. See https://angular.io/guide/image-directive (click the various links to CDNs or image resizing services)

grizzled ocean
#

thank you for your advices and help

#

I did the changes, compression, lower the css, but still same issue

#

unless the images cause the problem

brisk blade
#

As I said before, it's not a problem, it's a feature.

grizzled ocean
#

What exactly cause it that the style isn't applied on the first site load

#

bcs compressed the css is now 45kb

brisk blade
#

Because, I guess, whatever the size it has, it still takes some time to load it.

grizzled ocean
#

without any image

#

straight out of cache

brisk blade
#

Not here. I see it on the first load, but once it's in the cache, refreshing the page doesn't show any flickering from unstyled to styled.

grizzled ocean
#

load with ctrl+shift r

brisk blade
#

That tells the browser to ignore the cache.

grizzled ocean
#

Yes

#

Exactly what i'm talking about

#

On first load

brisk blade
#

You said "straight out of cache". If you use Ctrl-shift-R, the styles don't come "straight out of the cache". They're reloaded from the server, and that takes some time.

grizzled ocean
#

I mean the server side cache

#

without waiting that waiting time

#

That page is for example cached on server side, so it just straight away give all it needs

#

Kinda ugly for new users with slower internet speed to first see unstyled website

#

seems that .css is loaded in one of the latest things, after al js

#

idk if that matters

brisk blade
#

If that bothers you so much, google for "Flash Of Unstyled Content", and apply one of the tricks to get rid of it.

grizzled ocean
#

such things you don't want