How easy to convert to AMP?

[nomis5]

Many of Google's forays into new technology and ideas have proven to be a pile of junk. Some haven't, https is the most recent example, ignore it and your website will be seriously hit in the next year or so.

My gut feeling is that AMP is even more important, not today but very soon.

With that in mind today, I spent a few hours attempting to convert one of my pages to AMP. At the beginning I thought this was going to be a lost cause but to my surprise, after two hours, I had an AMP compliant page.

My major website has approximately 1,000 pages so a full conversion to AMP would be a major exercise. But I've been through worse.

Apart from one technology related hurdle specific to my website, the pages are very basic. So maybe that's why the changeover was so easy.

I am seriously contemplating a site wide conversion to AMP. It won't affect the appearance of my pages at all, mobile or desktop. No functionality will be lost in a change to AMP for my website.

Any thoughts, recent experiences?

[explorador]

I remember the noise on AMP, at some time I was worrried about it turning into a key trend. I don't worry about it now. Tried some of it, didn't like it, takes time to make a well stablished site into AMP complaint website. Honestly didn't see big players supporting it as a new way to do things, I get it is mostly Google.

Anyway, I don't know how your website is built, but at least Drupal and Wordpress (big CFS and CMS) can get away with some plugins.

My case? I focused a bit more on enhancements at server level and code to make my sites faster, with some cache rules, compression etc. I managed to optimize my webs a bit more, so no worries for now.

[NickMNS]

I've been working with AMP over the past few days, updating an AMPed site. Basically, if your content is static, as you (@nomis5) suggest, then it should be a simple undertaking. If every page is a one-off then it may be time consuming but still relatively simple and straight forward.

But the more I learn about AMP, I realize that AMP is one small part of the Progressive Web App (PWA) and this I believe is a paradigm shift in how the web works and and how content is consumed. This is of course far more complex than the average WP site but provides real benefits to the user.

[funnykid]

There are lot of plugins available on wordpress, Install it and it will convert all your existing pages to AMP pages.

[openmind]

A page that is converted into AMP by a plugin is not half as well optimized as a page that is coded by hand right from the start. My question is how difficult it is to create AMP pages from scratch as opposed to non-AMP pages. Has anyone of you created new pages or even sites in AMP?

[explorador]

@openmind, I see it fairly easy, but that's just my opinion, I've created several CMS on my own for my own work, so I'm familiar on delivering different or slightly different content to users depending on their platforms or any other variable (also modifying the content whatever that is). From that angle, looks easy to me and I'm positive that this is not a soft consideration, is not an underestimation. The thing is it takes time to apply several rules.

Some stuff stays.
Some stuff is changed, added.
Some stuff is just modified (some tags), like img:

<amp-img src="/img/whatever.jpg" width="XX" height="ZZ" layout="responsive"></amp-img>

I love working on Perl, so I see changes on using string replacement, regex, etc as a way to approach some changes, sure writing the code is another approach (I mean the tags written by the cms output, not just regx or string replacement). This can be done with other languages such as PHP. Sure is more efficient to write the output and serve it rather than rewriting your already produced output. You can search the web for "conversion to amp pages", some results talk about parsers, scripts that take your html and turn it into amp pages. Due to guidelines I'm not sure if I can post direct links to that but it's easy to find using search engines.


There are considerations on AMP, like content mirroring (cache) and preloading content. Preloading doesn't seem useful to me unless you visit the site from google results page (your site can't be preloaded if you are just visiting it, you have to come from somewhere else making a bridge to it), so I'm not into optimizing too much for the sake of the man in the midle, that's way different than optimizing for visitors or search engine. But that's just me.

[NickMNS]

Creating pages with a amp is mostly simple, but certain more advanced features can be a little more difficult to implement. For a basic static webpage it simply consists of using the AMP specific tags where applicable and the CSS cannot be in an external file, it must be inlined in the head of the page.

If you are using some sort CMS or templating software or injections, you can continue to do this provided the injections are made server side.

Things get a little more complicated when you start using dynamic content. First the scope of what can be done is very limited but there are features such as amp-forms and amp-list that allow you do most basic task, eg: sign-ins / sign-ups. There is also amp-mustache for doing client side templating, so when you are returned json data from the AJAX calls you can display it using mustache.

