最大的令人满意的绘画是一张大盖茨比背景图像，而且速度很慢 [英] Largest contentful paint is one big gatsby-background-image and very slow

问题描述

对于那些不知道如何提高灯塔分数的人，我在另一个问题上发布了关于该主题的答案，其中包含许多常规提示.

For those stumbling on this question wondering how to improve their lighthouse score in general, I posted an answer on this topic on another question with lots of general tips.

我正在运行PageSpeed见解，而我最大的问题是最大的内容丰富的绘画，大约需要8到10秒钟.他们在下面列出了我最大的满意的绘画元素

I'm running PageSpeed insights and my biggest problem is the largest contentful paint, at about 8-10 seconds. Below they list my largest contentful paint element

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">

此元素是一张图片，其背景覆盖了我的整个网站.它最初是我使用 ... GatsbyImageSharpFluid_withWebp_noBase64 加载的1.2 MB png，最大宽度为1950.

This element is an image that spans my whole website in the background. It was originally a 1.2 MB png that i load using ...GatsbyImageSharpFluid_withWebp_noBase64 with a maxWidth of 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查询

And this is the static graphql query

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

推荐答案

原来的解决方案是将我的背景图像拆分为2.一个用于折叠以上"(无需滚动即可看到)，另一个用于下方".折叠".我还发现这个图像压缩器网站在减少文件大小方面是最有用和最直接的方法之一

Turns out the solution was to split my background image into 2. One for "above the fold"(Whats visible without scrolling) and one for "below the fold". I also found this image compressor website to be one of the most helpful and straight forward when it came to reducing my file size.

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

I then created an absolutely positioned div which looked like

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;
}

这篇关于最大的令人满意的绘画是一张大盖茨比背景图像，而且速度很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！