https://stackoverflow.com/questions/78523813/blured-placeholder-images-ruining-my-performance-in-next-js-14

I am building my first next js 14 website, its going well. However I am having trouble with slow speeds generating blur URLs for my images. Initial page load is like 4 seconds if there's a large gallery.

This part of the code is taking quite a few seconds to process, so the page hangs for a while before loading in.
 

if (data?.gallerySingle) {
  const gallerySingleUrl = urlFor(data.gallerySingle).url(); data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl);
}

What would be a better way to generate the blur URLs? Should I do it on the client side instead? Or can you see any issues with the code below?
 

async function getPageData(slug: string) {
  const query = ` *[_type == "fleet" && slug.current == '${slug}'] {
    "currentSlug": slug.current,
    title, mainImage, threedVideoUrl,
    "gallerySingle": gallerySingle.asset->{ _id, url, metadata { dimensions { width, height } } },
  ]}[0]`; 

  const data = await client.fetch(query); if (data?.gallerySingle) { const gallerySingleUrl = urlFor(data.gallerySingle).url(); 

  data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl); } return data;
}

Using: https://plaiceholder.co/ to generate the base64 blur data Thank you!

Anyone got any ideas on what I'm doing wrong haha. First time using next js!

Edited May 24, 20242 yr by Benn_Kingy
added code example

Instead of generating blur URLs on the fly, you can pre-generate them during the build time. This way, the blur data is already available when the page is requested.

// Script to generate blur data and store it
const generateBlurData = async () => {
  const allImages = await client.fetch(`*[_type == "fleet"]{..., "gallerySingle": gallerySingle.asset->{url}}`);
  const updatedImages = await Promise.all(allImages.map(async image => {
    const blurDataURL = await getBase64Blur(image.gallerySingle.url);
    return { ...image, gallerySingle: { ...image.gallerySingle, blurDataURL } };
  }));
  // Save updatedImages to a JSON file or update your CMS with blurDataURL
};

generateBlurData();

In your next.js page fetch this data:

async function getPageData(slug) {
  const query = `*[_type == "fleet" && slug.current == '${slug}']{
    "currentSlug": slug.current,
    title,
    mainImage,
    threedVideoUrl,
    "gallerySingle": gallerySingle.asset->{_id, url, metadata { dimensions { width, height }, blurDataURL }},
  }[0]`;

  const data = await client.fetch(query);
  return data;
}

Let us know if this helps.

Why do you need blur? What is the benefit of this for the user?

So theres no layout shift, good for speed scores/seo.

I created an /api/ end point to generate a blured image and added a FE page for it. This way the user can add the blur image url into the CMS themselves.

The website is super speedy again! Thanks matticus

Edited June 1, 20242 yr by Benn_Kingy

But why do you need the blur at all?

I wouldn't put too much hope in having a speedy site improving your SEO. Google don't work like that. EEAT is far more important.

A fast website will not improve your SEO rankings. However, having a slow website will hurt your SEO. Once your website has reached a certain performance level, any further optimization will help in terms of SEO. 

Well a fast website surely helps with conversions!

Btw I swapped next image for sanity image, and used the lqpip blur data they have already DOHHH. Site is super speedy again

But you still haven't answered the question. Why do you need the blur?

A speedy website does not necessarily help conversions. Apparent speed is more important. This means getting content on the page quickly and letting the rest of the page (and scripts) load as they will.

A site might be fast but unnecessary animations and poor content can reduce conversions. Which means don't use blur. Just put the image on the page without any effects.

 

 

It looks weird when images load in without blur. The blur placeholder stops layout shift. It makes the site feel faster. It helps conversions.

Those are my reasons? 

Images shouldn't be large enough to cause issues. If optimised and formatted to webp they will load in a fraction of a second - so fast you wouldn't have time to see the blur. And if the image size is defined in the HTML then there won't be any layout shift.