Самая большая содержательная краска - это одно большое фоновое изображение Гэтсби и очень медленное

Question

Я использую PageSpeed ​​insights, и моя самая большая проблема - это самая большая содержательная отрисовка, примерно за 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">

Этот элемент представляет собой изображение, которое охватывает весь мой веб-сайт в фоновом режиме. Изначально это был png размером 1,2 МБ, который я загружал с использованием ...GatsbyImageSharpFluid_withWebp_noBase64 с maxWidth 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>

И это запрос stati c 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
              }
            }
          }
        }
        `
      )

Answer 1

Оказывается, решение заключалось в том, чтобы разделить мое фоновое изображение на 2. Одно для «выше сгиба» (что видно без прокрутки) и одно для «ниже сгиба». Я также обнаружил, что этот веб-сайт компрессора изображений является одним из самых полезных и простых, когда дело дошло до уменьшения размера моего файла.

Затем я создал абсолютно позиционированный 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;
}