Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

High performance design for mobile users

Wednesday, December 11th, 2013 by Servage

Before creating a high performance website for mobile users, we need to have enough data to analyze and then determine the requirements of mobile users, through various techniques. In this post, I include tips and techniques to do performance optimizations for mobile-first website designing.

Constraints

Prior to any work with performance optimization on sites for mobiles, we must be aware of the constraints that can hinder optimization.

The first obstacle is power supply, i.e. small batteries. With this constraint in mind, we need to scale everything as we have limited power for a limited time. The reality is, users could run out of power at any moment during our site’s operations. This power supply factor demands that we scale content, media, and code; in order to consume less power for better user performance.

The second constraint is connectivity. Despite the great evolution from 3G to 4G, most mobile device holders still depend on Wi-Fi or low quality network providers. Most visitors get frustrated within three seconds if our website doesn’t load on their mobile. Therefore, we have just one second to convince users of our website to stay around for our effective presentation. Yes, we lose those two extra seconds in establishing the connection for an operational HTTP on smartphones.

Performance Optimization Techniques

Now that you have a clearer picture about the given constraints, we can look to responsive website designing as a technique for performance optimization. We must be careful though, to create resources, especially content, in such a way that they will consume less time and bandwidth to perform on the tiny to big screens.

Device Detection Repository

Intelligent use of the media query and similar scripting, determines screen resolutions and loads images and other content accordingly, instead of delivering everything prior to the web page loading. Smart coding for navigation, interactions, and usage of hardware features make a lot of sense in performance optimization. For instance, with the proprietary platform ASP.NET, you can use a comprehensive device detection repository to make informed decisions based on screen resolutions as well as input methods.

If we carefully monitor the performance of web pages, using various techniques and tools of measurements, we can avoid the use of less popular content from our major landing web pages; and thus, make them more relevant to our targeted audience. If it is simply not possible to remove this less used content that appears on our landing pages, we can shift them to other, less important pages with adequate linking.

Cloud Computing

Cloud computing is a buzzword in the industry because many web developers tend to use it frequently. Before utilizing help of the Cloud for our website presentation and interactions, we should remember that the Amazon web service takes 200 milliseconds more to load content on the mobile web page, than on other traditional devices. If you can, avoid this penalty in favor of your performance against the benefits they provide. This would actually be a more balanced decision for you.

Content Squeezing

As we think about the squeezing of content, particularly images, we can do this with the help of JavaScript or CSS3, at the time the browser is rendering our web page. The biggest drawback though, is the power consumption and CPU speed. Of course, you can think about an image optimizer that is available on several platforms.

Besides images, we can squeeze HTML with various methods. This reduces the overhead on web page documents and their respective loading. We can also apply many compression algorithms in order to squeeze HTML. Or we can go with CSS includes for web page optimization, where CSS is remaining in the cache and available, without need for connection.

By employing various techniques, we can optimize performance issues for our mobile websites.

References & More Reading

Creating High-Performance Mobile Websites
How To Make Your Websites Faster On Mobile Devices
Is Cloud Mobile Detection Compromising Your Mobile Web Experience?

High performance design for mobile users, 4.0 out of 5 based on 3 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.