AMP is growing in importance in the web publishing world. This post describes a method for exposing AMP pages to all site visitors using DeviceAtlas so that all mobile visitors to your site get to benefit, 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 sites that have adopted 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 transformational—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 announced that AMP links would be surfaced in all searches. In fact this change has already taken place for some people.
AMP and Google search
So how does all of this relate to DeviceAtlas? 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:
<link rel="amphtml" href=“/path/to/amp/page”>
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 DeviceAtlas comes in.
Switching all mobile traffic
With a very simple rule you can use device detection
Regardless of the most appropriate implementation, the single DeviceAtlas property mobileDevice
can be used to trigger the logic to switch templates or serve a different URL entirely. For specific details on how to use each version of the product please refer to the Resources
section of our site where you will find API documentation
and code samples