Enhance Theme Architecture to expand loading performance (external modules)

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Liferay Themes
• Labels:
  • 7.4-ce-ga4
  • 7.4-dxp-ga1
  • fc_21_05
  • fi-s-dxp
  • pt-app-security-review
  • team_fi_epic_category_platform_architecture
• Epic/Theme:
  • FI_Platform_Evolution
• Epic Status: To Do

Currently, Liferay themes are integrated in DXP via 2 main entry points:

• clay.css
• main.css

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.

 

Test Scenarios:

Requirement	Test Case	Covered by frontend/backend unit test? (Yes/No)	Test Priority (business impact)	Pass/Fail
LPS-127085	Given Console terminal at liferay portal root When Run command: find | grep "frontend-css-web" Then Returns no lines	no	5-critical
	Given Portal startup When Open browser's Developer tools > Network tab and open home page Then Assert no request from frontend-css-web	no	5-critical
	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	no	4-major

Exploratory Scenarios:

Test Case	Test Priority (business impact)	Chrome Pass/Fail	Firefox Pass/Fail	Edge Pass/Fail	Safari Pass/Fail
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 High Priority: 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.	3-medium