-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Images rendering slow upon start up #35
Comments
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) |
yeah that was exactly what I was thinking lol |
@gh0stl0nely @harshvchawla ummm this might also be my doing lol. I had a branch to fix/work on this. |
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 |
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. |
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. |
i think this is because we are using pngs exported directly from figma. I will test with the original images |
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 |
Both local and deployed version of the site has the issue of slow rendering of images. For instance,
![Untitled_ Sep 28, 2020 9_50 PM](https://user-images.githubusercontent.com/23471813/94503609-d8631a00-01d4-11eb-867e-c3c334a86c14.gif)
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.
![Untitled_ Sep 28, 2020 9_53 PM](https://user-images.githubusercontent.com/23471813/94504208-3e03d600-01d6-11eb-8007-fe6ccbe872e9.gif)
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?The text was updated successfully, but these errors were encountered: