Largest contentful paint is one big gatsby-background-image and very slow

Question

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.

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

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.

This is the code for how I render it

    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>

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

We need the whole waterfall to be able to tell you what the problem is. The fact it is appearing at the 8-10 second mark is rather alarming, you should be aiming for 2 seconds load time for any "above the fold" content. Is the image taking a long time (in isolation) as it is being converted every time and not cached? If you look at your waterfall (network tab) for the image does it take a long time to load in (if you hover over it in the waterfall you will see "stalled" or "waiting TTFB" - is either of these numbers large? — GrahamTheDev, Jul 14 '20 at 10:00
do you want to share your URL in the comments, a lot of the questions you are asking will be much easier to answer if we can run tests on the page / see behaviour as key information is not available just from viewing your source code. — GrahamTheDev, Jul 14 '20 at 10:02
Nearly every webp image is taking at least 300ms before it sends the first byte. This points to the images always being converted "on the fly" rather than cached. Hopefully someone can point you how to achieve this in Gatsby. Also the download time (after waiting) for that file was nearly a second for me, not sure where your server is located but for 804kb that seems very high considering I am on a 100mbps leased line with no contention. — GrahamTheDev, Jul 14 '20 at 10:35
@GrahamRitchie So a lot of the problem seems to be this third party iframe that I load from `//rcm-na.amazon-adsystem.com/` . I preconnect to all these amazon things for this widget `"https://ir-ca.amazon-adsystem.com"`, `"https://fls-na.amazon-adsystem.com"`, `"https://images-na.ssl-images-amazon.com"`, `"https://ws-na.assoc-amazon.com"`, but removing the amazon ads boosts my score about 20 points right now. I'd like to keep the ads if I can get them not to affect my pagespeed though. — Sam, Jul 17 '20 at 21:16

score 0 · Accepted Answer · answered Aug 10 '20 at 01:34

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.

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

with styling that looked like

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

Largest contentful paint is one big gatsby-background-image and very slow

1 Answers1

Linked