Description
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
- 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)
- Reducing length of selectors
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