Mobile & WiFi: It’s a Noisy Conversation! - PowerPoint PPT Presentation

About This Presentation
Title:

Mobile & WiFi: It’s a Noisy Conversation!

Description:

Responsive websites and fast web application delivery is a challenge under low bandwidth and latency, especially when using wireless connection. Read this elaborate explanation on the reasons for slow wireless connection and how you can solve the issues. You will get to know about how to optimize images, HTML streaming for faster application delivery using wireless connection and thereby enhance user experience for your website. To know more, visit: – PowerPoint PPT presentation

Number of Views:54

less

Transcript and Presenter's Notes

Title: Mobile & WiFi: It’s a Noisy Conversation!


1
MOBILE WIFI ITS 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 couldnt 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?
Lets 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 wouldnt 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
Operator Network Type Mean Latency (ms)
ATT HSPA 137.9376
ATT HSPAP 137.7301
ATT LTE 96.24045
ATT UMTS 122.2991
Sprint EVDO A 188.8764
Sprint LTE 107.7518
Sprint eHRPD 192.5983
T-Mobile HSPA 131.4028
T-Mobile HSPAP 117.7695
T-Mobile LTE 89.39846
T-Mobile UMTS 116.4344
Verizon EVDO A 133.295
Verizon LTE 94.51151
Verizon eHRPD 157.9791
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? Im 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,
ATT, Sprint and T-Mobile compare?
4
So what is more important, latency or bandwidth?
For my money, latency is more important than
bandwidth. Dont get me wrong if there isnt
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
110
100
90
80
70
Page Load (seconds)
60
50
40
30
20
10
0
Latency (milliseconds)
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, Im 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 cant hear
as well and my voice doesnt carry as far because
everyone is talking causing background noise.
Its 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 isnt 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. Heres a link sponsored by the good
people at Velocity that goes straight to the
books 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, its 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, Microsofts 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 Blums
post on Dynamic Image Resizing. If you havent
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 Peters 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 connections
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.
Write a Comment
User Comments (0)
About PowerShow.com