GatsbyJS：预加载关键标头图片

Question

我的网站出现问题，我的 above-the-fold 标头图片出现得太晚了，这让网站感觉很慢。该站点是使用 GatsbyJS 构建的，我也在其中使用了 Gatsby Image 插件。我试过 rel="preload as="image" 但这似乎没有任何区别：

<Img
          fluid={
            wpgraphql.imageFile.childImageSharp.fluid
          }
          id="hero__image"
          style={{
            position: "initial"
          }}
          rel="preload"
          as="image"
        />

阅读 Gatbsy 图像文档后，我发现 loading="eager" 也可以有所作为。因此，我已尝试添加 loading="eager"，但我的标头图片仍然是瀑布流中最后发现的内容之一。

如何使我的标头图片加载临界并在我的瀑布流中更早出现？

Answer 1

Gatsby 图像在 src 中使用低质量预览图像并延迟从该预览图像到全尺寸图像的切换，直到 Gatsby 在客户端初始化（这发生在 React hydrates 之后）。出于这个原因，它永远不会特别适合首屏内容。我建议使用直接从您现在的查询返回的 srcSet 数据：

<img
  srcSet={wpgraphql.imageFile.childImageSharp.fluid.srcSet}
  alt=""
  loading="eager"
/>

在这里您可以设置样式以匹配您想要的输出。

GatsbyJS：预加载关键标头图片

GatsbyJS: Preload critical masthead image

image

preload

reactjs

gatsby

gatsby-image