Introduction
Performance is not only a question of making your site efficient on the backend when creating digital experiences on Liferay, but also how quickly and convenient your portal is to use. Google Lighthouse is one of the most effective solutions available to gauge this and audits Performance, Accessibility, Best Practices, SEO, and Progressive Web App (PWA) readiness.
We are front-end developers tasked with producing Liferay pages with high Lighthouse scores, ensuring the performance is smooth, the website is highly accessible, and the structures are search engine friendly.
Prerequisites
- Liferay DXP/Portal 7.3+
Key Tactics for Liferay Frontend
Let’s dive into some strategies you can use to boost those scores while working on Liferay frontends :
- Optimize Images with Adaptive Media :
Adaptive Media Liferay resizes and provides optimized images based on the device used by the user. One of the biggest offenders of bad Lighthouse performance is large uncompressed images.
How to Do It :
- Select Control panel, then configuration, then Adaptive Media.
- Select the resolutions that you want to use in the image (ex: mobile 480px, tablet 768px, desktop 1920px).
Drag and Drop pictures to Documents and Media — Liferay will automatically generate optimized ones.
Use those pictures in pieces, or web content, or widgets, Liferay will display the appropriate size automatically.
Best Practices :
Always upload pictures using Adaptive Media rather than Uploading Static pictures.
Use WebP format where it is possible (smaller, identical quality).
Include descriptive alt attributes to be accessibly provided.
- Reduce Render-Blocking Resources :
Liferay has several CSS/JS bundles, which by default, can slow down first paint.
How to Do It :
Check your theme and fragments to have any non-necessary CSS/JS imports.
At the bottom put heavy/non-critical JS.
Where there are third-party scripts, add the attributes of async or defer.
Enable Lazy Loading.
Minify the JS.
Best Practices :
Minimize what is loaded on a single page.
Minimise use of custom JS/CSS into smaller files.
Do not use inline CSS/JS that is blocking.
Minimize Fragment & Widget Overload :
Each fragment/widget incurs additional DOM, CSS and JS. Excessive numbers of them may slow rendering.
How to Do It :
Audit your pages – find pieces/widgets that can be combined.
Instead of having several similar fragments, have one reusable fragment.
Use Prefer Collections + Templates to structure more content rather than overusing Asset Publisher.
Best Practices :
Eliminate dead fragments/widgets in layouts.
Minimise duplication through fragment sets.
Accessibility Matters :
Liferay is accessibility compliant by default, although bespoke frontends may violate it.
How to Do It :
Conduct a Lighthouse audit → see the Accessibility section.
Correct problems such as a lack of alt tags, inappropriate order of headings, or a lack of contrasting colors.
ARIA roles should be preserved when extending Clay components.
Best Practices :
Apply semantic HTML (e.g. <button> rather than <div onClick>).
Keep a good heading hierarchy (h1 h2 h3).
SEO Enhancements :
Liferay offers SEO capabilities, although some search engine optimization is possible to enhance Lighthouse SEO ratings.
How to Do It :
You can add keywords, meta titles and descriptions to Page Settings just to go to SEO.
Read and write Friendly URLs, rather than query-based links.
Best Practices :
Make meta descriptions page specific.
Ensure only one <h1> per page.
Conclusion
The Lighthouse scores in Liferay do not need to be perfect because the ultimate goal is to create a portal that can be perceived as fast, quick, and convenient. You can make a huge difference in performance and user happiness by using such features as Adaptive Media to optimize images, reduce render-blocking CSS/JS, reduce fragment overloading, improve accessibility, and improve SEO. And when paired with continuous monitoring and optimization, you will easily end up with a Liferay site that provides a smooth, high-quality experience across devices and has a high score on Lighthouse.
