How to Create a Light and Fast-Loading Theme with Liferay?

When It Comes to Websites, Page Speed Matters!

This article is motivated by our website project accomplished by our Integration Platforms and AI Department using Liferay 7 (the latest version of Liferay Portal) for one of our clients– a large Canadian corporation in telecommunications and media industry. Alexis, our front-end developer, shares with you his first-hand experience of this project with the overarching objective to demonstrate how to create a light and fast-loading theme using Liferay portal? 

Right off the bat, we need to acknowledge the fact that, “The average online shopper expects your pages to load in two seconds or less…; after three seconds, up to 40% will abandon your site” (Gomez Inc., 2010). Thus,”page speed is increasingly important for websites” (see Lara Callender Hogan).

Thus, “page speed is increasingly important for websites.”

However, Liferay portal technology itself is not a one-size-fits-all solution. For example, in some cases, if the integrator does not develop a context-specific front-end libraries, the website will be crippled by unnecessary delays. Some experts have also suggested a mainstream recommended method which is to extend the Liferay theme by default. This, however, would result in a technical failure thereby extended web page loading time. Thus, based on the lessons learned from our past projects, i.e. experiential learning, and lucky to have the latest Liferay portal, Liferay 7, we decided to tweak the technology, develop a new module, and adapt it to unique expectations of our client. In what follows we share with you our feedback and the positive test results.

Liferay Portal: A Powerful, Yet Delicate Tool

Liferay is an Open Source Content Management System (CMS) and Portal, written in Java. Therefore, a service provider like us has flexibility to customize it as much as required to fully adapt it to the client’s needs. It provides the developers with an extensive user management, access rights and documents. However, there are some theme specific and performance issues to consider before starting a new website project. Here is a list:

• Generally, a Liferay theme is home to a bulk of all the front-end libraries and styles needed by Liferay and its portlets. However, a big chunk of the codes and dependencies is useless for a guest visitor. In case of our client, these kinds of visitors form the majority of their users and indubitably the unnecessary code overload will cause performance issues and slow the site down.
• Liferay imposes the presence of its Design Language, Lexicon (or rather, its only implementation: Clay). This may also cause several problems:
  • Mismatch between Design Language and the client’s design requirements can limit the project’s design feasibility.
  • This situation causes conflicts between CSS rules, therefore increasing the development time.
  • Liferay’s template bugfixes and updates can break the developed styles causing a an increase in maintenance time.
  • With content administration being on the pages, the developed styles can break the behavior of the administration styles also contributing to the increase of the development and maintenance time.

Although these issues impose challenges on a Liferay deployment project, we can offset their impact by developing front-end libraries, as you can read in what follows.

The Solution for Creating a Light and Fast-Loading Theme with Liferay

The solution to benefit from the state-of-the-art Liferay Portal while keeping in check the loading speed is to create a light theme without any Liferay front-end libraries such as senna.js, AlloyUi, Lexicon/Clay, etc.

However, in Liferay 7 this objective cannot be obtained as easy as it looks mainly due to not having the possibility to have an administration view of the site. In order to avoid this issue, we have internally developed a stand alone liferay module which is called “Theme Switcher“. This added functionality allows us to dictate the portal to display a theme according to the role of the user. Here is the link to the github repo: savoirfairelinux/liferay-theme-switcher

5 Steps Towards Setting Up a Light Theme

Here are the five steps for creating a light theme using Liferay 7. But before we get started, let’s look at this instance of a Liferay’s light theme which can be found on GitHub: savoirfairelinux/lightweight-liferay-theme. This theme is created using Maven, and if you wish to modify it you actually can. It is all open source.

Step 1 – Clean Up Your Themes

Remove the inclusions from the portal_normal.ftl file, mainly: <@liferay_util [" include "] page = top_head_include />. But also <@liferay_util [" include "] page = body_top_include /> and so on.

Step 2 – Repair the Themes

Unfortunately, the top_head_include variable does not only contain Liferay’s CSS and javascript libraries, but also many other things. It is therefore necessary to re-include the tags of the head that interest us. For some examples of the tags, consider the following:

• The meta-tags that the user can define in each pages (keywords, description, etc.):

<@liferay_theme["meta-tags"] />

• The definition of canonical URLs:

