Currently, Liferay themes are integrated in DXP via 2 main entry points:
This makes improving load performance very challenging since the only option is to trim down on those entry points but the system provides no further alternatives to load styles.
The goal of this epic is to provide a flexible alternative so themes can be optimized for optimal delivery.
More specifically, we'll focus in reducing our css footprint so that we can make page delivery faster. Our baseline scenario is the guest user who just consumes content in a simple content page with some ootb fragments in it.
Initial assumptions we're making are that BS + atlas styles will be serve. This allows us to focus on how much styling we can strip down in the above scenario by looking to components.
|Requirement||Test Case||Covered by frontend/backend unit test? (Yes/No)||Test Priority (business impact)||Pass/Fail|
|Given Console terminal at liferay portal root
When Run command: find | grep "frontend-css-web"
Then Returns no lines
|Given Portal startup
When Open browser's Developer tools > Network tab and open home page
Then Assert no request from frontend-css-web
|Given 2 instances of portal, one is built with the changes of epic, one is without
When Open home page of the two portal instances, do not login. Use Lighthouse extension of Chrome browser to test against the home page, and compare the difference of performance
Then Assert the performance is increased with the changes
|Test Case||Test Priority (business impact)||Chrome
|Exploratory test one or two areas that utilize these features. Focus on UI and visual regressions, which includes spacing, margins, style, colors, etc. Max Time: 45 mins
Pagination (ie: Assert Publisher Portlet with Regular Pagination Type enabled)
Management Bar (ie: In Site Configuration > Mobile Device Families)
NavBar (ie: Select Item modal when insert image in Web Content )
Vertical Cards (ie: Category treeview when select category)
Medium Priority: (if have time)
Search bar (ie: Users and Organizations > search a user)
Item Viewer (ie: Blogs Entry > change background image)
Low: (if have time)
Upload Files (ie: Documents and Media > Upload multiple files)
Reference link to most used .scss files.