reactjs - 最大のコンテンツ ペイントは 1 つの大きな gatsby-background-image であり、非常に遅い

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

この要素は、バックグラウンドで私のウェブサイト全体にまたがる画像です。...GatsbyImageSharpFluid_withWebp_noBase64これは元々、 1950 の maxWidth を使用してロードした 1.2 MB の pngでした。

これは、レンダリング方法のコードです

    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
              }
            }
          }
        }
        `
      )