Mobile & WiFi: It’s a Noisy Conversation!

1. MOBILE & WIFI: IT’S A NOISY CONVERSATION! BY LANE WILLIAMS

2. I met a co-worker the other day at a local coffee shop and by the end of our conversation; I realized I had been shouting for the last 60 minutes. Was I mad at my co-worker? No. Had they done something to make me want to shout at them? In a word, yes. My co-worker wanted to meet at a coffee shop! Between the noise of the sumptuous caffeinated drinks being created and the roar of everyone else that wanted to meet at that coffee shop, I couldn’t help but shout. To make matters worse, the mobile and WiFi connections were slow! When I got back to the office, I realized I could speak at a normal volume and people could still hear me. Even better, my mobile and WiFi connections were fast again! Pure coincidence? Let’s take a look. First, the speed of any internet connection comes down to latency and available bandwidth. If you compare latency and bandwidth to your morning commute to the office, latency is the time it takes to commute to and from the office. (In computer speak, we call that round trip time or RTT.) The numbers of paved lanes on the highway is the available “bandwidth” for your car. The more lanes of traffic, the more cars the highway can support at peak traffic times. In a perfect world, there wouldn’t be any other cars on the road slowing you down during your morning commute to the office. For example, if the office were 15 miles away and you averaged 60 miles per hour, then your trip to and from the office (RTT) would take a total of 30 minutes. If your workplace was 120 miles away, your RTT would 240 miles and the commute would be a total of 4 hours.

3. In the case of wireless networks, latency can be a major problem. The below table from October 2013 shows different levels of latency based on carrier and the specific wireless technology. Notice the huge variance based on specific wireless technology? I’m not sure about you, but my morning commute never falls into the “perfect” category. I live in a big city and the morning commute is always jam packed with other people trying to get to work. This means all the lanes are filled with other vehicles and if there are more cars than paved lanes, my commute slows down. In heavy traffic, I have effectively maxed out my available “bandwidth.” The same thing happens with internet links and routers. [3G/4G wireless network latency: How do Verizon, AT&T, Sprint and T-Mobile compare?]

4. So what is more important, latency or bandwidth? For my money, latency is more important than bandwidth. Don’t get me wrong: if there isn’t enough bandwidth, then there will be too much congestion, and your connection will be slow. However, if your latency is too high, no amount of bandwidth in the world will make your connection go faster. O3b Networks performed a study showing the effects of bandwidth on page load time: Web Page Load Time: wsj.com to Florida 120 110 100 90 80 70 Page Load (seconds) 60 50 40 30 20 10 0 Latency (milliseconds) 52 104 152 202 252 302 352 452 552 652 752 852 952 1052 1152 1252 [What is Network Latency and Why Does It Matter? – O3b Networks]

5. As you can see from the chart above, higher latency has a direct and consistent effect on page load time. Traditional CDNs helped address some of the latency problem by deploying servers and caching content outside the data center. However, CDNs cannot deploy their servers inside mobile networks. Why not, you ask? Mobile networks are “closed” networks and the carriers strictly control access. Mobile carriers deploy “gateways” that connect mobile devices to the internet.[Internet 101: How does the Internet get to my mobile phone? Is it different from a desktop?] All wireless networks, regardless of the technology, are a shared platform and have very similar constraints. Different from a wired network, where you have a physical cable that runs from your computer to a router or switch, wireless networks are a shared medium. All the users on the wireless network are sharing/competing for resources. The constraints for wireless networks are available bandwidth, strength of signal and background noise. All wireless technologies work within a predefined frequency range. For example, Long Term Evolution (LTE) wireless carriers operate from 1.4Mhz and 20Mhz. The LTE specification provides for peak download rates of 300Mbp/s. WiFi networks using 802.11n and 802.11ac standards use 2.4Ghz and 5Ghz, respectively. The specification for 802.11ac provides for peak download rates of 866Mbp/s. At the coffee shop, I’m pretty certain my download rates were not anywhere close to 300Mbp/s or 866Mbp/s. Why? Similar to my experience of talking to my co-worker in a noisy location, the proliferation of mobile phones and WiFi enabled devices are increasing the “noise” levels on wireless networks.

6. I did some reconnaissance at the same coffee shop using the app WiFi Scanner and saw the following: From the coffee shop, there were 12 wireless networks running in the 2.5Ghz spectrum. In addition, there was a significant amount of overlap in the used channels. In the image above, when you see boxes overlapping with one another, that shows wireless routers sharing the same channels. The result? More noise because the wireless routers are trying to share the same wireless resources.

