Do you have multiple projects hosted on Heroku? Today, I will show you a workaround for dealing with Heroku's 10-30 secs load times and provide a better experience for your users.
Heroku can be a great PaaS solution for quickly deploying your projects/portfolio and sharing it on the web. But a significant drawback is that your app will go to sleep after 1 hour of inactivity. So unless you are planning on paying for the service, users viewing your project will often have to wait between 10-30 seconds before your app wakes again. You can find more information on this topic here.
There's nothing worst than putting lots of work on a project to have most of your users clicking away. So today, I will show you how to improve the user experience of slow loading times and increase your user retention rate in three simple steps.
Step 1: Setup
You will need to create a loading page to provide user feedback(eg. progress bar) and redirect the user to your app once your Heroku app has woken up. You should host the loading page on a site that will respond to a user request right away, such as Netlify or Vercel. And the page must handle dynamic routing to retrieve the project id from the URL parameters. I decided to add a loading page to my portfolio site that I've built using NextJS and hosted on Netlify.
Step 2: storing your data and routing
You should have a place to store all the information about your projects. I decided to create a separate JSON file. Each project must have a unique ID and a link to your app hosted on Heroku. Every time a user visits your loading page, we will use the project's ID to retrieve the app's URL hosted on Heroku.
Step 3: Fetch and Redirect
Now that we have the Heroku URL, we will make a fetch request to this URL and wait for a response. In the meantime, we can show a loading progress bar to the user. Then redirect the user once Heroku responds to our fetch request. And that's all!
Progress bar animation
Here is how I configured my progress bar animation to provide user feedback.
On average, a Heroku app will take 10-15 seconds to wake up. Therefore I configured my progress bar to fill up to 97% within 15 seconds. If the Heroku app responds before the 15 seconds are up, I will redirect the user to my Heroku app. And if that Heroku takes longer than 15 seconds to load, I would redirect the user either way. I figured that after 15 seconds have gone by, the user will most likely click away due to the long wait time.
And the final product...
Thanks for reading, and I hope this article helps you showcase your projects to more people.
Top comments (0)