Images rendering slow upon start up

[gh0stl0nely]

Both local and deployed version of the site has the issue of slow rendering of images. For instance,

This seems to be very bad UX - we don't want user just see images like that.

Solution (to this specific problem): Created a Render a Spinner image while waiting for the main image to load.

Global problem => This is more like a local solution only as it only helps to mask the slow rendering of the main images... You guys can also notice that even while the main images are loading (showing Spinner instead), you cannot click nor navigate to other pages at all. I believe this probably due to the fact that the SVG is quite high in term of quality so browser takes a while to render it?

If you guys want to test this out, pull the branch knguyen/slow-img-load. Anyone has any suggestion on how tackle this problem?

[harshvchawla]

wasnt gatsby supposed to make site load fast? is there some configuration (compilation stage?) that we are missing? (like difference in development vs production build)

[gh0stl0nely]

yeah that was exactly what I was thinking lol

[rishFilet]

@gh0stl0nely @harshvchawla ummm this might also be my doing lol. I had a branch to fix/work on this. rishfilet/preloading_images_fonts is the branch its on. I am back on working today and tomorrow on it .Will update with what i find but is this happening on the latest master?

[rishFilet]

Ok so this kind of fixed in the last PR i just did, see that for more info (rishfilet/preloading_images_fonts). It happened to be the SVGs not being optimised for loading. However this section (timeline) still seems to be the issue with loading times

[rishFilet]

This is fixed now by changing the images in timeline section to PNGs instead of SVGs. Ideally SVGs should be used for graphics and not for regular images.

[gh0stl0nely]

Using PNG will reduce the image's quality. We will need to come up with a workaround for optimizing SVG loading time, or think of a way to improve PNG image's quality.

[rishFilet]

i think this is because we are using pngs exported directly from figma. I will test with the original images

[rishFilet]

Ok this is fully fixed now by using gatsby-image plugin and the original images. Ill update the PR with the commit and add some details in the wiki on how to do this. Ideally we should call all NonSVGs through this component in ImageOptimise.js