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?

3 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?

5 Ways to Make Your Glide Apps Fly Like a Jet!

TIPS FOR ENHANCING SPEED AND PERFORMANCE IN GLIDE APPS

Improving the speed of your Glide apps is crucial, especially as they grow and handle larger datasets. Here are five effective tips for boosting the performance of your Glide apps:

  1. Minimize the Use of Queries:
    Avoid using Queries as much as possible and opt for Relations instead. Queries require more processing time and can slow down the app, while Relations can provide the same result more efficiently.

  2. Separate Apps for Different User Types:
    Creating separate apps for each user type allows you to use Row Owners, which reduces the amount of data loaded onto the user’s device, enhancing the loading speed of pages and components.

  3. Compress Images Before Uploading:
    Large images can significantly slow down the app’s loading time. Use image compression tools before uploading to ensure faster page loads for image-heavy content.

  4. Use Glide Tables:
    Prefer Glide Tables over external data sources like Google Sheets or Airtable. Glide Tables load faster and reduce the user’s waiting time.

  5. Remove Irrelevant Components and Pages:
    Removing components and pages that are not relevant to each user allows for a smoother and faster user experience. Fewer data and components loaded onto the device result in better speed and performance.

These principles, among others, can significantly enhance the user experience of your Glide apps, ensuring fast and efficient performance.

1 Like

Hello @Gideon_Lahav_Busines

Wanted to know your opinion regarding performance and location of data centers in this thread:

1 Like

Hi Jarvis,

this is for the Glide dev team to answer, not me.