External image isn't caching
Question

Hi everyone.

Imagine I have this common scenario with an entity called THEME with the Id and name and an entity THEME_IMAGE with ThemeId and FileData (which is a binary data) and I want to make a ListRecords that shows all the Themes with their respective images. For this example lets say that I know there will only be 15 themes in total, no more and no less.

The usual way I do it is just use an image widget inside the ListRecords, simple. But....the files saves in the database are SVG type, so the image widget doesn't show them properly. I have to set the widget to "External" and create a download screen to be called at that property's URL. And it works....the SVG's are shown....but....they take FOREVER to load. The browser takes 7 secs to finish the loading process of the 15 images.

I've tried using cache at:
- the query that fetches the binary file on the download screen;
- the screen itself;
- the webblock that is encapsulating my ListRecords;

Nothing works. The server will still use 7s to load everything.

I'm stuck !!

mvp_badge
MVP

Hi,

What application type are you building TWA, RWA or mobile?

Regards,

Daniel

Hey Daniël,


It's traditional web.

mvp_badge
MVP

Did you try this Forge component to show your SVG's?

https://www.outsystems.com/forge/component-overview/3477/inline-svg


I did.
It works great, but the fact is that injecting the binary data of every image on the page, makes the aspx page grow to MB sizes. This wouldn't be a problem if our costumer's site wasn't public, but it is and can be accessed through multiple devices such as tablets or smartphones (the site itself is responsive) and I don't think is a good idea to make a user download a 3MB aspx to his phone, specially if their paying for data packets.

Isn't there a way to make the server cache these images?

mvp_badge
MVP

Hi, maybe I am ignorant, but how does caching on the server avoid you downloading 3MB of data?

The data needs to go from server to client (browser) to be shown on a screen.

I just look at the size of the aspx page when it finishes downloading.
Using the normal widget is 50KB. Using the forge component takes it up to 3MB.

mvp_badge
MVP

What is the size of your SVG string literals?

For all of them added up its about 3MB (they are responsible for 98% of the aspx size).
We have many just on this screen.

mvp_badge
MVP

But isn't that then the root cause, your SVGs are just to big no matter what. You need to rethink how to make te SVG definition smaller, show less on your screen, convert them to lower sized images or something.

https://css-tricks.com/high-performance-svgs/


Sometimes all a person needs is to talk to another about a problem. I just realized that it doesn't matter if I'm injecting the data directly in the aspx or if I download the file separately. The download size will still be the same. lol

But returning to my initial question. Isn't there a way to make the server respond, at least, faster with cache? Because when using the outsystems image widget with the external property, basically I'm making 1 http request per image, right? If each request takes 0,5s to complete and if I have 15 images, it will take 7s to complete all of them.

But when I use a normal jpg image with the outsystems widget, there is still 1 http request being made, only this one I have access to the property "cache" in it.

mvp_badge
MVP

If you have a server action the generates the binary, you can set the cache in minutes property on that server action.

First time it is called for the given input parameter values the action flow is executed, any subsequent calls to the server action with the same input will use the cached value.

Be aware that if you have a production environment with multiple front-end-servers, that cached is done per front end server, so it can happen that caching only starts to be effective if cached on both front end servers.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.