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
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:
|
1 |
<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 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php /* Include the DeviceApiWeb library */ require_once dirname(__FILE__).'/../../../Api/Device/DeviceApiWeb.php'; // Place the path to your JSON data here define('JSON_FILE', '/path/to/the/datafile.json'); // Our device oriented website URLs define('DESKTOP_URL', '/desktop'); define('AMP_URL', '/amp'); /* Create a DeviceApiWeb instance */ $deviceApi = new Mobi_Mtld_DA_Device_DeviceApiWeb(); /* Load the DeviceAtlas JSON data file and get properties */ $deviceApi->loadDataFromFile(JSON_FILE); $properties = $deviceApi->getProperties(); / * It's a desktop browser or mobile device masquerading as desktop browser */ if ($properties->contains('isBrowser', true) || $properties->contains('isMasqueradingAsDesktop', true)) { // redirect to the URL/website designed to handle desktop browser requests redirectTo(DESKTOP_URL); } /* It's a mobile device */ if ($properties->contains('mobileDevice', true)) { // redirect devices to the AMP page redirectTo(AMP_URL); } /* Anything not handled would be redirected to the default URL (desktop experience) */ redirectTo(DESKTOP_URL); /** * Redirect to URL */ function redirectTo($path) { header('Location: ' .getBaseUrl() . $path); exit; } /** * Get the BASE URL * Note that this is not a sophisticated solution but sufficient for this example */ function getBaseUrl() { return rtrim(str_replace('index.php', '', $_SERVER['REQUEST_URI']), '/'); } |
Leave a Reply