为什么从移动电话打开我的网站时速度很慢，而从桌面打开它却能正常运行？

Question

I have an interactive website completely built on HTML5 Canvas and Javascript using Kineticjs framework and Foundation to make it responsive. I have also added Preloader to load all the images which are used for animation. So when the website loads at first it loads around 500-600 images before showing homepage. Now the problem is when i run the website in laptops and desktops it works just fine, nothing is wrong but when i run it from any mobile and tablets it starts to respond very very slowly and looks like it got stuck. Even it runs smoothly when i run it from google chromes mobile emulator but is very slow on mobile devices.

Is preloader making my site slow or is it Kineticjs??

Answer 1

Loading 500-600 images is simply a design error.
Especially since the user is simply not able to look at them at once.
It happens that desktop/network are so fast that it still works here.
But a smartphone is at least 20X slower, and mobile network... even worse, so it cannot work here. Moreover, your mobile users might not like also that their paid bandwidth is wasted.

If you need to provide your users a fast preview, you should build a few 'map' images that contains vignettes of all the images. I don't know of your development environment, but your tools have such feature, or you might find one on the web, or anyway you can quickly build your own 'vigneter' in phyton or like. I think that a clear naming convention (for files names+folder) is a must since 600-800 is becoming a large number.

Answer 2

The answer here is very simple. Computers are a LOT faster than phones, and have a lot more memory. Your website is apparently simply too resource intensive to run on a mobile phone.

It's hard to point to the specific problem without seeing any code, but loading 5-600 images sounds fairly heavy. You will need to find ways to limit the resources you need to load at the same time. And find ways to limit how much is shown to users on mobile phones.