Google AMP HTML Support?
Permalink
Hey guys I noticed google is really pushing this AMP thing to speed up mobile pages and they have a lot of the big cms players like wordpress launching built in support in February. Any plans to do similar with C5? Any thoughts at all on this? Reason I ask is I have a client asking about it and I'd like to know if it's on C5's radar or it's something that needs to be custom.
https://amphtml.wordpress.com/2015/12/09/continued-momentum-for-the-...
https://amphtml.wordpress.com/2015/12/09/continued-momentum-for-the-...
I think concrete5 could support AMP, but the thing to keep in mind is that AMP is a _very_ cut down spec, intended mostly for news items and things like blog posts.
So I think it's going to be quite a specific thing to set up for a site, perhaps targeting particular page types, rather than something that just gets added to a site globally.
AMP has as part of the spec a way to indicate on a regular ol' page whether there is an AMP version of it, using something like: <link rel="amphtml" href="{amp version}">
It might be that concrete5 provides via a special path (a route), a way to fetch a page, where it uses an AMP template, and outputs the 'Main' content area. Certain blocks simply won't be allowed, such as form blocks (no inputs in AMP), while things like image and youtube blocks might switch to using a particular template so it spits out the right tags.
It might be that core blocks needs to implement some sort of fetchAMP() function.
It could also be something where the AMP versions are statically generated, via an automated job. The whole point of AMP is speed, so maybe the could be something that takes a concrete5 page and generates an AMP version. That could then be served with speeds similar to that when full page caching is on.
If AMP takes off, this might be something best handled by core functionality, but I can envisage this being handled by an add-on.
Just my musings!
So I think it's going to be quite a specific thing to set up for a site, perhaps targeting particular page types, rather than something that just gets added to a site globally.
AMP has as part of the spec a way to indicate on a regular ol' page whether there is an AMP version of it, using something like: <link rel="amphtml" href="{amp version}">
It might be that concrete5 provides via a special path (a route), a way to fetch a page, where it uses an AMP template, and outputs the 'Main' content area. Certain blocks simply won't be allowed, such as form blocks (no inputs in AMP), while things like image and youtube blocks might switch to using a particular template so it spits out the right tags.
It might be that core blocks needs to implement some sort of fetchAMP() function.
It could also be something where the AMP versions are statically generated, via an automated job. The whole point of AMP is speed, so maybe the could be something that takes a concrete5 page and generates an AMP version. That could then be served with speeds similar to that when full page caching is on.
If AMP takes off, this might be something best handled by core functionality, but I can envisage this being handled by an add-on.
Just my musings!
Also, no 3rd party JavaScript code allowed on AMPHTML pages which makes it tough for frameworks like c5 which spit out lots of dynamic JS. Custom templates for existing blocks such as an < amp-img > tag instead of the < img > would create the proper AMPHTML but can such a block be rendered on a page without c5's JS as well? I've never tried but I doubt it. I agree that the core needs to create a static version of a page without the extra JS. I'm not sure why the 'Full Page Caching' mechanism doesn't already do that but I've never dug into the unintended consequences of that strategy.
I think the thing to keep in mind is that AMP isn't intended to be a replacement for all the different interactive and dynamic things we can have on a site, it's arguably more akin to something like an RSS summary of a page, where it's really just simple HTML of the page's main body content.
There's nothing stopping us from creating a theme that doesn't output css/js (Hissy's github package does this), it's really just making sure that what is output to the page is only stuff that conforms to the AMP spec. My Snipcart add-on does something like this, I have a custom route that outputs a specified block, without including an scripts or CSS. Can't see why we couldn't do something similar, but looping through the blocks of the main area and adjusting the output accordingly.
Blocks that would probably work with a custom template (and maybe a bit of trickery with injecting stuff into the head);
- Content block
- Image Block
- Youtube block
- Video block
- Image slider
- Google map (maybe, if it's just an iframe)
- Plus other blocks that just output simple stuff, like the attribute block or file block
Blocks that wouldn't work:
- Form block
- Search block
- Conversation
- Share blocks
- Any block that HAS to have Javascript functionality
It may be a case that instead of something automatically filtering a main content area and outputting a compatible page, that there's simply a different theme/mode that has specifically built blocks for AMP usage only. It might be that you 'Add AMP page' to a page (which then adds in the rel link), then it creates in a special part of the sitemap a corresponding page using an AMP theme. Then when you edit that page you can only add AMP blocks. This would mean double inputting content, but perhaps this is logical as means it can be more more carefully crafted. (maybe it would start of by converting blocks it can).
Lots of maybes and certainly not easy, but I do think it's possible!
There's nothing stopping us from creating a theme that doesn't output css/js (Hissy's github package does this), it's really just making sure that what is output to the page is only stuff that conforms to the AMP spec. My Snipcart add-on does something like this, I have a custom route that outputs a specified block, without including an scripts or CSS. Can't see why we couldn't do something similar, but looping through the blocks of the main area and adjusting the output accordingly.
Blocks that would probably work with a custom template (and maybe a bit of trickery with injecting stuff into the head);
- Content block
- Image Block
- Youtube block
- Video block
- Image slider
- Google map (maybe, if it's just an iframe)
- Plus other blocks that just output simple stuff, like the attribute block or file block
Blocks that wouldn't work:
- Form block
- Search block
- Conversation
- Share blocks
- Any block that HAS to have Javascript functionality
It may be a case that instead of something automatically filtering a main content area and outputting a compatible page, that there's simply a different theme/mode that has specifically built blocks for AMP usage only. It might be that you 'Add AMP page' to a page (which then adds in the rel link), then it creates in a special part of the sitemap a corresponding page using an AMP theme. Then when you edit that page you can only add AMP blocks. This would mean double inputting content, but perhaps this is logical as means it can be more more carefully crafted. (maybe it would start of by converting blocks it can).
Lots of maybes and certainly not easy, but I do think it's possible!
AMP definitely looks interesting and appears to be well thought out for a work in progress.
It appears to be best suited for specific types of websites, and for these it could be a useful solution.
Community member hissy is working on an AMP package. Starring and watching the project will provide encouragement.
https://github.com/hissy/concrete5-amp/...
For others reading this post and are not familiar with AMP, here are some links.
Accelerated Mobile Pages - A new approach to web performance
https://www.ampproject.org/how-it-works/...
Accelerated Mobile Pages Project - FAQ
https://www.ampproject.org/docs/support/faqs.html...
AMP HTML (Accelerated Mobile Pages) demo
https://www.youtube.com/watch?v=i2_lAEzmOPo...
AMP: Accelerated Mobile Pages with Paul Bakaus
https://www.youtube.com/watch?v=SOx1XfOjJPI...
AMP Anatomy with Malte Ubl
https://www.youtube.com/watch?v=hVRkG1CQScA...