From now on most CSS files in Liferay have hashed file names at build time. For example, a clay.css file may appear at run-time with a randomly generated hash value in the name, like clay.(tvERyCVfuRc).css.
This hash value represents a unique version of this file, so the browser can identify that the file's contents haven't changed. This allows the file to remain in Liferay's cache indefinitely.
For those files that can not be hashed, because they are generated in runtime by the server depending on some parameter such as the css tokens, a new onfiguration is available in DXP to configure the TTL and the possibility to add the no-cache header, that ensures the revalidation of the asset with the server before to being served.
Also, hashed files have a fallback strategy based in TTL+eTag if they are called by their canonical name, this is a fallback for error in the import maps or old portlets that doesn’t know the name of a hashed file.
Key Benefits:
The new Liferay DXP caching strategy for CSS files improves performance and stability.
Faster Page Loads: Significant reduction in subsequent load times.
Elimination of Stale Resources: Hashed URLs prevents users from seeing outdated CSS after an update.
Reduced Origin Server Load: Less server overhead as browsers retrieve unchanged files directly from their local cache, saving CPU and bandwidth.
Cache busting: Updated resources automatically force the browser to fetch the new version, but updating their file name with a new hash when content changes.