<#if !is_signed_in && layout.isPublicLayout() >
  <#assign completeURL = portalUtil.getCurrentCompleteURL(request) >
  <#assign canonicalURL = portalUtil.getCanonicalURL(completeURL, themeDisplay, layout) >
 
  <link href="${htmlUtil.escapeAttribute(canonicalURL)}" rel="canonical" />
 
  <#assign availableLocales = languageUtil.getAvailableLocales(themeDisplay.getSiteGroupId()) >
 
  <#if availableLocales?size gt 1 >
    <#list availableLocales as availableLocale>
      <#if availableLocale == localeUtil.getDefault() >
        <link href="${htmlUtil.escapeAttribute(canonicalURL) }" hreflang="x-default" rel="alternate" />
      </#if>
      <link href="${htmlUtil.escapeAttribute(portalUtil.getAlternateURL(canonicalURL, themeDisplay, availableLocale, layout)) }" hreflang="${localeUtil.toW3cLanguageId(availableLocale)}" rel="alternate" />
  </#list>
  </#if>
</#if> 

In order to know what to look for, and how, you need to know the basics of jsp which is used to generate the variable top_head_include. For more information, please consult the following link.

Step 3 – Organize the Themes

One of the challenges is that liferay-theme-tasks (link) which is a gulpfile provided by Liferay may not function smoothly. The good news is that you can organize the themes the way you want; i.e. according to your team’s development standards (sass, less, es6, etc.). In case of this client, we have used and embellished the usual gulpfile to our web projects. All headed by Maven and the front-end plugins.

Step 4 – Automate the Deployment of the Themes

Step 4 is perhaps the longest one, but as soon as it is completed you have a turnkey solution at hand. To quickly deploy the light theme files you have developed, take this advice. You do not have to compile and wait for the deployment of the theme for each modification of CSS or JavaScript (the features normally present in liferay-theme-tasks). In the OSGI context of Liferay 7, it is not possible to simply access the theme files (CSS, js, templates, etc.). Thus, you have to do the trick which you can learn by looking at the gulp `deployLocal:syncTheme` task.

The main idea is to transform the deploy module in webbundledir mode instead webbundle.

Step 5 – Enjoy the Developed and Deployed Themes

You now have a Liferay theme, which contains only what you want for your project, and which is deployable like any other Liferay themes. So, it is time to just enjoy the fruit of your efforts.

Results and Robustness Checks

In order to evaluate the performance of the theme(s) created, you can conduct three tests on each page (i.e. instance) with the same content. We have tried these tests, running each one of them on a Liferay server configured for production. Below are the three instances for which we used these tests (on a serveur with 8 CPU and 28Go of RAM, with a SSD disk).

3 Instances Tested for Robustness

1. A Liferay vanilla theme, the “Classic” theme
2. The light theme we developed for the client’s web page project
3. A possible “real” case scenario: the “Classic” theme with more styles and JavaScript of the theme that we have developed for the client.

To perform these 3 tests, we used a local instance of speedtest.io (6.0.3), with Chrome 62. For each test, 10 calls were made, below is the summary of the results.

Results of the Test 1: The Classic Liferay Theme

• 52 requests
• 1064.77 kb
• DOMContentLoaded: 1.24s (±31.95ms)
• Load: 2.06s** (±52.89ms)
• SpeedIndex: 1349 (±34.99)

We deemed these results acceptable as we could not find a single glitch in the theme as far as page performance was considered. The results are significant as they pass beyond the threshold for requests. As a rule of thumb, if the number of requests go beyond 40, it is considered a large number of requests.

Results of the Test 2: The Light Theme

• 37 requests
• 800.38 kb
• DOMContentLoaded: 588ms (±42.96ms)
• Load: 1.17s** (±55.17ms)
• SpeedIndex: 863 (±39.57)

Fewer queries were made as it was a smaller page. Thus, this custom theme is more powerful than a basic Liferay theme!

Results of the Test 3: The Classic Theme with JavaScript and CSS of the Client’s Light Theme

• 56 requests
• 1214.59 kb
• DOMContentLoaded: 2.22s (±457.34ms)
• Load: 2.97s** (±458.11ms)
• SpeedIndex: 2475 (±456.71)

Conclusion

Creating a light theme with Liferay is advantageous as it empowers you to maintain control over your company’s image by managing all the items that are sent to the browser. Liferay technology as a tool coupled with our expertise and years of experience working with it offer your company a solution, a powerful website, to stay on top of your content management efforts signaling a positive image to clients.

Overall, this experience has been an instructive and informative one. Our client and us are genuinely happy for the results are satisfactory and in line with our expectations. It is indeed a powerful website worthy of bearing its brand name.