Performance Issues while using HTML5-Articles

[#1]

Hi everyone,

we build an app where we use responsive HTML5-Articles inside.

On older iOS Devices (iPad2 and iPad4 for Example) the performance is so bad that it is not really usable. It takes for example up to 15 seconds from opening a downloaded Article until it is fully rendered.

We have got a lot of Pictures and Videos inside but inside the OS-Browser it works much better.

Is there someone who has got the same Issues or any idea how to optimize the performance (especially on older Devices)?

Thank you in advance and best Regards!

Lars

[#2 · Accepted solution]

Hi Lars,

The OS control used to display web content on iOS is a different rendering technology than the OS browser, and has different performance characteristics. In particular it is slower on older devices, such as the iPad 2.

Given your description my guess is your image size is driving the performance issues. Take a look at how big in pixels your images are and aggressively re-compress them. I've had success scaling images to 50% of the size I think I need, and then saving them as JPEG at a 7 (or even 5) quality level in Photoshop.

As for the videos, make sure you're using the <video> tag with a link to the video hosted somewhere for streaming purposes.

Neil

[#3]

Hi Lars

At this point you're likely hitting the performance limitations of the OS control itself on older devices.

Neil

[#4]

Hi Neil,

you are absolutely right but we made some more tests yesterday without these larger .jpeg-Files and the effect was the same (then the whole article was around 6mb). Even when we reduced half of images inside this article, the performance was really bad …

Hope we can find a solution for this …

Thank you very much and best regards,

Lars

[#5]

Hi Lars,

I looked at the first article on the first browse page (article-33). The total download size is 11.1MB, of which 7.9MB is JPEG images. It’s also over 249 files. Many of the images are small, which is great, but you still have some on the larger side.

Given the complexity of the content, the number of files involved, the size of the files, and the amount of JavaScript that appears to be loaded, it doesn’t surprise me that the iPad 2 and older devices are struggling to display the content.

Neil

[#6]

Hi Neil,

sorry picked Enterprise ID at the first time.

Now it should appear

Best regards

Lars

[#7]

Hi Lars,

I'm not seeing your project show up in the Preflight app. When you added me to the project did you pick Adobe ID or Enterprise ID from the pop-up? Make sure to select Adobe ID. Thanks!

Neil

[#8]

Hi Neil,

invitation is done

Thank you very much!

Lars

[#9]

Hi Lars,

Can you add neile@adobe.com<mailto:neile@adobe.com> to the project with Preflight permission? I wouldn’t mind taking a quick peek at the content to see if I can identify anything else that might be content-related driving the performance you’re seeing.

Neil

[#10]

Hi Neil,

thank you for your tipps but we already sized down the images inside. Actual the pictures are all under 330kb (even if they are over full width).

Best regards,

Lars