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

使用gatsby-image图像加载缓慢

1 个答案: