AMP - Accelerated Mobile Pages and SEO with Joomla
If you are following google's each and every advise in webmaster tools you might have came across or already know what is AMP or AMPP
As google is already Emphasising Mobile compatibility and speed of your website, AMP is another step further,
What is AMP
AMP is an open source project announced by Google on October 7, 2015. On February 23rd, 2016 Google officially started showing up the AMP optimized pages in mobile search results.
The main idea of the project is to build light and fast web pages that work across multiple platforms, no matter which type of smartphone or tablet people are using.
AMP framework consists of three main parts:
- AMP HTML - it is HTML language extended with some custom AMP tags which is intended to provide the highest performance (its specialised tags which is being replaced or used by AMP JS scripts to generate optimised layout later runtime
- AMP Cache - it is a content delivery network which is used to store AMP pages in order to achieve maximum performance when loading the pages from SERP. Just like normal CDN, and also keeping it centralised, avoids the conflicts like jQuery have, multiple versions and all.
In AMP documentation you can read about optimizations which are required for AMP pages to load them instantly:
- allow only asynchronous scripts
- all external resources (images, ads, etc) must state their size in HTML
- inline all CSS
- a stylesheet cannot exceed 50KB of size
- optimize web fonts delivery
Do not these points look familiar to you? If you had an opportunity to analyze your website using PageSpeed Insights tool, you probably could have seen similar suggestions related to your site optimization. Now, Google does not suggest but require to use them if you want to validate your pages as Accelerated Mobile Pages.
So, after understanding basics of AMP I tried to get my hands dirty on this with our favourite CMS - Joomla
being geek from heart and hard core developer background I have curiosity how to develop, and I always look for shortcuts, so first I searched for ready available plugins. yup I did found one, community version from weeblr, but no luck it doesn't work out of the box, neither well written to explore.
So what I did is to check if google weblight output, I thought of it would have been AMP Enabled, and coded small plugin to get output from google weblight and save it on amp directory in cache and serve it with 30 mins cache updated period..
but while doing it I have checked its not AMP At all, its not a AMP why?
Why its not AMP, if google is promoting AMP why its not giving AMP to its own product, but didn't find any answers.
Then I have read closely to doc and decided to give it a try on my own.
I checked syntax and wrote some regex and DOMElement etc to remove unwanted classes and change elements and tags to needed AMP.
but yet I didn't found the exact solution to problem as now my Page was 100% AMP, but it is not at all looking like Mobile page.
I messed it up in shitty looking page with AMP features wow I am amazingly annoyed.
Then I looked closely, is it really that complicated, or am I making it complicated.
I realised its not the way I am looking its the another way, you can't change any html to amp, as lots of things coming from cms, and template and html5 based element and div structure, it has to be something else.
Yes Eureka, it has to be a template and a plugin,
its good to create template first which doesn't have all unwanted annoying AMP prohibited tags, attributes and parameters, and all elements must be AMP HTMLs.
then next step would be creating couple of plugins to parse the modules and other component content to cleansing the html
then some where we will reach the goal, I am still working with this stuff, but not sure If I will get success, stay tuned for my blog will keep it posted.
To be Continued....