Hey folks, I’m stuck with a weird issue in my Telegram bot project. I’ve got a web app built with React and the bot running on Node.js. Most of the time it loads fine, but on some phones (iPhones mostly) it takes forever to start up - like 3 to 5 seconds!
I’ve tried to speed things up by calling the Telegram web_app ready() method as soon as possible in my HTML. Here’s a snippet of what I’m doing:
<body class="loader">
<div id="root"></div>
<script>
if (window.Telegram && window?.Telegram?.WebApp) {
window.Telegram.WebApp.ready();
}
</script>
<script type="module" src="/src/app.jsx"></script>
</body>
I even tried adding a preloader, but it shows up after the white screen, which doesn’t help much.
My bot setup is pretty standard:
const myBot = new TelegramBot(SECRET_TOKEN, { polling: true });
myBot.onText(/\/start/, async (message) => {
const userId = message.chat.id;
try {
await myBot.sendMessage(userId, 'Hey there!', {
reply_markup: {
inline_keyboard: [
[{ text: 'Launch App', web_app: { url: appUrl } }]
]
}
});
} catch (error) {
console.error(error);
}
});
Any ideas on how to make this load faster? It’s driving me nuts!
I’ve encountered similar issues with Telegram bot web apps. One thing that helped in my case was optimizing the initial JavaScript bundle size. Try using code splitting and lazy loading for non-critical components. This can significantly reduce the initial load time.
Also, consider using a service worker to cache static assets. This can speed up subsequent loads, even if the first one is slow.
Another optimization I found effective was minimizing API calls on initial load. If possible, defer non-essential data fetching until after the app has rendered its core UI.
Lastly, ensure your server response time is optimized. Sometimes, the delay isn’t in the client-side rendering, but in how quickly your server responds to the initial request.
These steps helped me reduce load times from 3-4 seconds down to under a second in most cases.
As someone who’s worked on several Telegram bot projects, I can relate to your frustration with slow initial loads. One trick that’s worked wonders for me is implementing a skeleton screen. Instead of a blank white screen, you load a bare-bones layout of your app instantly. This gives users the impression of faster loading and improves perceived performance.
Another thing to consider is the size of your assets. Are you using large images or heavy libraries that could be optimized? I’ve had success using tools like ImageOptim for compressing images and webpack-bundle-analyzer to identify and trim down bulky dependencies.
Also, have you looked into using server-side rendering (SSR) for your React app? It can significantly speed up the initial render, especially on slower devices. It’s a bit more complex to set up, but the performance gains can be substantial.
Lastly, don’t underestimate the impact of your hosting solution. I once moved a sluggish bot from a shared hosting plan to a dedicated VPS, and the difference in load times was night and day. Might be worth investigating if you haven’t already.