使用gatsby-image加载图像时速度较慢

Question

我有这个网站：https://zeitouni.herokuapp.com，它有相当多的高质量的图像。当用户第一次加载网站时，gatsby-image需要花费很长时间来加载大部分图像。该项目的存储库在此处：https://github.com/EliranGooner/zeitouni

我怀疑的第一件事是图像的大小。我不确定我应该努力达到什么大小，以使图像加载更快。这个问题也可能是我用来获取图像的组件。这是我在Spectrum上找到的一种方法，建议使用它来解决无法使用Graphql对查询进行插值的问题。该组件如下所示：

const Image = ({ imgName, ...props }) => (
  <StaticQuery
    query={graphql`
      query {
        allImageSharp {
          edges {
            node {
              fluid(maxWidth: 1200, quality: 100) {
                ...GatsbyImageSharpFluid
                originalName
                presentationWidth
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.allImageSharp.edges.find(
        edge => edge.node.fluid.originalName === imgName
      )
      if (!image) {
        return null
      }
      return <Img fluid={image.node.fluid} {...props} />
    }}
  />
)

Answer 1

您的hero组件正在以大型png格式加载徽标，而无需利用您的图像组件并为不同的显示创建不同的图像大小。

请参阅：https://github.com/EliranGooner/zeitouni/blob/master/src/components/hero.js#L5