I'm developing a web app using SvelteKit that lets users receive challenges from a PostgreSQL server and send photo proof back. While it runs well on WiFi, I've noticed significant issues when testing on mobile networks. One location had solid 5G coverage, and everything worked fine, but another location with poor 4G connection made the app nearly unusable. Has anyone experienced this with web apps requiring constant server communication? What strategies do you use to maintain a smooth user experience? I'm considering switching to a mobile app for better local storage options, but I'm unsure if that's necessary. I'm also using Cloudflare Pages and edge functions to host the app.
5 Answers
One way to tackle the issue is to reduce the size of the photos on the client side. Most modern phones can compress images before uploading. For example, you can use packages like CompressorJS, which I found very helpful to minimize image sizes without sacrificing too much quality. You might want to look into that!
Definitely look into ways to cut down on the amount of data being sent and received. Implementing retry logic can also help if there are connection issues. That way, user interactions won’t feel as sluggish.
Cache heavy, split code, and lazy-load all the assets you can. Pre-fetching can also improve loading times. Just as a reference, I made an Angular app that got its initial download size down to about 8MB, which made a big difference in performance even in low-speed areas.
That’s really helpful! I’m curious if others have used creative loading page designs to keep users engaged while they wait. I'd love to hear about techniques that work.
What kind of challenges are you offering? Knowing that could help us brainstorm better. If you’re sending images among users, using a CDN might significantly reduce loading times. Also, caching URLs on load can help too!
Sure! The challenges are text prompts for users to complete, along with references to previously submitted images. I paginate the challenges and load them in batches, hoping that reduces wait times.
The problem might not be local storage at all. You should check if you have all your assets minified and consider reducing the overall data transferred. Streamlining that can help improve responsiveness quite a bit.
That’s a solid approach! A lot of phone cameras take super high-resolution pictures, which can slow things down when uploading. It's smart to reduce that size as much as possible.