Gatsby: Querying a ton of images and my page is loading super slow on first load. What am I doing wrong?

[daydream05]

Summary

I'm trying to do something similar to the showcase page where I only want to show the first 12, then load more later. I was able to accomplish this, however, it seems that it's still loading everything everything on the background.

After it loaded the first time, going back to the page is blazing fast.

TLDR: I'm querying a couple of contentful nodes and combining the images from each node but my page is super slow on first load. What am I doing wrong?

Relevant information

Heres a rough implementation of my code:

if (typeof window !== `undefined`) {
  window.imagesToShow = 12
}

const AllImages = (props) => {
  let imagesToShow = 12

  // copied this from gatsbygram
  if (typeof window !== `undefined`) {
    imagesToShow = window.imagesToShow
  }

 const [count, setCount] = useState(imagesToShow)

  useEffect(() => {
    return () => {
      window.postsToShow = count
    }
  })

  const { allContentfulAlbum } = props.data

  // this how im combining the images
 // could this be the cause of it? but how else I can grab all the images?
  const images = allContentfulAlbum.edges.map(({ node }) => {
    return node.images
  }).reduce((prev, curr) => {
    return prev.concat(curr)
  })

  const shownImages = images.slice(0, count)

  return (
    <>
      {shownImages.map((image, index) => {
          return (
            <div
              key={image.id}
              className="grid-item"
              style={{ cursor: `pointer` }}
              onClick={(e) => {
                e.preventDefault()
                onImageClick(index)
              }}
            >
              {image && <Img fixed={image.fixed} alt={image.title} />}
            </div>
          )
        })}
      {
        count < images.length  &&
          <Button
            onClick={() => setCount(count + 12)}
            css={css`
            margin: 2rem auto;
          `}
          >Load more</Button>
      }
    <>
  )
 }

Heres: what the query looks like:

query {
    allContentfulAlbum {
      edges {
        node {
          title
          images {
            title
            id
            fixed(quality: 80, width: 300) {
              ...GatsbyContentfulFixed_withWebp
            }
            fluid(quality: 100, maxWidth: 900) {
              ...GatsbyContentfulFluid_withWebp
            }
          }
        }
      }
    }
  }

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[daydream05]

I might have figured out the issue. I used the query mentioned above on the other pages and each page took forever to load. So is there a limit to how many you can query, specifically with images? But shouldn't this not matter since the query is server side and it should only affect build time, not load time?

[daydream05]

To those who might stumble upon this in the future:

I MIGHT HAVE FOUND THE CULPRIT
...GatsbyContentfulFixed_withWebp

I've been using the fragments that includes the blur up effect since the beginning of time w/o really understanding how resource intensive it is.

The blur up effect uses base64 which i just learned is 30% larger than normal src image. So i'm imagining 300 base64 images would have been to much even for gatsby to handle.

Good thing there's an easy fix:
..GatsbyContentfulFixed_withWebp_noBase64