If you are creating a page in addition to an existing mobile or desktop page then you have to worry about canonicalization to ensure that the right pages are considered for indexing. But again this is pretty straight forward.

Google has provided a lot of good documentation such as [ampbyexample.com...] and there is help to found here or at Stack-exchange or in the Google Forums.

[openmind]

@explorador and NickMNS, thanks a lot for your responses which is very useful information for me. I've read through the AMP documentation provided by Google but haven't been able to find an answer to the following question: Suppose, I want to develop a site with interactive language tests and quizzes and possibly simple language games such as Hangman or WordLadder. I want the quizzes to load as fast as possible since most of the users are on mobile devices with G3 plans and bad internet connection. I don't want to create any native apps at this point. The site should also have a newsletter module and a forum.

What solution would you suggest is best? I'm leaning towards Python and Django with FlaskBB for the forum. My question is, what language is best when it comes to creating a site using AMP -- php, perl, python or even something else?

Thank you very much for sharing your ideas.

[NickMNS]

@Openmind what you are describing is perfect use case for a Progessive Web App (PWA). This can include some AMP but is far more complex undertaking. But the beauty of it is that features can be added progressively. So you can serve a static newsletter and other information content with AMP and no PWA and then add features like your Hangman game that would require a ServiceWorker (key component of a PWA). The additional features will not break the previous ones.

I am currently working building my first PWA. I am using Python (Bottle), Mongodb for the backend. You need to use Javascript for the service workers, so for any portion of the app that will be computed on the client side. I am building the app on top of existing website that use the same stack and serves AMP only pages.

Here is a tutorial from Google for PWA:
[developers.google.com...]

[explorador]

@Openmind, it's... complicated but easy.

When it comes to AMP, it's not like a new fast format. Let's consider a webpage of 1mb bult only using html and javascript VS the same version on AMP also with 1mb size. The same megabyte will have to be sent over the internet, same speed, same time, same everything, then it would be about your programming (javascript) efficiency and your browser dealing with both pages. This is given the case of a visitor coming to your site directly via URL, it's the same thing on both cases, no difference. What I'm saying here is, if you are looking for ways to speed up your page/games, AMP is not exactly the solution.

What's the difference with AMP pages? when you visit Google and search something and your site appears on the results, then Google sees you are AMP compliant and then when you click on your result, your page loads like magic, why? because there is a preloading. Your content is being cached/preloaded (any of both) and served from the location nearest to you, then you hit your site but some or all of your stuff was already loded. Bing introduced AMP support, Yahoo did too.

So, it's like someone visiting your site from zero, directly, the browser loads everything from scratch every time. This unless that someone visited the site previously so browser cache enters the game, there you can also play and optimize for cache (via htaccess, meta tags, etc) and make your site load faster, why? because that person already cached some elements in their browser. Ok, when it comes to Google search results, it's like that someone had a friend giving them a copy of your site so when they get to you they already have some elements int their browser, Google is that "friend" giving that copy. Bing and Yahoo can do this too. CloudFlare entered the game and somehow you can be served some cached content too. Tried my best to explain how it works, I too got caught at the beginning into thinking it as a faster format, it's not exactly that. It was bult for preload and cache but not on your browser, instead somewhere else.

About your games, I don't know. I would use Perl. Yes I love Perl but it's not just that, Perl is way good parsing text, but this is server side. I would serve this via AJAX. You can do this with any other language server side. The thing is, you can do it even better with Javascript (word games), the problem is serving the JS means you are also serving the source code of your games, but many people do this without a problem. This is not AMP related. Javascript would be faster meaning evertying is loaded on your browser from scratch when the whole page is loaded. You can do this with AJAX serving the page and then loading the rest but this would mean some extra time.

Yes you can bulid PWA, but that's not AMP. Having a website or an app are two diff things depending on your goals, you mention not wanting to build a native app, well you can build something else: hybrid app. There you can use your html + javascript skills (and communicate with your server if you need to). I've tested many out there (hybrid solutions) my votes go to Telerik and Monaca, both very easy to use with a library of examples and tutorials. PhoneGap can work, iOnic too, but I have my reservations on both, besides they rely only on cli (command line clients), it's up to you. All of them offer free accounts and paid too (they all build Android and iOs).

Good luck.