Application seems slow on Free Tier

Support
1

PLEASE help us help you by writing a good post!

This is my netlify site - https://afrikie.netlify.app/

It loads very slow. Am I doing something wrong? I want to make the application production ready. What are the steps so that it can load optimally.

2

@nnabros It’s slow because of how you’ve constructed it.

You’re currently loading your images from supabase, seemingly in ‘original’ quality:

image
image1634×485 204 KB

Here’s one of your images which is 3.3mb:

https://afalbceljbveqvofgumf.supabase.co/storage/v1/object/public/car-images/e1e45237-00f2-424c-90a4-a910aada80c9/c04ea3i4fqc.jpeg

To optimize the images in a supabase way, you would probably use:
https://supabase.com/docs/guides/storage/serving/image-transformations

To optimize the images in a Netlify way, you would use their Image CDN:
https://docs.netlify.com/image-cdn/overview/

3

I used the Netlify way but my images do not load. This is an example of an image not loading https://afrikie.netlify.app/.netlify/images?w=600&h=400&q=85&fit=cover&format=webp&url=https%3A%2F%2Fafalbceljbveqvofgumf.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fcar-images%2F3a373ed8-2992-4455-977e-51ba080f6d00%2Fdq5k1bx788.jpeg

4

Alternatively I tried not encoding the URL - https://afrikie.netlify.app/.netlify/images?w=600&h=400&q=85&fit=cover&format=webp&url=https://afalbceljbveqvofgumf.supabase.co/storage/v1/object/public/car-images/3a373ed8-2992-4455-977e-51ba080f6d00/v3tq7i6anxn.jpeg and it still did not work

5

@nnabros Did you do this step?
https://docs.netlify.com/image-cdn/overview/#remote-path

Remote path
To transform a source image hosted on another domain, you must first configure allowed domains in your netlify.toml file using the images key.

6

Yes I did. FInd below my images key config

[images] remote_images = ["https:\\/\\/.*\\.supabase\\.co\\/storage\\/v1\\/object\\/public\\/.*"]

7

@nnabros My guess is that there’s either something wrong with that definition, or the connection to Supabase itself.

The error that’s being returned is 400 which is “Bad Request”.

8

The supabase URL to the image opens, the definition is in tandem with the documentation. Is there something else I am missing?

9

Not that I’ve been able to spot yet, your regex appears correct and successfully matches the supabase url’s you’re providing.

I’m not sure if Netlify images logs into your ‘Function logs’, but you could try checking there:
https://docs.netlify.com/functions/logs/

You could also try…

  • Adding at least one test image to your own site files, then trying to access that
  • Adding a different domain to remote_images, then trying to access that
10

I wasn’t able to access the logs because I need my account upgraded. Is this a reason why the CDN is not working?

11

I could never say for certain, as I don’t work for Netlify and have absolutely no idea how their systems are configured, but I’d find that extremely unlikely.

I also believe the images CDN is working, it’s just not working for the URL’s you’re currently trying.

For example, this does load:

https://afrikie.netlify.app/.netlify/images?url=favicon.svg

It’s just not very useful for testing purposes and you don’t seem to have any other images.

Which is why I mentioned:

Then to cover the inevitable “that’s great, but I need/want to load from a remote URL”:

The aim is to try different situations to prove to yourself if it is/isn’t working, and hopefully spot why it isn’t working for your supabase urls.