Serving AMP pages to all mobile users

AMP is growing in importance in the web publishing world. Here at mobiForge we have some serious misgivings with the approach taken by Google with AMP but the speed up in page loading time is inarguable. This post describes a method for exposing AMP pages to all mobile visitors using some server-side device detection so that all mobile visitors to your site get to benefit from AMP speed, not just those referred by Google.

Introduction to AMP

First introduced in October 2015, Google’s AMP project is now solidly on the way to becoming mainstream—you can see a list of platforms that support the technology here. To recap briefly, AMP is a project with the aim of speeding up the load time of web pages, particularly for mobile devices.

AMP works by restricting the use of standard HTML tags, instead offering a broadly comparable set of custom tags with strongly restricted behaviours. This approach, combined with optional use of a CDN, is designed to remove most of the main obstacles to high-performance websites. While AMP is spearheaded by Google it is technically an open source project. In summary, AMP guarantees some basic page behaviours though it does not prevent the web designer from simply designing in too many things.

Does AMP work? Yes, very much so. In our informal testing AMP versions of pages often loaded ten times faster than the non-AMP versions. The difference that this makes to casual web browsing is transformative—the friction associated with a click is almost entirely removed, making it much quicker to speculatively visit a page. Until recently, Google has limited AMP exposure to a carousel of links in news searches but recently changed the behaviour to surface AMP links in all searches.


AMP and Google search

So where are we going with this? Well, right now the only way that AMP pages are served to site visitors is if they are referred to a site by a Google search. Pages that have AMP versions are advertised through a link in the page header:

This header lets web crawlers (or any site visitor for that matter) know that there is a page corresponding to the current page, but built with AMP. Once the Google crawler knows about this relationship it can serve up the AMP link rather than the plain HTML link to mobile device users. These links are marked with an AMP label and a lightning bolt icon so that users have a sense that they should load quickly.

So, all well and good for Google users. But what about people that visit your site directly, or use any of the other search engines, none of which support AMP? Shouldn’t these people get the benefits of your speedy AMP pages also? Study after study says that website load speed is critically important so why not serve your fastest content to all mobile visitors? That’s where device detection comes in.

Serving AMP to all mobile traffic

With a very simple rule you can use any device detection solution to reliably tell you if a visitor is holding a mobile device or not. If so, you can then elect to serve them the AMP version of the requested page. Yes, this could be done with client-side JavaScript but then you lose all of the lightness and speed advantages of AMP since the browser has to load a page before this logic can even run.

The best way to go about doing this with a device detection library depends on how your web publishing system is set up. Some device detection solutions 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 infrastructure using web server modules for Apach, NGINX and IIS. Alternatively, this switching logic could reside in your load balancer layer with a HAProxy module, or in the web cache layer with a Varnish module. As a very simple example, something like the following could be used in the case of PHP:

Regardless of the most appropriate implementation, a single property indicating whether the device is mobile or not can be used to trigger the logic to switch templates or serve a different URL entirely. For specific details on  products you will need to check with the vendor. For DeviceAtlas in particular, the single property mobileDevice can be used to trigger the logic and all of the deployment options mentioned above are supported. Please refer to the Resources section of the DeviceAtlas site where you will find API documentation and code samples.

Leave a Reply

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Products

Market leading device intelligence for the web, app and MNO ecosystems
DeviceAtlas - Device Intelligence

Real-time identification of fraudulent and misrepresented traffic
DeviceAssure - Device Verification

A free tool for developers, designers and marketers to test website performance
mobiReady - Evaluate your websites’ mobile readiness

© 2024 DeviceAtlas Limited. All rights reserved.

This is a website of DeviceAtlas Limited, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland