Mobile CDN - Speeding up Content Delivery on All Devices
When it comes to web performance, people are always discussing different optimizations in which you can speed up your website. One aspect, unfortunately, that is quite frequently overlooked is how mobile devices come into this equation. In today's post, we want to show you why it is important to utilize, what we call a mobile CDN, and how it can help ensure fast load times across all devices, whether they be desktops, laptops, or mobile phones. Mobile is changing the way we need to think about the web.
Importance of mobile on the web
According to Similar Web, about 57 percent of customer traffic in the United States comes from mobile devices (as of September 2022). A lot of businesses sometimes don't realize just how much mobile traffic they might be getting. While this can vary quite a bit in different categories, it is always important to check yourself in analytics. If over half of your traffic is from mobile devices, that might mean you need a whole different mindset when testing your site. In that scenario, you might even want to spend more time optimizing mobile than you do desktop.
Generally, when designing your website, you should treat the two entities - desktop and mobile - separately. Otherwise, the user experience when accessing desktop versions of websites on mobile is usually compromised in terms of usability, load times, and functionality. The user interface, technology resources, and form factor of Desktop and mobile differ. If you want to achieve the best possible performance for mobile websites, you can't avoid optimizing the mobile websites separately. Without separating them, you must accept a negative impact on the user experience.
We decided to pool three random websites ourselves, all in different categories and or markets, to see just how much web traffic was coming from mobile devices versus desktops. You can easily do this in Google Analytics by digging into the "Mobile Overview" under Audiences.
Website 1: 84% desktop traffic and 16% mobile/tablet traffic
Website Category: Marketing/Advertising
Website 2: 19% desktop traffic and 81% mobile/tablet traffic
Website Category: Ecommerce/Food
Website 3: 91% desktop traffic and 9% mobile/tablet traffic
Website Category: Web Development
The results vary quite a bit based on the category and audience. Some were desktop-heavy, while another was mobile-heavy. The ecommerce/food website we looked at had over 81% of its traffic from mobile devices. This means everything done on that website should really be mobile first, then desktop.
And if we take a look at the amount of data being used by mobile devices, it has skyrocketed in the past few years and isn't slowing down anytime soon. A big reason for this is due to third-party advertising networks. According to a New York Times case study, more than half of the data used on mobile devices over news sites come from ads. These are scary figures!
According to Cisco, traffic from wireless and mobile devices will account for over two-thirds of all IP traffic by 2023. Below is a look at mobile data traffic measured by Ericsson in recent years. From 2011 to 2016, the cumulative growth in mobile data traffic was nearly 1,600%!
Pat Meenan, an Engineer at Google, and Daniel An, Mobile Web at Google, published a great article called Why Marketers Should Care About Mobile Page Speed. It details how current mobile sites lag behind desktop sites in key engagement metrics such as average time on site, pages per visit, and bounce rate. While this is not really news to most of us, the actual stats are higher than you might think. The average U.S. retail mobile site loaded in 6.7 seconds, but, according to the most recent data, 40% of consumers will leave a page that takes longer than three seconds to load.
In the article they discuss some of the major factors mobile sites seeing these long load times and lower conversation rates, which include:
- The number of page elements
- The number of images
- DOM ready times and full-page load times
These are all crucial issues that should be addressed and or fixed on your origin server, and we have discussed most of them in our past blog posts on website optimizations, image optimization, and what is blocking the DOM? Mobile devices require things to be optimized even more than desktop. However, they also didn't mention how you can drastically decrease these load times by simply implementing a mobile CDN. It is important to note that a CDN isn't a magic fix. You still should always optimize your website as best you can, and then a CDN will handle speeding up your optimized content.
Mobile CDN
In 2021, we could observe that the relative share of 4G-enabled devices and connections has surpassed all 3G and below networks. 4G will be the dominant mobile network connectivity by 2023. In 2019, 5G connections appeared on the scene. 5G deployments are expected to grow from 13 million in 2019 to 1.4 billion in 2023. The bad news is that millions of devices worldwide still running on 3G and underlying networks. This means you still need to optimize and find ways to reduce load times! One easy way to do this is to have a CDN that brings your mobile content closer to your visitors to reduce latency.
If you aren't familiar with CDNs, make sure to read our in-depth post on how CDN works. They can also benefit you in additional ways, as it pertains to mobile, such as:
- Use of Gzip compression to control mobile data traffic
- Use of video pacing to control excessive progressive downloading of media content
- Use of TCP acceleration to adjust with the network environment of the mobile user
50% of your 1-second page load time budget on mobile is taken up by network latency overhead.
- WPT
We wanted to show you the difference in latency times with and without a CDN implemented. This is simply from a connectivity perspective. In this test we are again using our test site (hosted in Dallas, TX) and KeyCDN's ping test tool which conveniently allows us to simultaneously test from multiple locations:
And here are the results between the two.
| Server (POP) location | No CDN RTT (ms) | KeyCDN RTT (ms) | Difference |
|---|---|---|---|
| New York, US | 36.908 | 18.096 | - 50.97% |
| Dallas, US (origin server) | 0.751 | 1.138 | 51.53% |
| San Francisco, US | 39.645 | 18.900 | - 52.33% |
| Frankfurt, DE | 123.072 | 3.734 | - 96.97% |
| London, UK | 127.555 | 4.548 | - 96.43% |
| Paris, FR | 112.417 | 0.689 | - 98.5% |
| Amsterdam, NL | 118.418 | 10.364 | - 91.25% |
| Singapore, SG | 202.682 | 2.002 | - 99.01% |
| Sydney, AU | 191.848 | 0.705 | - 99.63% |
| Tokyo, JP | 130.804 | 3.379 | - 97.42% |
The latency between our origin server (without a CDN) and our POPs (with a CDN) on average is decreased by 83%! You can also run your own speed test comparison. Both WebPageTest and Chrome DevTools have great methods for throttling your internet speed and emulating a mobile device at 2G, 3G, LTE, etc. You can also add custom networking throttling profiles. This can be beneficial if you are wanting to test more accurately at a specific speed.
Summary
As you can see, adapting to mobile on the web is very important. The number of people using different types of devices is expanding exponentially at a rapid pace. We first recommend optimizing your site for mobile as much as possible and then taking advantage of a mobile CDN to get the content closer to your visitors and decrease the latency.