AMP Up WordPress with Google's Accelerated Mobile Pages

What is Google AMP?

“For many, reading on the mobile web is a slow, clunky and frustrating experience – but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.” – Learn more at ampproject.org


How much faster do Accelerated Mobile Pages actually load?

The short answer

The same content loads in almost 1/4 the time using Google’s AMP.

The long answer

PageSpeed Score
Load Time
Total Page Size
Requests
Original Version
92
5.0s
1.00MB
118
AMP Version
95
1.4s
206KB
21
THE AMP DIFFERENCE
+3
-3.6s
-794KB
-97
 
PageSpeed Score
Load Time
Total Page Size
Requests
Original Version
91
3.8s
1.24MB
145
AMP Version
89
1.0s
255KB
19
THE AMP DIFFERENCE
-2
-2.8s
-985KB
-126

How do I setup Google AMP in WordPress?

  1. Download the latest version of amp-wp via GitHub
  2. Upload, install and activate amp-wp
  3. Open one of your website’s posts in Chrome and view the AMP version of the post by adding /amp/ to the end of the URL (or alternatively ?amp=1 if custom permalinks are not enabled)
  4. See how much faster your AMP content loads by testing the normal URL and the AMP version of the URL with GTmetrix
  5. Modify the template.php as needed to fix any rendering errors in the new AMP version of your content, for me this primarily involved hiding a couple of elements that didn’t render properly via the CSS in the template.php file using display: none. Since this is such a new technology that just began integrating with WordPress, it may be a while before you’ll be able to just enable it and not find any conflicts and/or bugs with some of your existing plugins. For now you’ll have to customize the template.php file to make it work well with your WordPress website. So if you’re not comfortable editing PHP template files and the default template doesn’t work well enough for your WordPress website, you may want to hold off until the WordPress community finalizes this plugin a bit more first.
  6. If you’re using Google Analytics or Google Tag Manager you should be able to just copy over your tracking snippet into the template.php file for tracking purposes, if you’re using something else it may or may not be fully supported at this time
  7. Verify that your implementation is valid once you’ve made all your adjustments to the template.php file by opening Chrome in incognito mode (ctrl+shift+n), opening Chrome’s Developer Tools Console and then visiting one of your posts with the following added to the end of your URL: /amp/#development=1
    Here’s a live example for your reference: https://penguininitiatives.com/amp-up-wordpress-googles-accelerated-mobile-pages/amp/#development=1
  8. If your implementation is valid you’ll see the message “AMP validation successful.” in Google Chrome’s Developer Tools Console. You can see a screenshot of this below:Google Accelerated Mobile Pages (AMP) Validation Successful in Chrome Developer Tools Console
  9. Cross your fingers and hope Google spoils you with advantageous rankings and additional new mobile visitors via their new AMP-powered mobile carousel! If you use Google Analytics I’d recommend creating a new annotation noting the day you enabled Google’s AMP on your WordPress website. Worst case scenario you get super fast-loading mobile-friendly versions of all your content. Speaking of which, I’d like to see a feature where you can toggle all your links so they redirect to the AMP-powered versions instead of the original versions for Smartphone visitors only.

How to redirect mobile device users to AMP version of posts

Simply add the following code somewhere after your opening tag in your header.php file:

<?php
 
$useragent=$_SERVER['HTTP_USER_AGENT'];
 
if(!is_home() && is_single() && preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){
 
    $currentURL = get_permalink();
    header('Location: '.$currentURL.'amp/');
 
}
 
?>

Have anything to add about Google’s AMP?

If so, please enlighten us with your wisdom in the comments!

13 COMMENTS

  1. Yes in regards to custom banners, but no in regards to third-party ad networks not supported by Google. AdSense is obviously supported.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.