Type: Feature Request
Status: Aligned with Roadmap
Affects Version/s: None
Fix Version/s: None
Mobile internet usage has surpassed desktop mobile usage all over the globe.
According to data collected by Google and SOASTA 40% of consumers leave a page that takes longer than three seconds to load.
Google launched the Accelerated Mobile Pages (AMP) in 2016, open-source project to ensure that mobile webpages operate at optimal speed.
Websites validated and adapted to this technology can derive a benefit from Higher performance and engagement, using Google Cache, Flexibility and better SEO results.
Once we created an only AMP-Friendly website (https://radionama.com/) on Liferay with a lot of efforts, overrides and extensins and it improved our user experience and engagement to a large extent.
I believe a clean module with high compatibility and standards of Liferay can really improve the community of users and developers who can have both versions simultaneously.
Follow are the main steps and limitations needed to be considered in my experience for this module:
1- Adding AMP enable button in site settings and next a radio button which allows two modes: AMP Only and Both.
2- By checking AMP enabled, a second version of every page will get accessible by adding an /amp/ path right after domain address like:
and add something like the following <link> to amp content address tag to <head> section:
3- Rewriting and rendering a filtered version of main page with following instructions:
3-1- Convert top-level <html> tag to <html ⚡> tag or <html amp>
3-2- Remove all scripts except schema.org JSON-LD script or don't inject them in the first place.
3-3- Convert all <img> tags to <amp-image layout="responsive"></amp-image>
3-4- Convert all <video></video> tags to <amp-video></amp-video>
3-5- Convert all <audio></audio> tags to <amp-audio></amp-audio>
3-6- Convert all <iframe></audio> tags to <amp-iframe></amp-iframe>
3-7- Convert all http addresses in src attributes to https
3-8- Remove all <link rel="stylesheet"> tags.
3-9- Converting all other elements with certain equivalents.
4- Modifying and adding needed elements to amphtml page:
4-1- Start with the
doctype if not yet.
4-2- Contain a
tag as the first child of their <head> tag if not yet.
4-3- Contain a
tag inside their <head> tag as early as possible in the <head>.
4-4- Add a
tag inside the <head>.
4-5- Add a
tag inside their <head>.
4-6- Add the following code to initially hide the content until AMP JS is loaded.
4-7- Add all other needed AMP component scripts to head.
4-8- Add <style amp-custom> </style> and automatically put only used css by theme and plugins of page concatenated, minified and tree shaken inline inside this tag (No !important qualifier and i-amphtml- class and i-amphtml- tag names inside css).
Or it can be a single css file developed by web designer uploaded in site settings beside other AMP settings.
5- Validity can be checked by adding #development=1 at the end of link and seeing chrome console, or by entering the link in amp validator tool if the website is online.
Of course, some parts can be missed that will be taken care of if the ticket goes for development.