4 Replies Latest reply on Sep 5, 2017 6:16 AM by BBDDan

    improve app performance



      any suggestions on how I can improve the performance of my HTML5 interactive book app built in Tumult Hype3 Pro?


      I've tried minimising animations, all images and audio are compressed, I've tried:


      -splitting the book into chapters with separate html files


      -referencing the same resource library from each chapter.html (total 35MB)


      The animations aren't overly long, many images are re-used, all page transitions are instant...


      I'm testing on my 16GB iPad4 and the page animations are laggy and sound files get missed off on some run throughs, works perfectly on the Mac browser though of course! At the moment it's only in iPad resolution so can't test it on my iPhone7 at the moment to see if that makes a difference.


      Thanks in advamce




      <?xml version="1.0" encoding="UTF-8" ?>



      <widget xmlns   = "http://www.w3.org/ns/widgets"

        xmlns:gap   = "http://phonegap.com/ns/1.0"

          id          = "com.BBDDan.thedrumablespart1"

          versionCode = "10"

          version     = "1.0.0" >







        An interactive book for teaching children the drum kit


        <author href="http://www.backbonedrums.com" email="info@backbonedrums.com">

        Dave Hazlewood and Dan Wright




        <preference name="phonegap-version" value="cli-6.5.0" />

        <preference name="orientation" value="landscape" />

        <preference name="fullscreen" value="true" />

        <preference name="webviewbounce" value="false" />

        <preference name="DisallowOverscroll" value="true" />

        <preference name="disallowOverscroll" value="true" />

        <preference name="target-device" value="universal"/>

        <preference name="deployment-target" value="7.0"/>

        <preference name="exit-on-suspend" value="true"/>

        <preference name="detect-data-types" value="true"/>

        <preference name="prerendered-icon" value="false"/>

        <preference name="StatusBarOverlaysWebView" value="false" />

        <preference name="ios-statusbarstyle" value="default" />

        <preference name="StatusBarStyle" value="default" />



        <preference name="android-minSDKVersion" value="21" />

        <preference name="android-installLocation" value="auto" />



        <preferences name="permissions" value="none"/>



        <platform name="ios">

        <icon src="res/icons/ios/icon.png" width="57" height="57"/>

        <icon src="res/icons/ios/icon-72-2x.png" width="144" height="144"/>

        <icon src="res/icons/ios/icon-72.png" width="72" height="72"/>

        <icon src="res/icons/ios/icon-2x.png" width="114" height="114"/>

        <icon src="res/icons/ios/icon-50-2x.png" width="100" height="100"/>

        <icon src="res/icons/ios/icon-60.png" width="60" height="60"/>

        <icon src="res/icons/ios/icon-60-2x.png" width="120" height="120"/>

        <icon src="res/icons/ios/icon-60-3x.png" width="180" height="180"/>

        <icon src="res/icons/ios/icon-76.png" width="76" height="76"/>

        <icon src="res/icons/ios/icon-76-2x.png" width="152" height="152"/>

        <icon src="res/icons/ios/icon-small.png" width="29" height="29"/>

        <icon src="res/icons/ios/icon-small-2x.png" width="58" height="58"/>

        <icon src="res/icons/ios/icon-87.png" width="87" height="87"/>

        <icon src="res/icons/ios/icon-40.png" width="40" height="40"/>

        <icon src="res/icons/ios/icon-40-2x.png" width="80" height="80"/>




        <platform name="android">

        <icon src="res/icons/android/icon-36-ldpi.png" qualifier="ldpi"/>

        <icon src="res/icons/android/icon-48-mdpi.png" qualifier="mdpi"/>

        <icon src="res/icons/android/icon-72-hdpi.png" qualifier="hdpi"/>

        <icon src="res/icons/android/icon-96-xhdpi.png" qualifier="xhdpi"/>

        <icon src="res/icons/android/icon-144-xxhdpi.png" qualifier="xxhdpi"/>

        <icon src="res/icons/android/icon-192-xxxhdpi.png" qualifier="xxxhdpi"/>






        <platform name="ios">

        <splash src="res/screens/ios/screen-ipad-landscape.png" width="1024" height="768"/>

        <splash src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" height="1536"/>

        <splash src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" height="1242"/>

        <splash src="res/screens/ios/screen-iphone-landscape-667h.png" width="1334" height="750"/>

        <splash src="res/screens/ios/screen-iphone-landscape-568h-2x.png" width="1136" height="640"/>

        <splash src="res/screens/ios/screen-iphone-landscape-2x.png" width="960" height="640"/>

        <splash src="res/screens/ios/screen-iphone-landscape.png" width="480" height="320"/>




        <platform name="android">

        <splash src="res/screens/android/screen-ldpi-landscape.png" qualifier="ldpi"/>

        <splash src="res/screens/android/screen-mdpi-landscape.png" qualifier="mdpi"/>

        <splash src="res/screens/android/screen-hdpi-landscape.png" qualifier="hdpi"/>

        <splash src="res/screens/android/screen-xhdpi-landscape.png" qualifier="xhdpi"/>

        <splash src="res/screens/android/screen-xxhdpi-landscape.png" qualifier="xxhdpi"/>

        <splash src="res/screens/android/screen-xxxhdpi-landscape.png" qualifier="xxxhdpi"/>




        <platform name="winphone">

        <splash src="res/screens/wp8/splashscreen.png" width="620" height="300"/>









        • 1. Re: improve app performance
          kerrishotts Adobe Employee

          So... without seeing things in action and seeing the underlying structure of the app, it's hard to offer anything but exceedingly general optimizations. A video of what you're seeing might be useful, but at some point we'd probably need to be able to install your app on one of our devices in order to see what's going on. If you want to DM me a zip file, that's fine.


          Best thing you could do on your end, though, is to connect your device to your computer and use either Safari (for iOS) or Google Chrome (for Android) to try and debug the performance issues. Both of them offer remote debugging (once your device is properly configured), and both will show timeline views that might help point out where your problems lie.

          • 2. Re: improve app performance
            BBDDan Level 1


            I've sent the zip file but in regards to debugging remotely via Safari as I'm on a Mac, can I debug the actual app or does it require me to open the HTML5 within Safari as a separate file from a local address? If so, is there a link for how I do this?




            Update: Figured out how to start the debugging process! now to learn what it means to act on it!

            • 3. Re: improve app performance
              kerrishotts Adobe Employee

              So, just want to double check which kind of iPad -- an iPad 4 or an iPad Mini 4?


              Testing on my iPad Pro 12.9" reveals no issues. However, testing on my iPad Mini 4 does have some lag, and (for some reason) no sound. I'll have to try again later and see if it was just a glitch in how I served the files to the device.


              So, if the iPad Mini 4 is lagging a bit, an iPad 4 would lag quite a bit (hence my question above). The GPU on that device is no where near as good as even the iPad Mini 4, and most animations are (hopefully, anyway) going to be running through the GPU. I haven't run a timeline against the app yet w/ the iPad Mini 4, so I'll know more once i do that.

              • 4. Re: improve app performance
                BBDDan Level 1


                I've been testing on a 16gb iPad 4, not a mini.

                Thanks again for the help, debugging brought up an issue in the HTML files which I've corrected, going to try the debug again across the entire program.

                Best regards



                BackBone Drums