App Performance Tips & Tricks: SPEED!

Hi everyone. I thought it might be useful to start a thread for speed-related tips. What we have found through knowledge or experience that helped our apps run faster and smoother…

I have a question regarding images. Do images load faster from certain components? Someone had previously mentioned that they noticed the images in Title components load instantly.

What should we be mindful of when using images in our apps?

2 Likes

Images loading faster in the title component used to be a thing in classic apps, but I’m not sure that’s still the case.

2 Likes

Jeff, Darren and Thinh have written quite a bit about app performance in the forum over the years. You’ll usually find Jeff’s explanations in topics with the keyword “performance”.

I have a tendency to forget the intricacies of what makes an app more performant. A few months ago I wrote up the following, it’s fairly basic and common sense. Unfortunately I don’t go into detail, details that might actually make a difference, precisely because I cannot retain them.

Regardless, the following might be a decent addition to this topic. Thanks for starting it, great idea, app performance is a recurring topic in the forum.

7 Likes

thanks @nathanaelb. Good to know.
What is a Single Self Relation? Is it where you’re relating data from 2 columns within the same table?

A self relation is a relation that relates a column to itself. Now that I think of it, I’m not sure if it makes a difference if the self relation is “match multiple” or not (what I called “single”).

The self relation used to be used quite a bit, basically you can create a unique list within a table where you otherwise would have duplicates. It was useful to create reports for instance. Now I would use the query column.

oohh, i see

Saw this on Wix website regarding optimizing images for performance:

My guess is that it cannot hurt to try to optimize images like Wix recommends.

I believe Glide also optimizes images under the hood.

I’ve never done it, but the following experiment could be interesting: upload a non-optimized image, navigate to the web app and then inspect the image on the page or download it. I would not be surprised if the image type, resolution and size were all optimized.

1 Like

Yes the delivery of images in Glide is optimized using cloudinary. But you can compress images before upload, to further enhance optimization (image size reduction at display)

2 Likes

I use this trick to preload images in my apps.

  • On a one row table add a joined list and target an image column

  • Next add a java script column and use the joined list for the p1 parameter

  • Finally put a rich text component on screen and use the java script as it’s source

Try it here: Custom Carousel with Preloaded Images and Enlarge Image

:point_down: Java Script

Summary
if (p1) {
  function generateHtmlFromCsv(csvString) {
    const imageUrls = csvString.split(',');

    // Start building the HTML string
    let html = `<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <div style="display: none; flex-wrap: wrap;">`;

    // Create a div with specified style for each image URL
    imageUrls.forEach((url, index) => {
      html += `
        <div style="flex: 20%; padding: 5px;">
            <img src="${url.trim()}" alt="Image ${index + 1}" style="width: 100%; height: auto;">
        </div>`;
    });

    // Close the HTML string
    html += `
    </div>
</body>
</html>`;

    return html;
  }

  // Assuming p1 contains the CSV string of image URLs
  const csvString = p1;

  // Call the function and return the result
  return generateHtmlFromCsv(csvString);
}
4 Likes

Reduce the use of Query for a whole table. instead build a relation and from that use a query.

1 Like

I see in the linked thread you mentioned to avoid duplicating collections and then using visibility conditions and filters on those.
Is processing a single table in different ways the cause of the slow down?

Also, does invisible data still have “weight” on a page?