Gatsby: CSS Loading Delay on 2.4.5

[eecopa]

Description

CSS delay when loading the page

Steps to reproduce

Live demo
http://visionmonocroma.com/
Repo
https://github.com/eecopa/personal-website

Expected result

A clean first load

Actual result

Environment

System:
    OS: macOS 10.14.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19
    gatsby-image: ^2.0.15 => 2.0.15
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.11 => 2.0.11
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^2.0.13 => 2.0.13
    gatsby-plugin-styled-components: ^3.0.3 => 3.0.3
    gatsby-source-filesystem: ^2.0.4 => 2.0.4
    gatsby-transformer-sharp: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    gatsby-cli: 2.4.5

[dantehemerson]

Where are your deploying your site?
I deploy your site in Netlify here :
https://stupefied-almeida-0b0429.netlify.com/
and it works well.

[eecopa]

Where are your deploying your site?

I'm deploying it to a static web host provider here in Argentina. Didn't think about uploading it to another provider.

[dantehemerson]

You could re-deploy it, cleaning cache if possible.

[eecopa]

Will try it out!

[jonniebigodes]

@eecopa on the argentinean host you're using, open your site open the developer tools and go to network tab, if nothing is shown, refresh and check out the timeline and also the "waterfall", click on it to order it and see what's holding up your site.

[eecopa]

@eecopa on the argentinean host you're using, open your site open the developer tools and go to network tab, if nothing is shown, refresh and check out the timeline and also the "waterfall", click on it to order it and see what's holding up your site.

Sorry for the late response, but I've been busy with college stuff. I tried this today but I'm still having the same issue. I took a look at the network tab in the dev tool but I could not see what's slowing down the website load. Tomorrow I'll have the time to sit down and take a deeper look at this.

[wlockiv]

@eecopa I ran into this issue as well, and it seemed to have more to do with the use of styled-components. What helped a lot was inlining (styles={{ ... }}) position, size, and color, then deferring other non-critical stuff (like :hover) to styled-components. I actually wound up moving all of my styled-components to CSS Modules as a result of this. :\

Would you try inlining some of the styles and see how that affects your load?

[wlockiv]

With styled-components

Without styled-components

[LekoArts]

@wlockiv Do you have a publicly available repo to this site? As I still don't believe that it has something to do with styled-components. I use it on multiple sites and don't have these issues.

[wlockiv]

@LekoArts Yup, for the time being at least.

Site
Repo

This is my first Gatsby (or even React) project, so it would not at all surprise me if something else was the issue. Reactstrap has been a trouble maker as well (see discord). Additionally, my network connection is abismal so that could be my issue.

Would love some feedback on wonky design patterns, etc.

[LekoArts]

Yup, you forgot the gatsby-plugin-styled-components entry in your gatsby-config.js file

[wlockiv]

@LekoArts I'm not longer using styled-components. I removed them several commits ago.

Here's the config from when I was using styled-components: Link

And the deploy preview: Link

[ljaniszewski]

I happen to have similar issue, but concerning FontAwesome icons. The page loads and the icons are all wrong sizes, 100-200 ms later they receive correct styling. Have no clue how to fix this.

[wlockiv]

I happen to have similar issue, but concerning FontAwesome icons. The page loads and the icons are all wrong sizes, 100-200 ms later they receive correct styling. Have no clue how to fix this.

Have you tried passing sizes in the style prop? I've also had much better performance with CSS Components.

[ljaniszewski]

Thanks for the answer. Yes, I tried with style prop, and also built in FontAwesome component size property, no luck. My guess is that the CSS is somehow bundled in different parts and loaded at different times? I am an android dev and I am just starting in web, so I could be wrong. But if that's the case - is there any way to tell gatsby to pack icon styling somewhere in the first css batch? I am going to try css components

[ljaniszewski]

Tried styled components, absolutely no difference.

[wlockiv]

Tried styled components, absolutely no difference.

I've had more trouble with styling delays on Styled-Components. I actually meant CSS Modules before, which is different from styled-components. Gatsby ships with CSS Modules. Docs. Sorry for the confusion.

[ljaniszewski]

Ok, I digged some more and discovered that the CSS is actually properly generated and all the classes are available in build HTML. So the issue probably lies somewhere around the fontawesome icon itself. The icon has the size set as font-size: 3.7em

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[IanWitham]

I happen to have similar issue, but concerning FontAwesome icons. The page loads and the icons are all wrong sizes, 100-200 ms later they receive correct styling. Have no clue how to fix this.

I have the same issue with FontAwesome svg icons. Doesn't happen in develop mode, but does happen in a production build. I think the css must be wrong in the static "pre-hydration" page.