最大的内容绘画是一个大盖茨比背景图像，非常慢答案

【问题标题】：Largest contentful paint is one big gatsby-background-image and very slow最大的内容绘画是一个大盖茨比背景图像，非常慢
【发布时间】：2020-11-03 15:02:09
【问题描述】：

对于那些在这个问题上磕磕绊绊想知道如何提高他们的灯塔分数的人，我发布了一个 answer on this topic on another question 并提供了许多一般提示。

我正在运行 PageSpeed 洞察，我最大的问题是最大的内容绘制，大约需要 8-10 秒。下面他们列出了我最大的内容绘画元素

Largest Contentful Paint element 1 element found
This is the largest contentful element painted within the viewport. Learn More
Element

This is the a paragraph that appears above here    
<section class="mainBgImage gbi--716926567-eDXcajFRMpQ2F1s7wNgLk1" style="background-position:center top;background-repeat:no-repeat;background-size:cover;position:relative;opacity:0.99" role="img">

这个元素是一张横跨我整个网站的背景图片。它最初是一个 1.2 MB 的 png，我使用 ...GatsbyImageSharpFluid_withWebp_noBase64 加载，最大宽度为 1950。

这是我如何渲染它的代码

    import BackgroundImage from 'gatsby-background-image';

    ...

      <BackgroundImage
        Tag="section"
        role="img"
        className='mainBgImage'
        fadeIn={false}
        // style={{objectFit: 'contain',  width: '100%' }}
        style={{
          opacity: 0.03,
          backgroundPosition: "center top",
          
        }}
        fluid={wheatImgProps}
      >
          {children}
      </BackgroundImage>

这是静态的 graphql 查询

    const data = useStaticQuery(graphql
        `query LayoutQuery {
          wheatImg: file(
            extension: {regex: "/(jpg)|(jpeg)|(png)/"},
            name: {eq: "wheat-background"}
          ) {
            childImageSharp {
              fluid(maxWidth: 1950) {
                ...GatsbyImageSharpFluid_withWebp_noBase64
              }
            }
          }
        }
        `
      )

【问题讨论】：

我们需要整个瀑布才能告诉您问题所在。它出现在 8-10 秒标记的事实相当令人担忧，您应该为任何“首屏”内容设定 2 秒的加载时间。图像是否需要很长时间（孤立地），因为它每次都被转换并且没有被缓存？如果您查看图像的瀑布（网络选项卡）是否需要很长时间才能加载（如果您将鼠标悬停在瀑布中，您会看到“停滞”或“等待 TTFB” - 这些数字中的任何一个都很大吗？
您想在 cmets 中分享您的 URL，如果我们可以在页面上运行测试/查看行为，因为关键信息不可用，您提出的许多问题将更容易回答只需查看您的源代码。
suddenlysask.com
几乎每个 webp 图像在发送第一个字节之前至少需要 300 毫秒。这表明图像总是“即时”转换而不是缓存。希望有人可以指出您如何在 Gatsby 中实现这一目标。此外，该文件的下载时间（等待后）对我来说几乎是一秒钟，不确定您的服务器位于何处，但考虑到我在 100mbps 租用线路上没有争用，804kb 似乎非常高。
@GrahamRitchie 它使用 Netlify 和 Github 托管

标签： reactjs gatsby pagespeed pagespeed-insights gatsby-image

【解决方案1】：

原来的解决方案是将我的背景图像分成 2 个。一个用于“首屏”（无需滚动即可看到），一个用于“首屏”。我还发现 image compressor website 是在减小文件大小方面最有帮助和最直接的方法之一。

然后我创建了一个绝对定位的 div，看起来像

const BGImg = ({img, className}:{img:FluidObject, className?:string}) => (
    <Img
        Tag="section"
        className={className}
        durationFadeIn={250}
          
        style={{
            opacity: 0.03,
            minWidth:"100%",
            objectFit: 'cover',
            objectPosition: "center top",
        }}
        fluid={img}
    />
)

...

<div id='layout'>
    <div id='bgImageContainer'>
        <BGImg img={above_the_fold_bg} />
        <BGImg img={below_the_fold_bg}  />
    </div>
...

样式看起来像

#bgImageContainer{
    position: absolute;
    z-index: -999;
    min-width:100%;
    min-height:100%;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
}

#layout{
    overflow: hidden;
    position: relative;
}

【讨论】：