3

我有这个网站：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} />
    }}
  />
)
4

1 回答 1

1

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

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

于 2020-04-02T07:25:54.317 回答