Book Image

Mobile Web Performance Optimization

By : S. S. Niranga
Book Image

Mobile Web Performance Optimization

By: S. S. Niranga

Overview of this book

With users increasingly accessing the web on mobile devices, it’s crucial to make sure your website is built to seamlessly fit this radical change in user behavior. Mobile Web Performance Optimization is designed to help you do exactly that – it’s been created to help you build fast, and mobile-user-friendly websites and applications. Featuring guidance through a range of techniques and tools essential to modern mobile development, this accessible guide will make sure you’re delivering a seamless and intuitive experience for your website’s users. Begin by exploring the fundamental components of mobile web design and website optimization, before learning how to put the concepts into practice. Featuring cross-platform solutions, insights on developing lightweight yet robust UI, and insights on how to successfully manage data, this application development book takes you through every stage in the development process – so you can be confident that you’re asking the right questions and using the best tools in the most effective way. By the end, you’ll understand implicitly what it means to ‘build for performance’- you’ll be a more confident developer, capable of building projects that adapt to a changing world.
Table of Contents (14 chapters)
Mobile Web Performance Optimization
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Three main pillars


It's true that the mobile phone has come a long way since 1970. Today, we use the mobile phone for navigation, communication, and entertainment. We even use it as an electronic valet. Although, we use mobile devices for hundreds of different tasks, it has a few limitations. Mobile devices have a limited screen size, so whatever you do, you have to build your application or website in a way that it fits into that limited space. Also, if your device is truly a portable device, you will be able to carry it around. As a result, mobile manufacturers have to compact everything into a smaller size.

Finally, when you develop mobile websites or applications, you have to consider the features that mobile users actually expect from their devices, which are as follows:

The following chart explains the significance of the three main features for any mobile device:

Battery

Out of these three factors, our primary focus will always be on the mobile's battery because unlike personal computers, mobile phones do not have an unlimited power source. Most of the time, users have to charge their mobile phones daily. It's a known fact that when you turn on the mobile's Wi-Fi, 3G, or 4G data connections, your battery starts to drain. This is because once you turn on Wi-Fi, 3G, or 4G data connections, your mobile phone begins to exchange data, thereby consuming more power.

No one will want to visit your website or use your application if they feel that your website or application is draining their battery. So, you should always optimize your website or application in such a way that it uses minimum power. To do that, you need to have a better understanding about energy consumption in mobile phones.

How a 3G wireless state machine works

In the following diagram, you can see how a 3G wireless state machine works:

Learning about this will give you an idea about how mobile devices consume power when they start to exchange data using 3G:

  • As the preceding diagram indicates, the mobile device is initially on standby mode (A).

  • As number 1 indicates, when we start the 3G connection, it will have a 2 second latency. The mobile device will push to its maximum state and begin to consume maximum power (A to B).

  • The mobile device will continue to be in this state as long as it receives data. As long as it is connected to your website or app it will use battery power at a higher rate (B).

  • If your device didn't get data from the website or app, it will keep the connection for another 5 seconds, after which it will go to a lower power state (460mw) – number 2 (B to C).

  • If the device makes a connection with the website or app at this stage again, it will take 1.5 seconds to go to a higher level of power consumption – (C to B).

  • If the device didn't succeed to make the connection with the website or app (C state ), it would remain there for another 12 seconds and after that it will come to a standby mode (C to A).

Assuming that you have gained the basic knowledge about how 3G wireless state machine works, let's now see how the 4G Long-Term Evolution (LTE) wireless state machine works.

How a 4G LTE wireless state machine works

In the following image, you can see how a 4G LTE wireless state machine works:

Following is a description of the preceding figure:

  • In the idle state, the radio is off and uses low power (<15mW) (A)

  • In the connected state, the radio is on and uses high power (1000 — 3500 mW) while it either transmits data or waits for data (B)

  • When data is received, the machine goes to the Short DRX mode (T1)

  • If there is no data, it switches to the Long DRX mode (T2)

  • In the Long DRX state, the radio prepares to switch to the idle state but it's still using high power and waiting for data

  • If more data arrives, then the radio returns to the continuous transmission state

  • If it does not receive any more data, it switches to the low power (<15mW) idle state and switches off (T3)

In the context of both 3G and 4G data connections, as long as we keep the connection open to receive data, the mobile goes to full power and starts to consume more battery power.

