3 ways to boost web performance on mobile: why real-time insight on connected devices matters

With a myriad of web-enabled devices on the market, it is essential for businesses to have a deep understanding of what devices their customers are using. By implementing device detection, you get real-time insight on all accessing devices, which gives you a clear and detailed view into how your website looks on any device and lets you ensure that it works great regardless of device type or connectivity level.

Mobile device fragmentation creates a complex online world

According to the DeviceAtlas Mobile Web Report, in Q4 2016 in the USA alone there were over 2,000 unique device models produced by 243 manufacturers used for web browsing in that period. These devices had 79 screen sizes, 24 operating systems, and used 23 mobile browsers.

As you can imagine, the landscape in other countries is very similar. While the share of web traffic for OSes other than iOS and Android is negligible, the variety of screen sizes, screen resolutions, mobile browsers, phone makers, phone models, and capabilities is truly immense. 

Making assumptions about what devices your customers are using to access web apps is risky at best, and a real threat to your business at worst. The result of such assumptions is a lack of device-focused optimization where web applications, ads or content adapts to each device’s screen size, capabilities, and level of connectivity in order to best serve the user’s needs and context.

What is "real-time insight" on connected devices?

Real-time insight on connected devices is achieved by analyzing requests to a web server and performing lookups via a high-performance algorithm and data structure containing characteristics of all web-enabled devices. The information returned can be used for a number of purposes, from content optimization to redirection, from targeting ads to web analytics. Reducing infrastructure costs, and identifying non-human traffic are also among potential use cases.

Real-time device detection is typically based on parsing HTTP headers and primarily the User-Agent (UA) strings that, according to the HTTP standard, contain a number of details on the request, such as software, rendering engine, and the device ID, which can be detected and searched in a database. This works well for the vast majority of devices. Other methods for detecting devices are based on analyzing other HTTP headers and using client-side libraries to ensure the highest accuracy and speed of detection.

Real-time insight on connected devices is often embedded in web servers, load balancers, and caching layers, such as Varnish, to facilitate the process of implementing device awareness into even the most complex, high-profile web applications. For these services, a high-speed, high-accuracy device detection module is a natural add-on to cater to the needs of customers looking for a web acceleration solution.

Three ways to use real-time insight on connected devices for web performance

Identifying devices requesting online content in real-time is essential to improve web performance on all devices, but especially on tablets, smartphones, low-end phones and other non-desktop devices where bandwidth can often be an issue.

The best way to go about doing this with device detection depends on how your web publishing system is set up. A device detection solution can be placed within the code of your application with a language-specific API (e.g. JavaScript, PHP or Java), or within your web server, load balancer, or caching layer infrastructure using specifically tailored modules. For example, device detection module for Varnish makes it possible to offer per-device-type content delivery directly from the Varnish cache, without even hitting backend web servers.

Here are the three ways to improve web performance with server-side device detection modules.

• Different experience for each device type

Real-time device detection is an essential ingredient in the Adaptive Web Design (AWD) methodology, which serves a different codebase for each type of device.

Each version of the website is specifically optimized to maximize conversion rate, reduce bounce rate, increase pages per session, and minimize page weight. For example, it’s a viable choice to feature 4K videos for a smart TV-optimized version of the website. Pop-ups, large banners, and auto-played videos should be omitted on websites tailored for small screen sizes and slow connectivity.

• Device detection-based adjustments to responsive websites

Instead of going fully adaptive, some businesses decide to apply device detection-based adjustments to a Responsive Web Design (RWD). This approach means that both adaptive and responsive methodologies are implemented in a single website.

One of the standard ways to do this is to optimize images according to the device type, so that only the correct-sized images are served to the detected screen size. Another common way of using device detection-based improvements to RWD is to detect whether or not a touchscreen is present in order to make sure that mouse or touch-based effects work. You can similarly optimize forms, search, menus, CTAs, or any aspect of the website that may create bottlenecks or degrade the experience on mobile devices.

• Serving AMP to all mobile users

Accelerated Mobile Pages (AMP) is an initiative promoted by Google aimed at significantly lightening websites accessed from search on mobile devices. It works well when accessed via search but bear in mind that with device detection it is possible to serve optimized pages to mobile users from any source, not just those referred by Google.

Regardless of the implementation method, a single device property, such as “mobileDevice” can be used to trigger the logic to switch templates or serve a different URL. In this way, the website loads fast on mobile and, at the same time, more search visitors are driven from Google, which highlights AMP in the search results.

Load times on mobile: Now a mainstream issue

According to Google’s DoubleClick study, mobile users will wait no longer than 3 seconds before abandoning a website that doesn’t load. At the same time, the average load time for websites on mobile is 19 seconds. This underlines the fact that today it is of the utmost importance to ensure that web performance is exceptional for all users which is achievable with real-time device detection modules.

For more insights on mobile web performance, device detection and the latest developments in the world of mobile devices, be sure to visit the DeviceAtlas blog.

Check out our on-demand webinar, 3 steps to optimize mobile delivery with Varnish, to find out more about boosting content delivery performance on mobile.