Poor performance with Gatsby image

🆘 Support
1

Is anyone else having issues with performance on lighthouse when using the datocms plugin for gatsby and gatsby image?

Running this page, for example, https://www.stayatbase.com/hostels/base-backpackers-sydney/ though lighthouse yields poor results relating to images. Lazy loading appears not to be working, and lighthouse does not seem to understand the size of images.

Here is an example GQL query

roomGallery {
        alt
        caption: title
        src: url
        fluid(
          maxWidth: 500
          imgixParams: {
            fm: "jpg"
            fit: "crop"
            crop: "faces"
            auto: "format"
            q: 50
            w: "500"
          }
        ) {
          srcSet
          ...GatsbyDatoCmsFluid
        }

This is an example of what the gatsby img compnent looks like

<Img
          fluid={obj.fluid}
          alt={obj.alt}
          loading="lazy"
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            overflow: 'hidden',
            zIndex: 1
          }}
        />

If i use a similar setup with locally hosed images i seem to have no problems. Can anyone lend a hand? Thanks

2

@shannon1 sorry for the delay! Did you solve the issue? One thing’s for sure, if lazy loading is not working is related to gatsby-image, not our integration plugin! We just return the data for the fluid GraphQL query. What does it return?