I would like to build a page for AMP and use Core components. When building the page with Responsive Grid, css file generated by AEM is too large (for 3 viewports it is around 100KB). AMP limitation for CSS is that the file needs to be under 70,000B. Additionally, AEM use !important keyword in the css which is not allowed in AMP. Above disqualify usage of Responsive Grid on AMP pages in AEM.
Current Behavior
Currently we are not able to build AMP page and use Responsive Grid at the same time!
When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is over 75KB (AMP limit). Additionally, css generated use !important keyword which is not supported (allowed) in AMP. Page is considered as invalid by AMP validator.
Expected behavior/code
When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is optimised and size is under 75KB (AMP limit). Additionally, css generated doesn't use !important keyword.
Environment
AEM version and patch level : AEM 6.5.6
Core Components version: 2.11.1
JRE version: Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.8+10-LTS)
Possible Solution
Optimisations on AEM level or different approach to grid system (eg. bootstrap grid)
float: left; clear: none; could be moved to single place with .aem-GridColumn selector
Reduce decimal precision to two digits (33.3333333% -> 33.33%)
Grouping selectors (OOTB functionality of some CSS minifiers)
Bug Report
I would like to build a page for AMP and use Core components. When building the page with Responsive Grid, css file generated by AEM is too large (for 3 viewports it is around 100KB). AMP limitation for CSS is that the file needs to be under 70,000B. Additionally, AEM use !important keyword in the css which is not allowed in AMP. Above disqualify usage of Responsive Grid on AMP pages in AEM.
Current Behavior Currently we are not able to build AMP page and use Responsive Grid at the same time!
When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is over 75KB (AMP limit). Additionally, css generated use
!important
keyword which is not supported (allowed) in AMP. Page is considered as invalid by AMP validator.Expected behavior/code When building AMP page with core components and Responsive Grid, css file generated to support responsive grid is optimised and size is under 75KB (AMP limit). Additionally, css generated doesn't use
!important
keyword.Environment
Possible Solution
Additional context / Screenshots WKND doesn't support AMP but it does use the same responsive grid so it's generate exactly the same file: https://wknd.site/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-604c2890bb40261cb7a24c421b97841a-lc.min.css