Mobile web performance anti-patterns

When it comes to optimizing web performance, mobile devices need a lot of attention. There are several misconceptions among web professionals, from designers to developers and operations staff, that contribute to a diminished user experience. I’ll detail these anti-patterns below and offer some tips for overcoming the most common mistakes.

#1 Waiting too long to apply performance optimizations

The first big issue is that teams don’t sufficiently prioritize performance from the very early design stages. Performance considerations should be incorporated throughout the whole process by the entire team, not just executed by a small team after the project is done. When you don’t think about performance for mobile devices from the start you end up working towards the wrong goals, like using a client-side only solution (compared to a server-side or mixed-side solution) or using client-side responsive web design techniques only. Those aren’t really goals; they’re solutions to problems. When you make performance the goal, you can properly analyze the situation, determine what problems you’re facing, and come up with the right solutions to solve them. Stop applying optimizations at the end—because often by the end, it’s too late.

#2 Assuming users have 4G

4G users are still a minority worldwide. And about 25% of the time, those minority 4G user connections are being downgraded to 3G. Most people don’t understand that even 4G networks have at least 5 times more latency than a home wired connection. This misconception leads companies to ignore network performance as unimportant and to focus instead on mobile screen size and design—but to the detriment of most of their customers’ actual user experience.

#3 Using the wrong measurement tools

How do you measure mobile device web performance? It is common just to use a desktop browser (perhaps in mobile emulation mode) with your high-speed network connection at home. But this is not enough. For accurate results and useful conclusions, you need to use real devices (not the latest smartphone) and real network data, or at least CPU throttling, to measure mobile performance.

#4 Misunderstanding the mobile web ecosystem

Most people assume that Android users are on Chrome, and iOS users are on Safari. I’m sorry to tell you that is not completely true, and that misconception might be affecting how your users perceive your performance optimizations. According to StatCounter, 20% of Android users are on UC Browser, 10% are on Opera, 9% are on Samsung Internet, and 6% are still on the old Android browser. And the MOVR Report states that 38% of iOS users are browsing within webviews, such as Facebook’s or Twitter’s in-app browser, which is not exactly Safari. When you don’t understand the ecosystem, you don’t test, measure and optimize for the real targets out there, and you might be making the wrong conclusions about performance goal achievements.

#5 Poor image optimization

Typical problems you’ll encounter when delivering resources to mobile devices have to do with responsive images, not optimizing images enough, and sending more bytes than necessary. If a device has a 4K screen, should you send a 4K image over a cellular network? Is it worth it? It’s incredible how poor the typical image optimization is today. Take advantage of new compression algorithms and formats, Client Hints, visual appearance, and compression.

#6 Underestimating JavaScript, third party scripts, and web fonts

Just because it renders properly on desktop doesn’t mean it’s okay for a cheap Android phone on a 3G network. This goes for JavaScript, third party scripts, and web fonts. Most designers are underestimating the effect that web fonts have on the above-the-fold content, and are not optimizing the files. Removing unused characters or reducing glyphs, for example, can go a long way towards improvement.

#7 Misunderstanding HTTP/1.1 vs HTTP/2 performance

Some tricks that were suggested in the HTTP/1.1 era to reduce requests, such as using image sprites, become anti-patterns when you start serving on HTTP/2. However, saying that every trick on HTTP/2 is now an anti-pattern, is also an anti-pattern. For example, Khan Academy found that bundling JavaScript files is still a good idea on HTTP/2. If you’ve recently made the jump to HTTP/2, or are planning to soon, be sure you investigate and address the potential mobile performance implications.

Mobile needs special attention

Knowing that 55% of web traffic comes from a mobile device or tablet should motivate you to pay special attention to these devices and make mobile web performance a priority. Your goal is not to be responsive, or to use the latest client-side framework; your real goal is positive user perception, and for that you need to make performance optimization part of the whole process—from design to development—for the whole team. To learn more how to achieve this, download your free copy of my report Mobile Performance Tips: Measure and Optimize.

---

This post is a collaboration between HPE and O’Reilly. See our statement of editorial independence.