Responding to slow page rendering on the mobile network

In London, my 3G network connection often has speeds of between 5 and 7mps: which is fine for casual browsing. But when travelling on public transport or at work, speeds are often pathetically prohibiting: pages hang and take far too long to load.

I've been coding a Wordpress theme that although wasn’t responsive didn’t mean that it was any the less likely to be accessed on the go by phone or tablet users.

It got me thinking about how to best deal with the perception of speed when the internet slows to a crawl.

Back in the day I’m sure you must remember those full-immersion Flash experiences that took an age to download. Thankfully, progress bars allowed the user to gauge the time until the site loaded and gave a sense of reassurance that sometime, eventually the website will be visible.

So for hanging pages on mobile couldn’t there a similar usability feature? Obviously, determining the page load time would be impossible, but by adding animation it could give a perception of speed despite in actual fact stalling.

Two ideas I had to bring this about were using the new webkit filters to blur the page and use a CSS3 spinning wheel that is centred in the foreground.

As this is feature would only be necessary on the mobile platform then my coding logic was as follows.

1. Use the HTML5 API matchMedia to detect for smaller devices:

   
   var matches = window.matchMedia("(max-width: 1024px)").matches;
   
   

2. Attach a click event to the body tag this filter links with event.target:

   
   if (event.target.tagName.toLowerCase().toString() === 'a') {
   // code here
   }
   
   

3. On clicking a link add the blur class to the

   
   body:document.body.classList.add('blur');
   
   

4. Then use setTimeout to display then loading spinning wheel and remove it after 5 seconds:

   
   setTimeout(function () {
       // display ajax loading symbol
       doc.getElementById('ajaxLoader').style.display = 'block';
   }, 100);
   setTimeout(function () {
       doc.getElementById('ajaxLoader').style.display = 'none';
   }, 5000);
   
   

It’s important to only let the animation run for no more than five seconds in case the speed is so slow it leaves the user stranded on the same page. If the traffic speed is fast enough then the next page is loaded without any waiting animation running.

The JavaScript module code is here: https://gist.github.com/4564346

For the CSS animation I based it on code Craig Buckler wrote for his article How to Create a CSS3 Ajax Loading Icon Without Images:

div[id=ajaxLoader] {
    position: absolute;
    left: 45%;
    top: 50%;
    z-index : 999;
    display : none;
    width: 15vmin;
    height: 15vmin;
    border: 6px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 12vmin 0.8vmin #eee;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

div[id=ajaxLoader]::after{
	border-left-color: transparent;
	border-right-color: transparent;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        -webkit-transform: rotate(180deg);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(360deg);
        opacity: 0.4;
    }
}

I made some changes such as using the new VM unit instead of pixels to allow the animation to scale to the device size.

Testing it in the real world showed that it is quite erratic, but then that’s because page load speeds on the mobile platform are.

Still, it’s just an idea.