7. All the wireless networks are also causing more radio frequency (RF) background noise. Similar to my conversation with my co-worker, I can’t hear as well and my voice doesn’t carry as far because everyone is talking causing background noise. It’s the same for the WiFi networks. The microwave oven heating up your delicious scone may be generating interference as well. Many high powered microwave ovens operate around 2.4Ghz and can interfere with wireless networks. Strike 2. The only thing you might be able to control is strategically positioning yourself closer to the wireless router in the coffee shop to get a stronger signal. This plan might work on a slow day, but on a busy day it is difficult at best to get any seat. Strike 3. This isn’t just a WiFi problem. Ever try posting that epic selfie at the sporting event or concert? Imagine the amount of background noise at an NFL game with 60,000 people in attendance. How many phones trying to make connections? 55,000? If you really want to understand the underlying details (and challenges) of wireless networks and communications, please read the brilliant book by Ilya Grigorik, High-Performance Browser Networking. Here’s a link sponsored by the good people at Velocity that goes straight to the book’s section on Performance Fundamentals of Wireless Networks. Is communicating on wireless networks a hopeless cause? Not necessarily. When you are speaking with someone in a noisy location, how do you compensate? Hand signals? Making faces? While I may have made faces at a wireless network, it has never helped my performance. The key is saying what you need but doing it with fewer words. In the case of wireless networks, you can “say” less with your web applications by delivering the same quality but doing it with fewer bytes.

8. IMAGE OPTIMIZATION Since images are typically the largest resources on a web page, they are a great place to start. First, remove metadata from the images. Metadata is information attached within the image file that provides additional details about the image. These details could be name, location of the picture, etc. Since this image will be embedded in a web page and any descriptions will come from the HTML, it’s not needed. Second, compress your images. There is a constant struggle between the design team that want glorious high definition images and the web team that wants a fast web site. Image compression can help you find a middle ground, especially with some of the new image formats. WebP is a new image format that supports lossless or lossy compression for JPG and BMP images. WebP is natively supported on Chrome and Opera and will allow you to deliver the same quality image using fewer bytes. Similarly, Microsoft’s IE 9 and later supports JPEG XR and allow higher image quality with fewer bytes.

9. Notice any differences between these two images? The real difference between these two images is the first image is 3.6 MB and the 2nd image is 459 KB. That is over a 7X data reduction with no discernable difference in quality!

10. At Instart Logic, we support automatic transcoding of all your existing JPG and PNG into WebP or JPEG XR based on the web browser making the request. If the request is from Chrome, we transcode the image to WebP. If the request is from IE9 or greater, we transcode the image to JPEG XR. Automatically. If you are a fan of this blog, you have probably already read Peter Blum’s post on Dynamic Image Resizing. If you haven’t read his post, skip to the section on Sending the right images to the right device. If your customer is accessing your site on huge desktop monitor, the images need to be higher quality so they appear clear and crisp on such a large display. Do you need the same quality image displayed on a mobile phone? Most likely not. They key is “right-sizing” the image for the screen size and screen quality for the device accessing the web site. As Peter’s post describes, Instart Logic has the ability to dynamically scale images sizes up and down based on the device. This allows us to send the “right” number of bytes and quality of image based on device.

11. HTML STREAMING Now that our images are compressed, how can we make the most of our wireless connection’s limited bandwidth? By using HTML Streaming with the Instart Logic cloud service. The cloud service understands the makeup of dynamic HTML pages and can identify sections of HTML that are the same across different users accessing the same page or application. Examples are CSS and JavaScript files, header information and metadata, along with logos and other non-unique navigation elements. Normally for sites serving dynamic HTML, the backend web server has to generate unique HTML for each user. This process, combined with the time required to deliver the HTML across the Internet, means the browser idles after making the initial request. With Dynamic HTML Streaming enabled, the cloud service takes advantage of this idle time to send any non-unique portions of the HTML down to the browser from an Instart Logic serving location close to the end user making the request. The cloud service does this by looking at the HTML for the same URL for previous users’ requests. If the content is dynamic HTML, it looks for portions that are the same across different users. This information is then stored in the Instart Logic service. When the same page is requested the next time, the non-unique HTML is sent immediately to the requesting browser while the dynamic content is requested from the originating backend web server. As a result, the browser starts processing the non-unique sections and downloading components needed to render the page (for example JavaScript, CSS, fonts, and other items contained in the non-unique sections) rather than sitting idle.

12. Traditional waterfall

13. Instart Logic waterfall

14. In the above waterfall charts, notice how embedded resources in the Traditional CDN waterfall wait to be downloaded until the base HTML page is downloaded? In the Instart Logic waterfall, there are resources that are being downloaded in parallel with the base HTML page. This is HTML Streaming in action. In short, the HTML Streaming takes advantage of whatever wireless bandwidth is available to increase application performance. CONCLUSION Wireless networks have made our lives more connected and given us the expectation that we can find most any information in our connected world in mere seconds. Sometimes, getting that web site or source of data takes much longer. In addition, the ultra-connected world is challenging the established approaches for delivering web performance and new ideas are required. When that happens, consider all the mobile devices and the noise around you and revel in the thought that your web site is accelerated by Instart Logic and is “saying” more with fewer bytes.