I’ve been experimenting with creating interactive animations in Tumult Hype, and I’m trying to make sure they run smoothly on iPhones. While things look great in the editor, I’ve noticed some lag and performance issues when testing on older iPhone models.
What are your go-to tips for optimizing Hype projects for iPhone? Are there specific techniques, settings, or design choices that make a noticeable difference in performance?
For example, should I be mindful of image sizes, use fewer JavaScript functions, or avoid certain animations? I’m especially curious about how to balance high-quality visuals with performance.
Looking forward to hearing your thoughts and experiences!
Personally, this has been less of a problem as mobile device get more powerful. I don't worry as much about optimizing for phones. I worry about optimizing for search engines. That means I usually avoid large images.
So, that's two things right there…
ImageOptim for optimizing images… ImageOptim — better Save for Web …can make the file sizes of images smaller, either lossy or lossless.
Another thing is to simply use your developer tools. Even though you're using an iPhone, a Mac can be used to test things out.
Although, things like full screen animation, excessive animations, too many Physics objects, poorly written JavaScript, can slow things down. As an example, I've made games with Hype using SVG to keep the file size down. It works great when played at a small size. But when played in 4K, it starts putting pressure on the CPU. That's not ideal, especially with mobile devices, as that uses more power.
That's why testing with older devices is important too, as with Apple Silicon, my newer Macs are way faster. It's hard to notice performance issues when the computers are so strong.
Optimization is a moving target. Some problems go away, while new problems arise. I just realized that I have to look at my website as it's throwing an error. I didn't notice anything wrong, but I just ran a PageSpeed Insights test and it showed the error.
There's rarely a silver bullet*, so you're welcome to post a zip of your .hype document along with the iOS devices you're testing with and we might be able to provide more specific suggestions.
Overall I'd say these are the "hotspots" where we've seen performance issues on older hardware:
extremely large scene sizes that get scaled down
large images (in dimension, not necessarily in file size)
a lot of svg usage
a lot of symbols
blur filter effects
It is generally useful to use tools to help measure actual performance and only try making one change at time.
* If there ever is a silver bullet, it might be toggling the "Use WebKit graphics acceleration" and "Position with top/left" checkboxes. These change the rendering dynamics and sometimes can dramatically both improve or diminish performance, based on content. The defaults are generally the best but not always specifically the best.
Thanks, @Photics and @Jonathan, for the detailed insights—really helpful stuff!
Here’s what I’ve tried based on your suggestions and some of my own findings:
Image Optimization: I started using ImageOptim (thanks for the tip, Photics!) to compress images before adding them to my project. It’s made a noticeable difference, especially for scenes with multiple large visuals. I also make sure to resize images to just above the dimensions they’ll be displayed at, to avoid unnecessary scaling.
Testing with PageSpeed Insights: Running my project through PageSpeed Insights was an eye-opener. I spotted a few render-blocking scripts and reduced their impact by deferring non-critical JavaScript. The "Largest Contentful Paint" metric was particularly helpful for pinpointing sluggish elements.
WebKit Graphics Acceleration: Jonathan, your mention of the "Use WebKit graphics acceleration" checkbox was a game changer! Disabling it in one of my more complex scenes significantly improved performance on older iPhones.
Reducing Animations and Symbols: I scaled back the number of animations running simultaneously and consolidated symbols where possible. For example, instead of multiple elements animating independently, I combined them into a single sprite-like animation where it made sense.
Blur Effects: I realized I had used blur filters liberally for a few design elements. Replacing them with subtle gradients or pre-rendered blurred images helped smooth things out.
Testing Across Devices: I now use older iPhones and Safari's developer tools on my Mac for more rigorous testing. It’s fascinating to see how different devices handle the same project.
The result? The animations now run much more smoothly, even on older devices like the iPhone 7. I’m still experimenting with SVGs to strike a balance between quality and performance—especially for projects that might scale to 4K.
Appreciate the guidance! If you have any further tips, particularly for managing complex animations or integrating lightweight JavaScript, I’d love to hear them.
That's great! I'm glad you were some good perf wins! Thanks for also reporting your results with each technique.
If it comes to first load performance and you're using the Responsive Layouts feature, one thing to consider might be to use the Advanced Export to export each layout individually. Then you could potentially have a minimal webpage that looks at the screen size and chooses which size to load. I thought there was some code on the forums to help with this, but I can't find it. Note: this generally only would help in load times/memory consumption, and not animation speed.
Otherwise I can't think of much else specifically on the top of my head... if there's still parts you're unsatisfied with you're always welcome to attach a zip of your .hype doc.
