Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-109633

Enable AMP (Accelerated Mobile Pages) Compatibility

    Details

      Description

      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:

      0- Knowing main limitations like being on https, having a max. 75kB inline css, only GPU-accelerated animations and no custom javascript om AMP Pages.

      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:

      http://localhost:8080/amp/home
      https://localhost:8080/home
      or
      http://localhost:8080/fr/-/article-friendly-url
      https://localhost:8080/amp/fr/-/article-friendly-url

      and add something like the following <link> to amp content address tag to <head> section:

      <link rel="amphtml" href="https://localhost:8080/amp/fr/-/article-friendly-url">

      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 html>

      doctype if not yet.

      4-2- Contain a

      <meta charset="utf-8">

      tag as the first child of their <head> tag if not yet.

      4-3- Contain a

      <script async src="https://cdn.ampproject.org/v0.js"></script>

      tag inside their <head> tag as early as possible in the <head>.

      4-4- Add a 

      <link rel="canonical" href="Main Page Address">

      tag inside the <head>.

      4-5- Add a

      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

      tag inside their <head>.

      4-6- Add the following code to initially hide the content until AMP JS is loaded.

      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

      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.

      Sincerely,
      Adel

        Attachments

          Activity

            People

            Assignee:
            support-lep@liferay.com SE Support
            Reporter:
            Dragon96 Adel Alagha
            Votes:
            2 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:

                Packages

                Version Package