Contents
In early 2016 Google started the AMP project (Accelerated Mobile Pages), aiming for faster loading of mobile pages. The project has evolved quite a bit in the man time, and in the mean time, AMP pages have started to emerge quite prominently in some cases.
Note: this article may not be fully up to date, but it may still contain valid information
You can comply with AMP rules in Joomla with the plugin by Weeblr (also known for quality extensions like SH404SEF and Josetta): wbAMP! First some backgrounds though:
Google AMP backgrounds
It is a known problem that on mobile devices websites load slower due to issues with either connectivity (bad wifi, 3G, 4G) or limitations of the device itself. Also, most of the time many resources and content items are loaded that are not even actually read, like a sidebar that collapses all the way to the bottom when reading on mobile. To solve this problem, the AMP project aims to deliver optimized pages specifically for mobile usage with stripped-off content and resources, which will load much faster.
Basically, what you do is you serve each page twice: one is the default, 'normal' HTML version and the second one (usually the same URL with /amp appended) is the accelerated version. Apart from the fast response, the look and feel of AMP pages is pretty bare, which has also led to discussions about whether this step from Google is not actually a step back in webdesign, as the UX of these pages is not the one that we are used to. But well, if Google dictates, you simply need to follow in order not to be left behind...
The optimized version should be created as a basic version of the full page with only the bare minimum of content and technically optimized. Most notably, forms and many other interactive elements are not allowed! AMP is meant to be used for static pages only. This means blog- and list-views and probably your homepage should not be AMP-ed, but your individual article-views could. These are the requirements as listed on the AMP website:
- Allow only asynchronous scripts
- Size all resources statically
- Don’t let extension mechanisms block rendering
- Keep all third-party JavaScript out of the critical path
- All CSS must be inline and size-bound
- Font triggering must be efficient
- Minimize style recalculations
- Only run GPU-accelerated animations
- Prioritize resource loading
Also, Google itself will assist optimization by caching and loading resources from its own CDN, which turns out te be blazing fast.
Actually, every AMP-optimized page will have a full version for non-mobile usage and an AMP version for mobile usage. Two pages with similar content could lead to duplicate content issues, and for this reason, the AMP version needs a canonical pointing to the full version. To let Google know the AMP version exists, the full version needs a tag to point to the AMP version with a rel="amphtml" tag. So in effect:
Say we have a desktop version called http://example.com/full-version and an AMP version called http://example.com/full-version/amp. The full version needs to point to the AMP version then:
<link href="http://example.com/full-version/amp" rel="amphtml" />
Alternatively, the AMP version needs a canonical URL pointing back:
<link rel="canonical" href="/http://example.com/full-version" />
Not all pages are suitable for AMP optimization. Dynamic pages like forms, shopping carts etcetera will not function well. Static pages will benefit the most from optimization.
AMP in the wild
When I originally wrote this blog in February 2016 AMP was only slowly beginning to roll out. In my country, the Netherlands, it was not even available until August 2016, but lately (I updated the post in December 2016) we're seeing more and more of that. The feature is most prominent in certain carrousels that are displayed on top of the standard 10 search results, pushing those even further down. These results are mostly seen in searches around news-related search terms. Let's say we search for information about Obama. Then this is what you see:
These carousels are mainly occupied by large newspapers and agencies like the Guardian (one the first adopters) and for very popular search terms, but in the future more carrousels might be shown. For the moment, it is very hard to get yourself in here, as all these players have large budgets. However, more and more we see AMP results between the normal search results. Actually, this very article is showcased like that, note the lighting-bolt signal in the second item:
Just try it for yourself on your mobile (on a desktop you won't see this). Once you start to notice, you may see that the technique is present more than you knew...
AMP is really very fast!
The technique in itself already ensures much lighter pages, but what makes it really very, very fast is the fact that Google caches these pages on their own domains.
By the way, you can have AMP pages standing on their own, but then also your desktop users will see the bare version, so it's not that practical. Let's check an example on the Weebl website. The blog post dedicated to the release of the plugin has a full version, an AMP version, and the AMP version hosted on Google:
- https://weeblr.com/blog/accelerated-mobile-page-for-joomla -> Full version
- https://weeblr.com/blog/accelerated-mobile-page-for-joomla/amp -> AMP version
- https://google.com/amp/weeblr.com/blog/accelerated-mobile-page-for-joomla -> Google hosted /cached version (not accessible on desktop, it redirects)
As you can clearly see, the AMP version has a minimal look with hardly any modules and not even a menu, because javascript and forms are simply prohibited! The actual content though is the same. This is more or less how the plugin works, though you can add some stuff around the content like a menu, one additional module, and a block for advertising (Adsense and some more networks). Running both URLs through a speed test (Android emulation) clearly showed that the optimized version is much faster, with fewer resources and less kBs, while the Google-hosted version is even faster:
Full version in GT-Metrix:
AMP version in GT-Metrix:
Google hosted version in GT-Metrix:
I am not sure whether the last test was correctly caught by GT-Metrix, but the effect is certainly there: lower resources and faster loading!
Should I start using AMP????
The big question for everyone is of course: should I adopt this technology or not? In the past, quite a few Google projects were launched only to be abandoned 1 or 2 years later, in the meantime waisting our time and efforts. Even amongst SEO professionals, this is not clear. On the SEMrush site, a blog was posted suggesting that if you have a responsive site you should not use AMP (www.semrush.com/blog/to-amp-or-not-to-amp-what-is-best-for-your-website). On the other hand, many SEO's are of the opinion that it is not a bad idea to already start using it. While it is currently not a ranking advantage to have an AMP version, Google suggested this might change.
Then it is also important to realize the technique is not fit for every website: it is currently mainly used for news and blog sites and recently also recipe sites. Ebay is already using it on their e-commerce pages, however, so things are evolving quickly. This means that in Joomla, mainly your single article Joomla or K2 pages should be made ready, although also third-party developers already started making their extensions amp-ready, see DJ-Classifieds as an example (www.dj-extensions.com/blog/dj-classifieds/dj-classifieds-3-6-3)
As so many things are unclear, taking it easy and waiting a few months could be a wise approach ;) However, if you want, you can have a go:
Installing and configuring the wbAMP plugin in Joomla
The plugin by Weeblr is available in a community version and a full version. The full version allows for some more options and K2 support. After installation, you have either 2 or 3 plugins. The plugins K2 wbAMP support and com_content wbAMP support have no options, they should simply be published. The plugin simply called wbAMP is the one that controls everything. By default, the plugins are enabled after installation, but nothing has happened yet. You have to specifically specify which content needs to be optimized.
Remember: only static pages! To select the pages you want to be optimized, go to the Select pages tab. Using the help text hovering over the options you will easily be able to indicate which pages to select. To select only the static article views from the Joomla content (com_content), apply the following options:
Additionally, you can configure some more settings in the other tabs:
- Meta data: sets a header and a header image and also allows for setting publisher information
- Analytics: set your Google Analytics web property
- Custom elements: set a menu, a footer module, (static!) social media buttons
- Ads Networks: show and advertising block
- Advanced: set your credentials for automatic updating of the plugin through the Joomla update mechanism.
Applying all this will result in a stripped version of the pages you selected, like this example from my site, configured with a header image, site name and a menu, followed by the actual article, including an image. All other modules have been removed:
You see, it's pretty bare, but it will load very fast, and that's the whole aim of the operation. And also, you can customize this look and feel using overrides if you want. All layouts are done through JLayout, so the simple visual aspect can be totally customized and be much more sophisticated. Weeblr also offers an additional (paid) template for AMP which allows for some more customization. In the meantime, third-party developers have also started to build AMP templates, like this example from TemplateMonster: www.joomla-monster.com/all-products/i/42-joomla-plugins/238-jm-amp
By the way, you can start your WbAMP subscription at Weeblr.com at a 20% discount here:
Use coupon 5RXHD-NYJNF-GFJ7H for a 20% discount
Just recently (November 2016), another AMP plugin has been released, JAmp, by the developer of Jsitemap. You can check it out here: www.storejextensions.org/extensions/jamp.
Validate your syntax
Your syntax should be valid and you should really check this, otherwise, Google will not index them! You can do so at www.search.google.com/search-console/amp. You can also use the Chrome AMP Validator. It is very convenient for troubleshooting issues. First of all, it automatically discovers any AMP versions for non-AMP pages, allowing you to quickly switch to it. While there, it then detects any syntax issue on the page:
If the syntax is fine your pages should be automatically detected due to the rel=amphtml code, but you cal also submit an AMP sitemap to make the process even quicker (Jsitemap can do that for you).
Search Console and Analytics
To check if all is going well, make sure to check your Search Console account after a few days/weeks. It will notify you of the status of your pages under Search Appearance >> Accelerated Mobile Pages:
Hopefully, they will display without any errors. To track the actual display of your pages in the Google pages, go to Search Traffic >> Search Analytics and set the filter option under Search Appearance on AMP non-rich results:
You can also track your pages in Google Analytics: make sure to insert your Analytics UA-code in the Weeblr plugin and your pages will be tracked. Google advises you to create a separate property in Analytics for AMP by the way.
Findings on Joomlaseo.com
I installed AMP in Augustus 2016. Since my site attracts mainly desktop users (85%) AMP was not a really high priority for me, but I wanted to experiment with it. As a consequence, I don't get a lot of AMP visitors, but I do get a few and I expect that to rise as most of my mobile results point to the AMP versions of my pages. This is what I see in Search Console:
Funny to see what topic mainly pops up ;) Well, that's it for now, I think that's th longest post I've written on this site! Good luck with your own experiments...
This post was originally written in February 2016 but has been fully rewritten in December 2016.
