Bad hero LCP lighthouse score

[alexanderfountain]

Google lighthouse new scoring metrics have made it very hard to use images as the LCP above the fold. There is a new plugin to address this for gatsby-images here: https://www.npmjs.com/package/@wardpeet/gatsby-image-nextgen

Is there anyway for gatsby-background-image to do something similar so we can continue to use as our LCP without getting horrible scores?

[timhagn]

Hi @alexanderfountain,

would you have more info on

Google lighthouse new scoring metrics

or suchlike?

Going through the -nextgen plugin didn't enlighten me much about it (and it's been quite a long time since I really dived into Web-Dev ; ).

Best,

Tim.

[KornelijusGlinskas]

It increases the Largest Contentful Paint dramatically. There is an open thread regarding that: gatsbyjs/gatsby#24332

[timhagn]

Hey @KornelijusGlinskas,

thanks for helping me out there : )! Have meanwhile looked into it (and the new image plugin / plugin mentioned above) & that's quite a heavy undertaking oO... There doesn't seem an "easy way" like with the new image plugin from @wardpeet using the native image enhancements of the browser, but I'm looking into Elements, so stay tuned % )!

Best,

Tim.

[github-actions]

Hi there!
As @timhagn momentarily is the main contributor to this package, this issue
has been automatically marked as stale because it has not had
any recent activity.
It will be closed if no further activity occurs, though we're open to
suggestions on how to get more maintainers!
Thank you for your contributions : )!

[mallettejp]

FWIW, I was able to lower my LCP dramatically by serving smaller images to mobile devices through more diligent art-direction. Not as good a performance as in Lighthouse v5, but I'm back in the low-90's for performance, where previously I had dropped to around 65 after the update to v6.

[alexanderfountain]

@mallettejp Could you give your art direction example in here? I have been trying different techniques, but still not getting good results on my mobile tests. For some reason desktop gets 100...

[peabodys]

@alexanderfountain I spent a while working out a happy medium that worked for me between export quality of the photo in Photoshop and the quality setting on the GraphQL query, but I just created a smaller, cropped version of my hero image and served it to all screens under 500px wide.

The only difference I had previously was not including the first query for hero_mobile.jpg.

   graphql` {
      mobile: file(relativePath: { eq: "backgrounds/hero_mobile.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 500, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
      portrait: file(relativePath: { eq: "backgrounds/hero_test.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1600, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
      landscape: file(relativePath: { eq: "backgrounds/hero_landscape.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 6000, quality: 90) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }`


  const sources = [
    data.mobile.childImageSharp.fluid,
    {
      ...data.portrait.childImageSharp.fluid,
      media: `(min-width: 501px)`,
    },
    {
      ...data.landscape.childImageSharp.fluid,
      media: `(min-width: 1601px)`,
    },
  ]

Are you possibly using NetlifyCMS on your project as well? I gained a pretty big boost from disabling netlify-identity on the frontend as described in the gatsby-plugin-netlify-cms docs, since I was only using it to log into the CMS.

[alexanderfountain]

Ahhh thanks for the snippet and suggestion! Snippet seems to be about the same as I'm doing, and no I'm not using netlifyCMS. Don't get why my LCP on mobile is 5s, and 0.8 on desktop...

Here is a link if anyone sees something glaring.

https://www.prescriptive.solutions/

[talohana]

Any updates regarding this? I'm still getting performance hit by lighthouse on my header image