I had either the good or bad fortune to have run out of bandwidth in our home plan this week, as here in Alaska the plans are not unlimited. When that happens, they slow you down to a trickle, until your billing month begins again. As a result, I was able to see just how miserably slow a 2MB plus web app loads for somebody without high speed internet! Watching a white screen for eons before you even get a preloader is no fun. So I realized I need to change the way the website and app load, as it’s important that our app be accessible to kids around the world who may not have access to high speed internet. I placed an SVG graphic inline, as well as a pure CSS preloader, with all of the style information in the HTML header. I normally never do that, as having a clean separation of HTML, JS, and CSS has always seemed so much nicer… But that leaves your users staring at a white screen while your assets load, and for a big e-learning app like ours, the wait is unbearable. In fact I think a lot of folks would just assume the site was broken before waiting 60 plus seconds for some visual indication that the site is loading.
I also load script.js in the header, then I use that to load my files in a staggered manner so they load in the correct order for dependencies, and it gives me the ability to update the preloading indicator after each batch is done. I do also use head.js, as script.js can’t handle CSS files. I asynchronously load the CSS and a big data file while the other stuff begins loading, and then after all of the necessary files are dong, I load the actual app file, and update my preloader to its final position. I’d like to add catchy phrases or speech bubbles telling about our app, but I’m too lazy to do that in 8 languages right now ! I still need to make the web app more responsive as well, as testing on the 24 inch iMac shows me some areas that need improvement, and some scroll bars that need adding. I develop on a touch screen hybrid PC, so I forget that people using a mouse need those scroll bars. I was delighted to see that our app will load in Kindle’s Silk browser, but I have a lot of responsive fixes to make before we will be truly compatible with Kindle. Coming soon however!
| Home | About |