search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.32k forks source link

Working with inline SVGs and GSAP #24787

Closed isengartz closed 4 years ago

isengartz commented 4 years ago

Summary

Hello I created a very basic gsap svg animation in my gatsby website. As I cant use the IDs to animate the svg elements like vanilla JS and I have to use Ref's, I cant use the svg with import and Instead had to copy the whole svg code inline in the render function of the component.

After I deployed I checked that the lighthouse report from gatsby cloud was kinda low for a page with a single component. I run the pagespeed insights report and it returns "Error Largest Contentful Paint" ( https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbuild-a506f8d4-7779-4b7a-b47a-7ee20154fc45.gtsb.io%2F&hl=en ) which I guess came from the 1300 lines of SVG.

So I did the below things:

  1. I removed the svg elements that was static ( didnt need them for animations ) from the main component and add them as child components
  2. Used React.memo() as HOC for the main component
  3. Used @loadable/component for the main component
  4. Used gatsby-plugin-loadable-components-ssr & gatsby-plugin-offline using the option: precachePages: ['/']

Nothing of that fixed the error.

So as there are some insane things that Gatsby does for optimization and especially for media, my question is if there is something I can do for the inline svgs. I already read about https://www.gatsbyjs.org/packages/gatsby-plugin-react-svg-loader/ but I dont think that helps in this case as I still cant use the import functionality cause of the Refs ( or maybe Im wrong ? ).

Relevant information

Component url: https://github.com/isengartz/gatsby-portfolio/blob/master/src/components/layout/SvgHeader/SvgHeader.js

Site url: https://build-a506f8d4-7779-4b7a-b47a-7ee20154fc45.gtsb.io/

LekoArts commented 4 years ago

Thank you for opening this!

This isn't something that Gatsby can fix for you or something that is specific to Gatsby. If you reference this isuse https://github.com/gatsbyjs/gatsby/issues/24332 and this talk about LCP https://www.youtube.com/watch?v=diAc65p15ag you'll see that the culprit is your animation itself. These information will give you a better understanding how that score comes to play, it isn't unexpected.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!