Gatsby: Loading performance? how to order the files loading to client?

[PolGuixe]

I am building my first Gatsby site and I am experiencing some slow loading in production. The CSS seems slow to load.

The site: http://same-writer.surge.sh/
The repo is here: https://github.com/Zetoff/portfolio/tree/feature/project-pages

Is there a way to load the CSS first? or show a loading component in the mean time?

[markmichon]

Aside from the images (which could be optimized, as they are huge), it looks like the weird flash of unstyled content is limited to your navbar component. Perhaps it's something with material-ui components? The rest of the components and their styles are loading immediately (within 400ms at least in chrome's network profiler)

[PolGuixe]

I'll try to investigate why the Appbar's CSS takes so long to generate.

Yeap, images need to be optimized ;)

[cr101]

@PolGuixe You might need to use sheetsRegistry as per the Material-UI documentation

We must provide to the page the needed style. It's important that we provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker.

[PolGuixe]

I'll try to implement it today! I'll posts the results.

[cr101]

@PolGuixe Please do. I'm also planning to use Material-UI v1.0 on a new project.
I noticed that Material-UI v1.0.0-beta.8 is out so you might want to upgrade as well.

[PolGuixe]

@cr101 I've used Material-UI pre v.1 in few projects. This is the first time I am using the new v.1. the API has changed a lot and performance-wise seems a lot better.

I'll upgrade to latest beta as well.

[cr101]

There is also starter examples for CRA and NextJS which might help.
It would be great to also have a Material-UI v1 example project for Gatsby.

[PolGuixe]

@cr101 are you familiar with Gatsby's SSR API?

I need to use replaceRenderer, I don't understand when this is executed? on every page?

I am setting the MuiThemeProvider in the layout component.

I am going to try to export the replaceRenderer from there.

[PolGuixe]

I have implemented it.... not sure whether it works or not... I need more understanding of Gatsby's API or more testing 😅

@cr101 would you mind having a look https://github.com/Zetoff/portfolio/pull/6

It is hosted here: http://abounding-zephyr.surge.sh/

[PolGuixe]

Definitely, it is not working. The functions are not executed by Gatsby.

[cr101]

@PolGuixe I had a look but can't figure it out sorry.

Has anyone else used Material-UI v1-beta with Gatsby?

[PolGuixe]

@wzrdzl I see you did the JSS plugin. Can you throw some light on this issue? Thanks 😄

[sebastienfi]

Here is your optimized image.
optimizilla.zip

Do you guys want to PR an example site with Material-UI ?

[PolGuixe]

@sebastienfi I want it to work properly. If it does then we could add it as an example. 😉

[PolGuixe]

@KyleAMathews could you help us, please?

How should I access the replaceRenderer and the onInitialClientRender API?

[KyleAMathews]

• https://www.gatsbyjs.org/docs/ssr-apis/#replaceRenderer
• https://www.gatsbyjs.org/docs/browser-apis/#onInitialClientRender

[PolGuixe]

@KyleAMathews Where should I export the functions from from?

e.g.

• project/src/replaceRenderer.js
• project/src/onInitialClientRender.js

can it be exported from project/src/layouts/index.js?

[markmichon]

As far as I understand it, SSR APIs only run from gatsby-ssr.js, and browser only run in gatsby-browser, etc.

[tinrab]

Any updates on this? I'm having the same problem with FOUC on https://outcrawl.com/. It's using material-ui.

Edit: Never mind, I managed to solve it.

[PolGuixe]

I'll try to have a look at it this week.

[sogasg]

I also had problems getting Material-UI v1 to work with Gatsby in production.

However, after installing this plugin: https://github.com/porteta/gatsby-plugin-material-ui and adding it to the gatsby-config.js ({resolve: 'gatsby-plugin-material-ui' },) everything works.

[mhyrr]

@tinrab What was your solution?

I'm having a similar issue when using Styled Components. It looks like the Components built using this library load later. Example http://justadream.co/

[tinrab]

@mhyrr This works for material-ui: use gatsby-plugin-jss plugin, then set sheetsManager to an empty map on MuiThemeProvider, like here. Or what @sogasg suggested.

[migs540]

@mhyrr I have the same problem as I see on your site.

What we see on the screen:

homepage loads (with a css keyframe transition) then after a second or so the css keyframe transition is repeated (it shouldn't repeat) resulting in a kind of flash like on your site.

What Developer tools, network shows:

The first keyframe transition (remembering we should only see this once) appears when layouts-index, pages-index, path-index, app and common js scripts run (and the html for the index page is loaded).

Then we wait a second or so (slowed down using 3G slow emulation) and see the rest of the gatsby site loading and immediately the keyframe is triggered again:

path---otherpages
component---otherpages
etc.

These have an initiator of bootstrap and for some reason at the same time the keyframe associated with index.js is triggered to make the animation appear to users for the second time. It's a clunky user experience and I imagine it goes away if the keyframe is removed?

Any ideas on how to get keyframes running just the once? I don't think there's anything wrong with the css, for instance: I gzipped all my js files (meaning they didn't run) and with just html it works (just the once as intended).

React is designed to re-render just parts of the screen / update just parts of the dom - any idea why these keyframes are being triggered twice?

[jonathan-chin]

@sogasg this fix was exactly what I was looking for. just had to add one line to gatsby-config and it started working.

[oliviertassinari]

If this can help, Material-UI host a fully functional example with Gatsby.

[oliviertassinari]

@KyleAMathews I think that we can close the issue.

[mpolinowski]

@oliviertassinari Thank you for the example for Material-UI!

It works for me in development but running into issues with build.

I cloned the repo, run npm install (all @latest ) and gatsby build.

error Building static HTML for pages failed

10 | 'use strict';var m=require("object-assign"),n=require("fbjs/lib/emptyObject"),p=require("fbjs/lib/emptyFunction"),q="function"===typeof Symbol&&Symbol["
for"],r=q?Symbol["for"]("react.element"):60103,t=q?Symbol["for"]("react.call"):60104,u=q?Symbol["for"]("react.return"):60105,v=q?Symbol["for"]("react.portal"):
60106,w=q?Symbol["for"]("react.fragment"):60107,x="function"===typeof Symbol&&Symbol.iterator;
> 11 | function y(a){for(var b=arguments.length-1,e="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+
a,c=0;c<b;c++)e+="\x26args[]\x3d"+encodeURIComponent(arguments[c+1]);b=Error(e+" for the full message or use the non-minified dev environment for full errors a
nd additional helpful warnings.");b.name="Invariant Violation";b.framesToPop=1;throw b;}
     |
                                                                  ^

WebpackError: Minified React error #143; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=143 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

[oliviertassinari]

@mpolinowski I can't reproduce the issue.

success Building CSS — 6.079 s
success Building production JavaScript bundles — 13.326 s
success Building static HTML for pages — 4.396 s

[mpolinowski]

@oliviertassinari

I got your repository to work by first installing Gatsby and then adding react/react-dom @latest. But this is overwriting Gatsby's react/react-dom v15.6 dependency and seems to cause a lot of issues on my actual project.

I tried to just install Gatsby (with react/react-dom v15.6) and use your solution with it - but no luck.

Also, I noticed that there is an official gatsby-plugin-jss that could substitute the jss and react-jss dependency.

I will have to look more into that issue.