For example, take a person who is supposed to bring goods from a supermarket and they use their vehicles to bring them in. If they didn't get any request to bring anything, then they are in an idle state, and do not waste any energy. Suddenly, someone comes up to them and asks them to bring a pack of sugar from the supermarket. So, now they have to start the car and go to the supermarket to bring that item. In this particular event, they have consumed some energy. Once they deliver the goods, the same person asks them to bring another thing from the supermarket. Now, they again have to proceed with the same routine, which again leads to consumption of energy.

Imagine a situation where they have to go through the same routine a couple of times. Apparently, it wastes both the person's time and money, and it could have been easily avoided if the task was planned properly and all the items were requested at the same time.

The same situation holds true for mobiles as well. So, keep in mind that when you develop a website or app, you have to think about these little details to build an optimized website or app.

Opening and closing connections

As you can see, mobile devices drain more battery power as long as they go to the 3G and 4G mode. So, in order to minimize power consumption, the developer should always remember to close the connection as soon as possible. The main reason for this is that the device goes to higher state, stays there for a longer period, leaves a connection open long after data has been transmitted, and the files are requested by the users in lengthy stretches of time.

However, as developers, we can minimize this issue by taking the following measures:

  • Downloading the content as quickly as possible

  • Grouping the TCP packets together when opening a connection

  • Prefetching the content

  • Closing the connection quickly after data is transmitted

By following these methods the developer can reduce energy consumption and network latency, and can load the website or application faster, which will lead to happier users. The following image shows the issue of a connection that was closed inefficiently. In the Bursts row of this image, the bursts (in green and red) between 10 and 40 seconds on the timeline were used to download data. While the burst (in blue) around the 80 second mark represents a request to close the earlier connection. Notice that the radio, represented on the RRC States row below the Bursts row, is turned back on just to close the connection. This can be seen at the 80 second mark below the narrow burst (in blue). The RRC States row also shows that the radio is not just simply turned on and off. It remains on for a set period, including time in a high energy state, then low energy, and all the related tail time (wasted energy) before it turns off.

Speed

When a customer enters the supermarket, they always seek and expect a fast and friendly service from the staff. If they got a good service from the store, chances are really high that they shared that experience with their friends and family, which will lead to more customers going to the supermarket. Also, if they have to wait for a long period in a queue to get clarification for something or if the support staff didn't offer a friendly service to them, they will share these bad experience with their friends. This will damage the store's reputation, which is very hard to restore. This is why many companies nowadays spend millions and billions of dollars on customer services. They will always try to keep the customer happy.

This is true for your website or app as well. If you want to attract more clients or users to your product, you should give 100 percent speed to the visitors all the time. This is why you should always provide an optimized website or app to the client. So, once they visit your application, they will get a smooth and fast experience that will generate more revenue. Also, unlike desktop users, mobile users don't stick to one place for a long period of time. They won't wait until your website gets loaded, they will just ignore your website and will visit your competitor's website. This is why speed matters.

According to researchers, a fast browsing experience will increase the following:

  • Minimum bounce rates: The percentage of visitors to a particular website who navigate away from the site after viewing only one page

  • Order size : Customers will order more products from your website

  • Customer satisfaction: Customer will love to browser your website

  • SEO rankings: Your website will get a better ranking from the search engines

In Google site rankings, loading time is given more weight (source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html). If you expect your website to have an increase in the rankings, you should consider your application's performance, and this is why optimization is necessary.

Bandwidth

When I was in school, I used a dial-up connection to connect to the Internet. It was a 56 K connection, and I still remember that it took ages to download a 3 MB file. Since then, Internet service providers have come a long way, and now many of us can download a complete movie in less than 5 minutes.

Although now we have faster connections, in many countries, the Internet is still not that cheap. Users have to pay a premium to get a connection, and they have to pay a monthly payment to sustain it.

In many countries, now it's easy to get a connection; with mobiles, it's just following a few steps and within 30 minutes, most of us can obtain a 3G or 4G connection. However, many of these packages have a bandwidth constraint. For an example, users will get faster connection with X GB but, once the user exceeds it, they have to pay extra.

So, when developing a website or app, you should always keep in mind that consuming their bandwidth immensely will result in them ignoring your website or app and moving on to an alternate website.

Managing the bandwidth is not that difficult, go through a few simple steps and you will be able to save a few extra MBs of your site, which will help you to increase revenue.