We had either the good or bad fortune to have run out of bandwidth in our home plan this Week. When that happens, they slow you down to a trickle, until your billing month begins again. As a result, We 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 We realized We 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. We placed an SVG graphic inline, as Well as a pure CSS preloader, with all of the style information in the HTML header. We 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 We 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.
We also load script.js in the header, then We use that to load our files in a staggered manner so they load in the correct order for dependencies, and it gives us the ability to update the preloading indicator after each batch is done. We do also use head.js, as script.js can’t handle CSS files. We 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, We load the actual app file, and update our preloader to its final position. We’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 ! We still need to make the web app more responsive as well, as testing on the 24 inch iMac shows us some areas that need improvement, and some scroll bars that need adding. We develop on a touch screen hybrid PC, so We forget that people using a mouse need those scroll bars. We was delighted to see that our app will load in Kindle’s Silk browser, but We have a lot of responsive fixes to make before we will be truly compatible with Kindle. Coming soon however!