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?
- Download the latest version of amp-wp via GitHub
- Upload, install and activate amp-wp
- 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)
- See how much faster your AMP content loads by testing the normal URL and the AMP version of the URL with GTmetrix
- 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.
- 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
- 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 - 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:
- 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!
. Speed up your site now!){kind=link}
Is there any support for banners?
Yes in regards to custom banners, but no in regards to third-party ad networks not supported by Google. AdSense is obviously supported.
Why does the AMP plugin creating a new page for the AMP version of the post. Is this the standard way?
Thanks for this post Andy. I’m adding this to our suite of sites. Will be interesting to see what happens with rankings.
why not use:
AMP Plug-in
Glue from YOAST
AMP Styling by PageFrog
It will immediately solve the SEO meta data issues and adsense. I wrote a guide around this if you think it will be useful to your readers: http://digitalinsightsworld.com/digital-marketing/accelerated-mobile-pages-in-wordpress/
@Luchel,
All AMP pages should have canonical to the original page. Then you dont have to worry about duplicated content
Great plugin which adds ability to create AMP version of WordPress site in a few clicks: WP AMP — Accelerated Mobile Pages for WordPress and WooCommerce
how to make automatic redirect mobile traffic to amp page version?
Great idea! I’ve updated this post with code that will do exactly that. Please see “How to redirect mobile device users to AMP version of posts” above and enjoy!
I’ve same quastion with Teguhlw, are there a way to make automatic redirect mobile traffic to amp page version?
I’ve updated this post with code that will do exactly that. Please see “How to redirect mobile device users to AMP version of posts” above and enjoy!
Can your code redirect just posts and not pages ?
That’s what it does, but if you want more control I recommend just using this plugin: https://wordpress.org/plugins/accelerated-mobile-pages/