AMP - Accelerated Mobile Pages

Community resources Product feedback
1

Hi Webflow

I recently stumbled upon the project Accelerated Mobile Pages (AMP), which is “an open-source initiative to make the mobile web faster and more accessible. It’s supported by Google.”

It sorts of strip down the HTML and makes the load times faster. From a SEO perspective it’s excellent, since Google is experimenting with putting AMP articles first, when you do a mobile search.

I just product hunted a project named Postlight Mercury, which readies your publication with one line of code. I believe it would be worth it to implement it in Webflow CMS. Take a look :slightly_smiling:

Best wishes

2

Demo of the above-mentioned Postlight Mercury and a Wordpress AMP Plugin output styles, on a blog post.

Postlight Mercury output:

http://mercury.postlight.com/amp?url=https://blog.samliew.com/2014-10/windows-audio-speaker-headphone-failed-to-play-test-tone-error/

Wordpress AMP Plugin output:

https://blog.samliew.com/2014-10/windows-audio-speaker-headphone-failed-to-play-test-tone-error/amp/

3

So it seems, for this we need all external JS in a iframe, along with less then 50KB of style code including css documents, or inline. We also need to replace all image tags with (amp-img), replace your html header with (<html amp lang="en">), don’t forget to add the AMP javascript <script async src="https://cdn.ampproject.org/v0.js"></script> as well you also need to add these lines of code to the header!

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

<link rel="canonical" href="/article.html">

<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>

As well put all CSS inline into something like so!

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>
4

Hey guys, any updated on this feature? Google recently announced that AMP-friendly results will be shown in search results and we’d really love to be able to take advantage of this at App Press :slight_smile:

5

Becoming more urgent fro Webflow to adopt AMP. From Google today:

AMP has until now only affected site in the News category. Shortly it will be essential for all sites that want to be visible on mobile results.

1 Like
6

There seems to be some confusion about what AMP is and what it’s used for. There’s a lot of misinformation appearing in this thread and all over the internet, and it might be helpful to go straight to the source to see what’s really going on with AMP.

Hopefully we can get the conversation started here about why AMP isn’t a good fit for the vast majority of websites that are developed on Webflow. There are a few things that need to be cleared up about AMP:

  1. AMP isn’t a set of features that’s simply integrated or added on via custom code. It’s just HTML with an AMP JavaScript library which uses AMP-specific components.

  2. AMP doesn’t allow any type of interaction JavaScript, which means right out of the box it’s incompatible with extremely common libraries such as Bootstrap, jQuery, or Webflow.js. Or React.js. Or AngularJS. Or Dojo or midori or MooTools or Pixi.js or Plotly or Velocity. Nada.

  3. AMP forces all styles to be inlined. You cannot even reference an external stylesheet unless it’s pointing to a custom font. This is game over for any type of visually rich design.

Google itself writes that “AMP is a way to build web pages for static content that render fast.” They’re talking about online publishers of things like news content, and other visually simple webpages that need to load very quickly on mobile.

Down the road, can we expect AMP to be useful for static content sites in certain industries? Sure. We’re already seeing amazing results with The Washington Post and The Miami Herald and other giant publishers pushing specialized AMP content to mobile. But for right now, it’s not at all a good route to take for visually-rich, responsive websites.

Simply put, AMP is restrictive. It limits what you can visually accomplish on a webpage. It doesn’t allow you to use custom JavaScript or other elements, except those large corporations that Google deems worthy (Twitter, Instagram, Facebook, etc.). It doesn’t let you use external CSS and all your visual styles have to be inlined, which can lead to visual clutter, increased file size, and slower page loads.

4 Likes