How to speed up loading initial page?

💬 App Building
1

Hi,

I noticed that it takes about 3 to 4 seconds before my web page shows anything. In the meantime all I get is a blank page.

Is there a way to say "Loading page..", or even better a way to speed up startup of a retool web page?

Thanks!

2

Hi @PatrickMast,

There are several factors that can lead to this behavior. Most importantly are CPU and network speeds. It would be useful to know what kind of computer you're using (year and cpu model) and the speed (bandwidth / latency) of your network.

To make sure we're talking about the same thing, let's focus on the "Time to first contentful paint", which is a metric that measures how long until the browser renders an element on the page. This metric can be measured exactly by using the Lighthouse tool in Google Chrome dev tools. Are you able to try running the Lighthouse tool on your end?

For comparison, a 2020 MacbookPro (high-end) takes 1.1 seconds and a 2023 chromebook (low-end) takes about 1.6 seconds. These are measured on a 100Mbps Internet link using an empty app hosted on Retool cloud.

Other factors at play include:

  • If you are using Retool cloud, or Retool onprem.
  • [If using Retool cloud] where you are physically located, if you are closer to one of our data centers / CDNs you will have lower latency.
  • Other programs running on your machine, including extensions running in your browser.
  • Whether your browser is correctly caching JS/CSS assets (normally this is true, but sometimes browsers allow you to disable caching, or if you do a "hard refresh")

Regardless of your exact situation, we are working to improve this metric for all of our customers by optimizing our initial JS/CSS loading. Assuming no confounding factors, 3-4 seconds is definitely not acceptable!

1 Like
3

Hi Juan,

Any news on this topic?

I'm experiencing the same issue here, I'd say I'm even in the 6-7 seconds.

B

4

Since the original post (July 2023) we have made significant improvements to page load times. Page load times are about 50% faster since then! Retool continues to get faster over time because we are heavily invested in improving the product experience for our users.

I just tested a simple empty app on Retool Cloud and it loads in about 0.75 seconds on my 2020 MacBook Pro.

Please troubleshoot your network, 6-7s is anomalously high and seems more like an issue with the network.

Two tests that might be useful to run as a next step:

Best,
Juan

1 Like
5

Hi Juan,

Thanks for the reply!

Apparently it wasn't network which is quite good but rather my computer...

Friends with more recent hardware have much shorter loading times.

B.

6

Hi Juan,

I've had my app tested by more friends, it seems to take 7-10 secs for everyone.

It is not slow afterwards but just the initial loading.

App size is 2272 but i've segmented it into ~8 pages.

I don't have big queries and the performance tab in the debug tool shows nothing.

I've checked that page (Web app best practices | Retool Docs) but I don't think much applies to my case as the slowness is more for the initial loading than for the actual app flow.

Here's the page if you wanna check: https://quellevoitureelectrique.retool.com/embedded/public/758e4474-6523-4520-96f1-1c7246e547ec.

Any idea on how to improve it?

If none, is it possible to have like a custom component showing the loading state that would be loaded first, to at least have something showing up?

B.

7

To be clear, it takes 10s to lead the first page, and then navigation from page to page is smooth with much less loading time.

Some additional information:

Network speed test

image

computer speed test

image

Loom video of loading time

Here's the Google Lighthouse report:

page1

image
image1346×604 22.5 KB

page2

image
image854×519 18.5 KB

page 3

image
image876×521 6.69 KB

page 4

image
image1344×601 23 KB

page 5

image
image938×490 17.7 KB

page 6

image
image1360×611 40.4 KB

other

image
image869×499 20 KB

other

image
image864×440 12.2 KB

Any idea on how I could improve this?

B.

8

Hi @Baptiste_LC

Thanks for sharing all these details! I agree, the app looks relatively slow to load. Since the components are slow to load, I don't know that a custom component loader would help :disappointed:

:thinking: Is the starting page particularly large compared to the others? Or, does your app have a lot of globals? Global scoped queries increase the initial load time of all pages in the app, so we recommend moving queries into page scope, if possible.

More generally, a multipage app with a very large total number of plugins (components, queries, etc), spread across many pages, can eventually become slow on initial load (more performance info here). If this happens, it might be worth splitting the multipage app into a couple of smaller multipage apps. The performance of interactions/responsiveness on a given page is independent of the total number of plugins in the app, and only dependent on the plugin count of the page involved.