Liferay DXP Performance Secrets: How to Make Your Portal Run Blazing Fast

Introduction

In enterprise portals, performance is everything — slow pages can kill user engagement and cause unnecessary load on servers.
Liferay DXP provides multiple tools and configurations to optimize CSS, JavaScript, and rendering performance across themes, fragments, and portlets.

In this article, we’ll explore actionable tips to improve page load time, reduce bundle size, and optimize Liferay’s front-end performance for production-grade environments.

1. Minimize and Combine CSS/JS

Liferay automatically aggregates CSS and JS resources to reduce HTTP requests.

Enable aggregation in portal-ext.properties:

combo.check.timestamp=false
minifier.enabled=true
theme.css.fast.load=true
theme.images.fast.load=true

✅ Tip: Set combo.check.timestamp=false only in production to skip revalidation checks.

2. Use Clay and Bootstrap Efficiently

Avoid importing multiple CSS frameworks.
Since Clay already includes Bootstrap utilities, skip redundant Bootstrap imports to reduce bundle size.

Example (bad practice):

@import "bootstrap";
@import "clay/base";

✅ Better:

@import "clay/base";

3. Lazy Load and Defer JavaScript

You can defer non-critical scripts by placing them at the bottom of your JSP or fragment HTML.

Example:

<script src="/o/my-custom-module/js/chart.js" defer></script>

For dynamic components:

window.addEventListener('load', () => {
  import('/o/my-custom-module/js/analytics.js');
});

This ensures faster First Contentful Paint (FCP).

4. Optimize Theme Resources

If you’re building custom themes, ensure that:

Images are compressed (use WebP or AVIF).
Fonts are loaded via font-display: swap.
Unused CSS is purged during build.

Example: PurgeCSS config for theme build

module.exports = {
  content: ['./src/**/*.ftl', './src/**/*.js'],
  css: ['./src/css/main.css'],
  output: './build/css/',
}

5. Enable GZIP Compression

Configure GZIP compression in your Liferay server (portal-ext.properties):

web.server.compression.enabled=true

Also enable it in your reverse proxy (Nginx/Apache):

gzip on;
gzip_types text/css application/javascript application/json;

6. Leverage Browser Caching

Set proper cache headers using portal-ext.properties:

browser.cache.signed.in.pages=true
browser.cache.signed.out.pages=true

And in Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|ico|webp)$ {
    expires 7d;
    add_header Cache-Control "public, must-revalidate";
}

7. Optimize Liferay’s Frontend Deployment

When deploying React/Angular portlets:

Use npm run build to generate production-ready minified bundles.
Host large static assets in CDN.
Avoid importing heavy polyfills for modern browsers.

✅ Example (React build command):

NODE_ENV=production npm run build

8. Database & Caching Layer

Although this focuses on UI, don’t ignore backend caching:

Use Ehcache, Redis, or Infinispan for portal cache.
Tune hibernate.cache.use_second_level_cache=true.
Monitor with Liferay Control Panel → Server Administration → Monitoring.

9. Monitor and Measure

Tools to track performance:

Liferay’s Server Admin Metrics
Chrome Lighthouse for page speed
Dynatrace / New Relic / Prometheus for enterprise monitoring

Run Lighthouse and target:

Performance score > 90
FCP < 1.5s
CLS < 0.1

10. Bonus: Asynchronous Fragment Rendering

Liferay supports lazy loading fragments with data-lfr-priority.