Blog Post

Tips to Improve Mobile Site Speed

If search rankings are important to you make sure you are following these tips to reduce page load times on mobile.

Google is on a mission to make the web faster. In 2010, they included page speed as a contributing factor to search rankings, but this focused only on desktop search results. Starting in July, they will be extending that to mobile devices. Mobile load times will now be a factor in determining mobile search results.

It is no surprise that mobile performance is now going to be a consideration for search results. In the US alone, more than 8 in 10 internet users access the internet through a mobile phone regularly, according to eMarketer. The same study said 15% of internet users access the internet only from their phones, a number that is steadily increasing.

The search algorithm changes are expected to only impact the slowest pages and a small number of queries. The content on the page will still be an important factor, even if a page loads slowly. To ensure you don’t lose out on valuable mobile traffic, check out these tips to increase your mobile page load times.

Do you know how fast your mobile pages load?

Start by monitoring your mobile site performance from wireless providers to establish a baseline. Monitoring mobile pages from backbone or cloud locations won’t provide an accurate picture of how your site performs on a mobile device.

To examine the difference between backbone and wireless response times, I set up tests for the top five news sites, according to Alexa. Tests ran from Catchpoint backbone and wireless nodes in Los Angeles and Boston. The wireless tests ran on both 3G and 4 connections.

The table below illustrates average web page response times across the three node types. Response times on backbone nodes ranged from 3.2 seconds to 9.1 seconds.

Response times on 4G wireless nodes were slightly higher ranging from 5.5 seconds to 15.5 seconds.

4G response times were 60% to 75% greater than the backbone response times. 3G access led to response times that were 231% to 514% higher than backbone response times.

Table of backbone and wireless response times

Reddit’s homepage was the fastest site to load on 3G at 19.8 seconds, which represents a 514% increase over their backbone response times. When viewing performance per city, the 3G connections show greater fluctuations while performance on 4G and backbone is much more stable.

Response time from Boston:

Reddit performance from Boston

Response time from Los Angeles:

Chart of Reddit performance from Los Angeles

Consider adaptive or responsive web design

Responsive and adaptive web design make your site compatible with both desktop and mobile browsing.

Responsive web design allows web pages to adjust to the operating system and layout of any browser, desktop, or mobile. The same HTML is served to all devices and CSS changes the appearance of the page based on the device.

For example, a three-column content layout on a desktop becomes a two-column layout on a tablet and a one-column layout on a smartphone. Such as the Guardian homepage:

The Guardian mobile home page

With adaptive web design, the web server optimizes page rendering by delivering only the elements necessary for the experience on the user’s specific device and operating system. Adaptive resizes images and may discard elements like JavaScript or Flash, delivering a tailored version of the site to a user’s mobile device.

Adaptive sites have a performance advantage over responsive sites because they don’t download unnecessary elements.

In Is Your Site Designed for Optimal Performance, we analyzed the performance of 30 websites -15 using adaptive design and 15 using responsive design. The table below compares key metrics as tested from 4G and last mile Catchpoint nodes.

The adaptive websites loaded 40.2% faster on average as they downloaded significantly less content.

Adaptive vs responsive performance

To ensure your mobile site performs well on mobile devices, consider switching to adaptive web design.

Consider the following if adaptive isn’t an option.

Reduce file sizes

All users, not just mobile users, can benefit from smaller file sizes. In the last three years, the median page weight has increased across both desktop and mobile devices. According to HTTPArchive, desktop pages have increased approximately 30% while mobile pages have increased 91%.

Chart of total kilobytes from July 2015-June 2018

For the media sites, all except CNN have page weights between 1.1 MB and 2.6 MB.

Chart of total megabytes downloaded

CNN is the outlier with more than 5MB of content downloaded to a mobile device. CNN does offer a mobile version of its site which is much smaller in size as there are no images. This version of the page downloads only 73 KB.

To reduce the size of files:

  • Enable GZIP compression on HTML, CSS, XML, and JavaScript.
  • Minify CSS and JavaScript to eliminate comments and white space.
  • Compress and optimize images. Reducing image size usually doesn’t affect the user’s perception.
  • Consider alternate image formats that are smaller such as WebP.

Audit third party tags

Third-party tags, whether for advertising, social media, or content services, are a potential pitfall for web performance. Just as the total weight of web pages has increased so have the bytes attributed to third-party elements. In The Performance Impact of Tags 2.0, we identified growth in bytes from third-party content of between 3% and 11% across multiple industries.

A greater number of hosts is an indicator of a greater amount of third-party content.

If third-party hosts slow down or become unavailable, your site slows down. Consider the following:

  • Know where your tags are and what functionality they provide.
  • Question whether third-party content is necessary for your mobile and desktop sites.
  • Install a tag manager to help you find or eliminate tags that perform duplicate services.

Avoid Domain Sharding

Delivering content across multiple domains, AKA domain sharding, was once a popular technique for improving page performance. Opening up multiple connections to retrieve objects in parallel addressed the shortcomings of HTTP/1.1. On mobile, this technique can hurt more than it helps. The overhead of additional DNS resolutions and TCP connections may penalize performance. The emergence of HTTP/2 has also made this technique less relevant.

When looking to improve mobile page response times, do some analysis to see where changes can be made and regularly test to see how those changes impact the user experience. Faster pages mean higher search rankings and happier users.

The number of connections made by the news sites varied considerably, and it is not a big surprise that the sites with fewer connections are the fastest performing sites on 3G and 4g connections.

If search rankings are important to you (and chances are they are important to your company) make sure you are following these tips to reduce page load times on mobile devices. Continually measure the performance of your mobile pages from mobile devices and wireless providers to make sure you are delivering the best possible experience to your end users and your search rankings don’t drop.

Synthetic Monitoring
DNS
SLA Management
Workforce Experience
Media and Entertainment
SaaS Application Monitoring

You might also like

Blog post

Introducing WebPageTest by Catchpoint's First Free Web Performance Course

Blog post

Three Tactics to Boost SaaS Performance (and One that Safeguards your Investment)

Blog post

Incident Review For the Facebook Outage: When Social Networks Go Anti-social

Blog post

Introducing Opportunities & Experiments on WebPageTest: Take the Guesswork out of Performance