Introduction
This post will walk through the process of reducing the size of Clay CSS to help improve your first contentful paint. Clay CSS bundles many components that may not be relevant to guest requests (e.g., landing pages). We will try to answer the question:
Is there any way I could somehow load just what's needed for guest requests (e.g., css variables and some utility classes) and just load the rest for logged in requests where I assume the bulk of it is needed?
Liferay Theme
Liferay DXP provides robust out of the box functionality for collaboration, forms, and content management among other things. Clay CSS provides base styles for every component in Liferay DXP. We currently have no meaningful way to predict which components and fragments are likely to be used on guest pages. Our solution is to load it all and hope for the best.
All hope isn't lost though, Clay CSS is highly modular, meaning we can pick and choose which components we want to load. It just requires some knowledge of file locations and loading order for Clay CSS.
Clay CSS Structure
Clay CSS 3.x consists of Sass functions, variables, mixins, and components. The functions, variables, and mixins output no styles by themselves. They must be explicitly declared inside a CSS selector for styles to be output. It is safe to import these as it will not increase the final size of your CSS file.
The components section is where all styles are output. Our modifications will happen here.
How to Modify Clay CSS in Liferay
A Liferay Theme imports Clay CSS through the file clay.scss. It contains @import 'clay/base'; for Styled Theme and @import 'clay/atlas'; for Classic Theme. These imports include everything mentioned above. We can break this down into their individual imports to make it easier to see what to remove.
The line @import 'clay/atlas'; imports:
clay.scss file.We will comment out every component except the components that import CSS variables, CSS style resets, grid, modal, and utilities. We need the modal styles to be able to sign in on a vanilla Liferay instance. You can remove this if it is not relevant to you.
This should have reduced the size of clay.css in 7.4 to ~127kb or ~16kb gzipped. Your results may vary depending on the version of Clay you are using. We removed the last 5 Liferay Theme related imports. They contain Liferay specific extensions of Clay and a few backward compatible styles. By removing these imports, it also helps avoid a potential build error if you are not importing Clay's alert component.
Load Everything for Logged in Users
The next step is to load Clay CSS, in full, for users that have logged in. This step may not be needed in 7.4 due to the Clay Admin feature. It provides styles for most of Liferay's admin components so you only need to worry about your page styles. It is loaded only for users that have logged in.
We recommend not removing variable imports. There are component specific variables that are reused in other components in Clay. We were not able to completely modularize it due to backward compatibility issues. You will most likely encounter build errors without further customization. If you are a completionist and need to do it anyway, this is your warning.
7.3
7.3 does not include Clay Admin. We will need to load Clay CSS fully, otherwise most admin related controls will be unstyled. We can create a file clay_loggedin_user.scss in your theme's src/css/ directory, then import atlas.
We can gate this behind an if statement in the head tag of your theme's portal_normal.ftl. The code below checks if a user has signed in.
It is included before <@liferay_util["include"] page=top_head_include /> so our clay.css styles will win over clay_loggedin_user.css.
We can refine the amount of CSS further for signed in and admin users. It will not be covered here, but the steps above just need to be repeated.
Conclusion
This is one method for slimming down Clay in Liferay DXP. If you have another method please share and contribute to this post by sending a pull request!