Медленная загрузка изображения с помощью gatsby-image - PullRequest
Новая
       18

Медленная загрузка изображения с помощью gatsby-image

1 голос
/ 01 апреля 2020

У меня есть этот сайт: https://zeitouni.herokuapp.com, на котором довольно много изображений в высоком качестве. Когда пользователь впервые загружает веб-сайт, gatsby-image загружает большую часть изображений вечно. репо проекта находится здесь: https://github.com/EliranGooner/zeitouni

Первое, что я подозреваю в этой проблеме, это размеры изображения. Я не уверен, к каким размерам я должен стремиться, чтобы ускорить загрузку изображения. Проблема также может быть в компоненте, который я использую для получения изображений. Это метод, который я нашел на Спектруме, который был предложен для того, чтобы обойти невозможность интерполировать запросы с 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} />
    }}
  />
)

1 Ответ

0 голосов
/ 02 апреля 2020

Ваш компонент hero загружает lo go в большом формате png, не используя компонент изображения и создавая изображения различных размеров для разных дисплеев.

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

...