/ Register

Join the community today
Register Now

WebPerf Diving Into Google Accelerated Mobile Pages (AMP)

Discussion in 'All Internet & Web Performance News' started by eva2000, Mar 10, 2016.

Tags:
Previous Thread Next Thread
Loading...
  1. Mar 10, 2016 #1
    eva2000

    eva2000 Administrator Staff Member

    33,630
    7,446
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,446
    Local Time:
    7:53 PM
    Nginx 1.13.x
    MariaDB 5.5
    The mobile web is constantly evolving and Google is always experimenting with new ways to speed up content delivery and performance across all devices. The new Accelerated Mobile Pages (AMP) project from Google is aiming to do just that by allowing websites to build light-weight web pages using their open source framework, built on AMP HTML. Today we will dive into how to use Google AMP, show you examples of it in practice, and also discuss some of the pros and cons of this new project.


    What is the Google Accelerated Mobile Pages Project?


    [​IMG]

    The open source initiative known as the Google Accelerated Mobile Pages Project was originally announced on October 7, 2015 by the Google web team. It officially started showing up in SERPs on February 24, 2016. The inspiration for the project was that Google wants the same code to work across multiple platforms and devices, no matter what type of phone, tablet or mobile device people are using and that it load instantly.


    40% of people will wait no more than 3 seconds before abandoning a website. – think with Google
    ​

    AMP is available for everyone to use and the HTML source code can be found on their GitHub page. To put is simply, AMP is basically a stripped down HTML page which restricts certain HTML, CSS, and Javascript. Some interesting requirements to make a note of:

    • Allows only asynchronous scripts
    • All CSS must be inlined
    • Styles are limited to 50KB
    • External resources like images must state their size in HTML
    • All Javascript must be out of critical path
    • No user written Javascript is allowed, only AMP supported
    • Fonts must be loaded with a link tag or a CSS @font-face rule

    Remind of you Google PageSpeed Insights guidelines? That is because Google is basically taking all of the recommendations they have told us over the past years and are enforcing them with AMP. Which is a good thing, for the most part, as it should stop some bad mobile performance habits floating around the web.

    How Do Accelerated Mobile Pages Work?


    Google has published a great tutorial on how to create your first AMP page. We will go through a quick rundown on what is involved and what you need to know. It is important to know how AMP works in SERPs. You won’t be able to preview AMP pages on your desktop from SERPs, as Google will only serve AMP pages to mobile devices. Google has a preview up but you can emulate it from your desktop using Chrome DevTools. For example, we toggled device mode over to an Apple iPhone 6 and did a search for “Mars” which is one the AMP promos running right now. You can see below a little AMP icon that appears in the carousel, which means an AMP HTML page is being served.

    [​IMG]

    So if you are running AMP you might be lucky enough to grab one of those carousel spots on mobile SERPs. And below you can see this is an AMP HTML page.

    [​IMG]

    Below is an example of what your starting AMP page might look like from an HTML perspective.

    <!doctype html>
    <html amp lang="en">
    <head>
    <meta charset="utf-8">
    <title>My AMP Page</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
    "logo.jpg"
    ]
    }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    </head>
    <body>
    <h1>Welcome to my AMP Page</h1>
    </body>
    </html>

    Depending on the platform the AMP page is on the URL might vary slightly, but typically the URL will have /?amp=1 or /amp appended to it.

    [​IMG]

    Some also use .amp as the phys.org did in the Mars example.

    [​IMG]

    According to Google’s documentation AMP HTML documents must follow the following syntax.

    • Start with the doctype <!doctype html>.
    • Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
    • Contain <head> and <body> tags (They are optional in HTML).
    • Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
    • Contain a <meta charset="utf-8"> tag as the first child of their head tag.
    • Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.
    • Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).
    • Contain the following in their <head> tag:
      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    Images


    In AMP HTML the <img> tag is replaced with <amp-image>. Here is an example.

    <amp-img src="amp-image.jpg" alt="AMP Image" height="200" width="500"></amp-img>
    CSS


    Remember as we mentioned earlier your CSS must all be inline within your HTML doc using the following tag <style amp-custom>.

    <style amp-custom>
    /* any custom style goes here */
    body {
    background-color: white;
    }
    amp-img {
    background-color: red;
    }
    </style>
    Validating AMP


    Every AMP page must be validated to ensure there are no errors. There is an easy way to validate your AMP HTML page with Google Chrome DevTools.

    1. Open up your AMP page and add #development=1 to the end of URL. Here is an example on our test domain. JPG to WebP Comparison - perfmatters.io
    2. Launch the Console, refresh the page and you will see if your AMP validation is successful. Learn more about validation.
      [​IMG]
    SEO Your AMP Pages


    By having an AMP version of your post or page you don’t want to get dinged for duplicate content, so Google requires that you use the canonical tag when linking to pages.

    Example on your original page:

    <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

    Example on your AMP page:

    <link rel="canonical" href="https://www.example.com/url/to/full/document.html">

    Google will automatically detect AMP pages on your site as your original page is served with a header tag directing Googlebot to your AMP page.

    Schema Required for Carousel


    If you are wanting to achieve that carousel shown in the earlier preview you are required to use Schema markup. Here is an example below.

    <script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
    "logo.jpg"
    ]
    }
    </script>
    AMP in the Wild


    There are a number of larger companies and publishers already using AMP HTML in production, such as The Next Web, The Verge, Washington Post, Entrepreneur, The New York Post, and many more. Below is an example of what the AMP page looks like on a recent article posted on The Next Web. The AMP page is accessible via the ?amp=1 string added onto the web page.

    This clever design firm is open sourcing its rejected logos so startups can use them for free?amp=1

    [​IMG]

    A big problem today is that people don’t optimize the responsive or mobile versions of their website’s enough. Here is a comparison of the desktop version and the AMP version of that post above.

    Desktop Version of The Next Web


    As you can see the desktop version of The Next Web post is quite heavy at over 5MB and 275 requests. That is a lot of content. Most of the weight and requests are actually coming from third-party advertising networks.
    [​IMG]

    AMP Version of The Next Web


    The AMP version of that same post is only 380KB and only generates 13 requests. That is quite a difference and should have no trouble loading fast on a mobile device.

    [​IMG]

    It is important to note though that since Google AMP is new a lot of publishers haven’t worked ads into their AMP sites yet. AMP actually already supports Google Adsense along with 10+ other ad networks. Publisher’s aren’t just going to sit back and take a loss on their advertising income, so over the next 6 months expect to see ads show up again even on AMP HTML pages.

    Pros and Cons of Google AMP


    Google is definitely pushing for a faster mobile web which is great! But there are pros and cons to using Google AMP which every developer should think about before jumping on the AMP bandwagon.

    Pros

    • AMP is open source.
    • By loading pages faster you might see an SEO advantage as speed is a ranking factor in SERPs.
    • Since this is a project developed by Google you can probably assume that AMP HTML pages will eventually be its own ranking factor as well.
    • Possible to gain carousel spot in mobile SERPs as we showed you above.
    • Lots of customization opportunities and full control such as the ability not to use AMP Cache and serve content from your own CDN or origin server.
    • There is already a WordPress plugin and you can expect them to pop up for Drupal, Joomla, Magento, etc.
    • Prevents users from bloating pages with large CSS and JS frameworks.
    Cons

    • AMP can be difficult to implement if your not a developer.
    • Introduces another layer of complexity. Perhaps we should spend more time optimizing our current mobile and responsive sites?
    • Still a lack of major features and customizations on CMS integrations such as WordPress, such as not supporting pages. However this could change with time.
    • Supports only AMP JS functions which means your own third-party JS might not be supported. You can use custom Javascript in <amp-iframe> tags but it won’t allow you access to data within the script.
    • No browser support for IE11 yet which means Windows Phone users are currently out of luck. However they are supporting Edge. Official browser support: In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers. Beyond that the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.In particular, we try to maintain “it might not be perfect but isn’t broken”-support for the Android 4.0 system browser and Chrome 28+ on phones.
    Using Accelerated Mobile Pages in WordPress


    There are a couple WordPress plugins on the repository already that will enable Google Accelerated Mobile Pages on your WordPress site.


    We installed the AMP plugin on our test domain perfmatters.io which automatically creates the AMP version of your posts. There are no settings in the plugin, simply install and your good to go. You can see a working example at https://perfmatters.io/jpg-to-webp/amp. It also adds the required canonical and links tags as well. Note: This plugin doesn’t support pages yet and there have been reported issues with getting AMP content to index in Google Search Console.

    [​IMG]

    Yoast also recently released Glue for Yoast SEO & AMP which adds the necessary schema data on your posts. You can test your schema markup using Google’s structured Data Testing Tool. Remember the schema data is needed if you want that carousel feature in SERPs.

    [​IMG]

    There are also a Drupal AMP module and Joomla AMP extension now available.

    Good References for Accelerated Mobile Pages (AMP)


    There are a lot of great references out there to get you started with Google AMP. Here are a couple we recommend:

    Summary


    As you can see the Google Accelerated Pages Project is definitely something to keep an eye on and you might want to start experimenting with it. We are not sure if it is quite ready for prime time, but would love to know your thoughts on Google AMP. Perhaps the creation of this project is a result of us not optimizing our sites well enough for mobile in the past? Join our community discussion on Google AMP.

    Related Articles

    Featured

    250GB Free Traffic
    Supercharge your Website Today with KeyCDN
    HTTP/2 – Free SSL – RESTful API – 24+ POPs – Instant Purge

    The post Diving Into Google Accelerated Mobile Pages (AMP) appeared first on KeyCDN Blog.

    Continue reading...
     
    • Informative Informative x 1
  2. Mar 11, 2016 #2
    negative

    negative Member

    217
    22
    18
    Apr 11, 2015
    Ratings:
    +50
    Local Time:
    12:53 PM
    1.9.10
    10.1.11
    AMP is looking very hardly to integrate with xenforo forums though. Because lots of javascripts :confused:
     
    • Agree Agree x 1
  3. Mar 12, 2016 #3
    eva2000

    eva2000 Administrator Staff Member

    33,630
    7,446
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,446
    Local Time:
    7:53 PM
    Nginx 1.13.x
    MariaDB 5.5
    Indeed.. the restrictions for AMP specs will be tough to work around.
     
  4. Mar 13, 2016 #4
    deltahf

    deltahf Premium Member Premium Member

    239
    113
    43
    Jun 8, 2014
    Ratings:
    +179
    Local Time:
    5:53 AM
    I think AMP pages will really only be practical for articles.

    Personally, I think it's a bad move by Google. We're finally starting to move away from the complexity of serving multiple versions of the same content to mobile browsers thanks to advances in responsive design, and now they're trying to drag us back there. We should be moving towards one standard, not adding complexity. Not to mention that stripped-down AMP pages will be obsoleted over the next few years as mobile devices get faster, compression algorithms improve, and 4G/5G cellular networks become more prevalent.

    Google should focus on speeding up their own slow ad network before forcing all these complications on publishers.
     
    • Like Like x 1
    • Agree Agree x 1
  5. Mar 14, 2016 #5
    eva2000

    eva2000 Administrator Staff Member

    33,630
    7,446
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,446
    Local Time:
    7:53 PM
    Nginx 1.13.x
    MariaDB 5.5
    Yes interesting times with Google AMP HTML and Facebook Instant Articles showing up :)

    Unfortunately, a large part of less developed Asian countries are still on much slower mobile/ISP speeds. We developed countries with our fast ISP connections tend to forget in some parts of the world, ISP speeds are still <1.6Mbps and/or ISP data charges are relatively more expensive (data downloads) ! FYI, some of my site's India/Indonesia visitors report in Google Analytic site speed around 90-120 seconds to load one of my forums pages. Versus, USA, UK, Australia folks taking 2-4 seconds.

    From https://community.centminmod.com/threads/speedtest-net-whats-your-speed.179/
    upload_2016-3-14_5-49-54.png
    upload_2016-3-14_5-50-57.png

    +1 that is true, if you use Google Analytics, Adsense, Google+ plus you'd potentially adding up to 30+ additional http requests per page load to your site ! Add Google Doubleclick for Publishers code and even more http requests !
     
    Last edited: Mar 14, 2016
  6. Mar 14, 2016 #6
    eva2000

    eva2000 Administrator Staff Member

    33,630
    7,446
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,446
    Local Time:
    7:53 PM
    Nginx 1.13.x
    MariaDB 5.5
    • Like Like x 1
  7. Mar 14, 2016 #7
    deltahf

    deltahf Premium Member Premium Member

    239
    113
    43
    Jun 8, 2014
    Ratings:
    +179
    Local Time:
    5:53 AM
    Looks good on my iPhone 6!

    I just added /amp to the end of the URL to get the AMP version. Subsequent page views on the blog don't appear to "stick" with the AMP pages, though. That's normal?
     
  8. Mar 14, 2016 #8
    RoldanLT

    RoldanLT Well-Known Member

    4,153
    1,006
    113
    May 25, 2014
    Phillipines
    Ratings:
    +1,420
    Local Time:
    5:53 PM
    1.11
    10.2
    Just like me, paying $30 USD per month for 3mbps :/.
     
    • Informative Informative x 1
  9. Mar 14, 2016 #9
    eva2000

    eva2000 Administrator Staff Member

    33,630
    7,446
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +11,446
    Local Time:
    7:53 PM
    Nginx 1.13.x
    MariaDB 5.5
    that's normal AMP HTML aware browsers auto find the AMP HTML version /amp via the link relative meta tag in normal pages
    HTML:
    <link rel="amphtml" href="http://wordpress7.centminmod.com/222/php-7-0-4-wordpress-amp-enabled-blog/amp/" />
    and in turn AMP html page has link relative canonical tag for the non-AMP HTML page
    HTML:
    <link rel="canonical" href="http://wordpress7.centminmod.com/222/php-7-0-4-wordpress-amp-enabled-blog/" />
    yeah.. I'm paying AUD$159/month for my Telstra Cable 112Mbps down/2.4Mps up + backup Telstra 4G Mobile Wifi device (can share with up to 10 devices). Speed comes at a price heh
     
  10. Mar 15, 2016 #10
    RoldanLT

    RoldanLT Well-Known Member

    4,153
    1,006
    113
    May 25, 2014
    Phillipines
    Ratings:
    +1,420
    Local Time:
    5:53 PM
    1.11
    10.2
    Is coming to PH soon :)
     
    • Like Like x 1
Previous Thread Next Thread
Loading...
..

.

Premium Membership Benefits