Mobile Performance: Perspectives of Speed

The thought process behind building a top-notch eCommerce website has always been user performance, aesthetics, design patterns and a good eye for following customer patterns. When smartphones and tablets started populating the market, design patterns started changing and the focus began shifting towards fast responsive designs that rendered quickly while retaining a certain level of beauty for consumers looking to do a quick purchase straight from their handheld devices.

While computers coupled with a stable internet connection (for most of our consumers), do a wonderful job at rendering websites, mobile phones on data plans receive their content in an entirely different manner.  According to a study by PCWorld, (found through Smash Magazine), smartphones running on the 3G network clocked in at roughly 244 kb/s while those on the 4G network clocked in at roughly 756 kb/s. These numbers fluctuate too as the user moves around, and with our customers slowly expecting faster load times on almost everything, we need to start finding ways to speed up our websites especially on the mobile end!

Studies show that the average expected wait time for any webpage to load is approximately 4 seconds.  With that in mind, that means we need to look at reducing the average size of our websites to (loading speed x 4).  For safety measures, pages should aim to be within 1MB to 1.5MB. Luckily, tools such as Pingdom gives us a way to review and monitor the overall webpage size of our projects.

There are several ways to reduce the load speed of our websites:

  1. Reduce the number of HTTP Requests to the server
  2. When possible, replace images with CSS (Cascading Style Sheets)
  3. Reduce the size of the images rendered on the page
  4. Make use of image sprites
  5. Reduce Client-side processing

Reduce the number of HTTP Requests to the server

Every <link> and <script> tag that contains a reference to stylesheets, Javascript files, or other code files will create an additional HTTP request to the server, slowing down the overall loading speed of the site by precious milliseconds (per file!).  As a result, one good practice is to merge all css files into one .css file.  A factory default Magento installation already comes with the option to merge CSS from the System -> Configuration settings.  If you’re developing your stylesheets using SASS / SCSS standards, even better!  You’ll already be exporting to a well-formed single CSS file.  For more information on using SASS / SCSS for your website, take a look at this article:  Reducing the Complexity of Responsive Web Design Using SCSS

Merging JS files on the other hand requires a little bit of analysis for the project.  First and foremost as a general rule, always minify your js files on production.  If the total size of your javascript files exceeds 15 kb, try to create smaller groups of files rather than merging them into one large file as some smartphones will not cache javascript files above the size of 15kb.

Not only will this significantly reduce the loading time for mobile devices, it also helps with reducing the load times overall for the entire site regardless of platform. Of course, smartphones have less processing power than an actual computer, so each http request is slightly slower on the mobile device than on a computer making this step even more vital.

Also, avoid iframes whenever possible, as each iframe is considered an http request as well (and don’t forget to factor in the javascript / css within the iframe)

When possible, replace images with CSS (Cascading Style Sheets)

As each image is also considered an http request,this somewhat ties in with the point above. Back when the Internet first started coming out with a large influx of new websites, presentation and content usually mixed together in the HTML code.  As a result, many companies vowed to build beautiful websites using sliced, large images rather than style things separately.  Now with speed being a bigger concern than ever, and with websites being split between content and presentation (HTML and CSS), designs are now focused more on CSS rather than images and it has improved the loading speed of websites tremendously.

Of course, as we’re discussing mobile performance, replace your images with a CSS equivalent whenever possible.  CSS3 has provided many new ways to create small icons, including (but not limited to) circles, triangles, rounded borders, gradients and box-shadows.  If your graphic looks like it can be created using a combination of the items above, give it a try!

Reduce the size of the images rendered on the page

CSS unfortunately cannot replace every single image on the site.  There are times when we will need to use images for icons, galleries, headings or banners.  Although browsers are perfectly capable of reducing the rendered size of an image ad-hoc on load, the native (or full size rather) of the image is always fully loaded.  For example, adding a width and height to an image via CSS might make it look smaller, but in order for the browser to resize it, it still loads the full image first.  This would end up using far more bandwidth than an average mobile user expects to use, and it’s especially frustrating when browsing from a mobile network.

So if you’re building a mobile only website, do the website a favour and reduce those image sizes! There are many tools out there now that do the optimization for you, inclusive of many different image formats as well.  One article I enjoyed reading (and happens to have links to many tools) can be found at http://addyosmani.com/blog/image-optimization-tools/

Here at Demac Media, we’re building responsive websites now though.  Part of responsive design is having images that resize fluidly.  Responsive design uses percentage widths that relies on high quality images that won’t look pixelated when stretched.  As responsive design tends to load the same content for all screen sizes whether mobile or desktop, we needed a solution to speeding up image loading times without compromising the flexibility / aesthetics of the image.

Kyle McGregor (@klmcgregor), a front-end developer from our talent pool pointed out that one of the key methods of reducing mobile load times in a responsive design is to build the website starting from the mobile sizes and moving up the width scale rather than the other way around. Traditionally, websites are designed with the full size design first, (as it is usually the more beautiful, lavish design great for impressing your clients!), but when built with this mentality, causes our responsive design to load and render an enormous amount of content that we would not even be displaying for mobile.  By switching our mentality to mobile first, we can ensure that our handheld devices are only served the content it needs, rather than having to pick and select from a full desktop sized page, while hiding the rest.

Make use of image sprites

Image sprites are a collection of smaller images that can be rendered separately through the use of css.  An article on css-tricks goes into more detail on how sprites can be used, here.  The great thing about image sprites is it allows your webpage to reduce http requests (remember how those slow down our site?) by only downloading one image rather than many smaller ones.  Use them well!

Reduce Client-side processing

By client side processing, this usually refers to the amount of Javascript that’s running on the site.  Try to include only javascript that is relevant to the page.  Mobile devices suffer more from running scripts than your conventional desktop, therefore it becomes even more important that the amount of client side processing is reduced when serving content to handheld devices.

So now it Loads Faster, What Else?

All this talk about reducing the wait time for a website to load isn’t going to be useful past a certain point. Despite all reductions being done, certains things when left on a webpage will give a perception of being slower than other websites.  For example, certain loaders on a webpage reminds users that something is loading which creates leads users to believe the page is loading slower than it actually is.  This opens up an entirely new method of making mobile websites appear faster than they really are.  Given the wrong additions, it could make your website appear slower also. Use caution.

One of the most common fixes to reducing the perception of a slower website is by giving buttons an instantaneous response when they’re “clicked”.  Smartphones are programmed to wait 300ms before eliciting a response to read potential double taps, or long holds. For regular buttons, this means a delayed response time making us think the site is slower than it should be. (To put this into perspective, Human Benchmark statistics show humans have an average reaction of 215ms, making 300ms very noticeable). To add this quick response, add an eventListener to the button called “touchstart”.   Handle the event by adding some styles to the button, and the website will appear much faster right away!

Mobify provides a link to Google’s Fast Buttons, https://developers.google.com/mobile/articles/fast_buttons, allowing developers to completely eliminate the 300s delay altogether.

Finally, we have more basic ways of improving the overall perceived performance of a mobile site.

  • Avoid Textboxes if possible, and use checkboxes / radio buttons
  • Include default selections for your checkboxes / radio buttons
  • Include default values if you must use textboxes

And there you have it, practical methods of reducing the actual load speed of the mobile site and methods to lower the perceived speed as well.  Happy browsing!