Code Responsible

Skip navigation

Your mobile website is slow

mobile page speed tests

How long should a mobile website take to load? My guess is it should take less than 3 seconds to load, but I wanted to hear what others thought, so I went to Twitter for the answer. The responses were all very similar, between 3 and 5 seconds. The best response to my question was from a designer colleague, Travis McCleery, “instant”.

In order to help better understand how to improve mobile website load times, I started to look at how popular company websites compare loading on mobile devices. Leveraging the Chrome DevTools to help throttle the speed, I accessed these sites on both 4G and 3G networks. Surprisingly, a lot of these websites did not meet the criteria of instant, or at least below 3 seconds.

To help get an idea of typical mobile website speeds, the table below shows the speeds of a few well known company mobile websites. Each is loading the company’s homepage, viewed using incognito (to avoid caching), on an iPhone 6 throttling the network to simulate both 4G and 3G network speeds.

Company 4G 3G
Facebook 960 ms 3.44 s
Twitter 408 ms 1.56 s
Dropbox 12.22 s 31.15 s
Evernote 3.85 s 13.79 s
Uber 6.57 s 37.96 s
Lyft 2.98 s 13.67 s
Netflix 1.71 s 7.13 s
HBO 7.41 s 26.18 s
Hulu 4.78 s 25.62 s
Spotify 4.79 s 20.87 s
Rdio 3.26 s 22.98 s
Apple 2.57 s 13.71 s
Microsoft 4.58 s 22.58 s
Amazon 1.24 s 3.08 s
Walmart 6.46 s 10.23 s
Best Buy 4.99 s 11.72 s

It’s interesting to get an idea the page speeds of well known mobile websites, but it’s also good to understand what causes them to load fast or even in some cases slow.

I found the best way to identify how to speed up a mobile site was to compare some of the faster-loading websites against the slower examples. I started to recognize some common themes as to why some of the examples were loading slower than others.

HTTP requests

The example websites that were slow, tend to have a significantly larger amount of HTTP requests. In fact, the requests are typically double that of a faster loading example website. Reducing the amount of HTTP requests your website makes can help improve the overall load time. The common areas to improve would be to reduce the amount of JavaScript files, CSS files, images and tracking pixels.

Combining files is a great way to reduce the amount of HTTP requests. A good start is combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. It’s also a good idea to minify both the JavaScript files and the CSS files to reduce the file size. To help automate concatenating and minifying files, there are a lot of great tools like Browserify, Grunt, Gulp, Webpack that make it part of the build process. A great technique to reduce the amount of image requests is to create Sprite Images. JavaScript and CSS files can be combined together.

As HTTP/2 protocol becomes more widely adopted by browsers, the number of HTTP requests becomes less of a concern. New HTTP requests cause less overhead because HTTP/2 uses multiplexing to allow many messages to be combined together on a connection at the same time without blocking another request. It also adds header compression, so that the normal request and response headers don’t dominate your bandwidth.

javascript references

Image file size

Loading large desktop sized images isn’t necessary on a mobile. These images should be optimized for mobile. There were a couple instances in the example websites where the large desktop images were also served to the mobile version. The large image typically bleeds off the canvas and could have been cropped to cut down on the overall file size. For background images loaded in the CSS, media-queries will allow for different image sizes to be used for the various screen sizes. For inline responsive images, Srcset and Picturefill are two great techniques.

Unnecessary files loaded

Websites are becoming more interactive and typically have content or images that aren’t visible to the user until they interact. Things like carousels, accordion menus or simple show and hide items don’t necessarily need to be loaded to the user right away. Loading in the background after the page has loaded can help reduce the initial load time.

Webfonts

Webfonts have always been extremely hard to balance for performance. The initial request to web fonts can be extremely taxing on the overall rendering of the page. With desktop browsers, there’s a better cache that helps prevent that additional load time once a font is cached. That still doesn’t prevent the tax on a user’s first visit to the site and mobile browser caches aren’t as good as a desktop browser. Maybe you only load web fonts to larger screen sizes or lazy load the fonts in the background.

With growing mobile internet usage, it has become more important for websites to cater to mobile devices. It’s important for users to have a great experience whether they are accessing a website from a broadband connection on their desktop, or on a mobile network on their phone.

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

4 Responses to “Your mobile website is slow”

Leave a Reply

Comment Form