Adobe Granite HTML Library Manager : A Configuration for ClientLibs

ClientLibs is having an OSGi Configuration in the Felix console named:

Adobe Granite HTML Library Manager
Here, We are going to explain each and every option in this configuration in detail.

1.Minify:
If we checked minification, it will compress all the js/css files by removing all the spaces and extra lines of files.

To enable this configuration in the Production server is mandatory, because it will decrease the response time of the page. But not use in Dev Server, because css/js files will become difficult to debug.

Check the response time of every network call in the below images.

Fig- Network Calls(CSS/JS)Before Minification


Fig- Network Calls(CSS/JS)AfterMinification

It minifies all the css /js files by renaming it like fileName.min.js.

Fig-removes extra space after minification

2.Debug:
This configuration is checked in Dev Server because this configuration doesn’t concatenate the clientlibs and serve js and css files individually.

It helps in debugging.

This will prevent the CQ clientlibs files from being combined into one file and makes troubleshooting JavaScript and css issues significantly easier.
Enable this configuration is equivalent to adding ?debugClientLibs=true.

3.Gzip:
This is also a mandatory configuration in the Production server because it also helps in loading the page quickly.

Without Gzip:

Fig-Response Without Gzip

In the above diagram:
The browser requests a file index.html from the server.

The server provides the html as a response.
The response provides a 100KB file and Browser displays a page after downloading so much data.

Let’s find out a better solution.
➤The Server is sending a large amount of data. If we have a large file and we need to send it to someone, what we use to do?

➤We just Zip it and send it to the receiver. So if we could send a zip file to the browser, it will save a lot of download time and bandwidth.
How GZip works?

Fig-Reduced Response after GZip

The browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes): Accept-Encoding: gzip, deflate

The server sends a response if the content is actually compressed: Content-Encoding: gzip

If the server doesn’t send the content-encoding response header, it means the file is not compressed (the default on many servers). The “Accept-encoding” header is just a request by the browser, not a demand.

Our job is to configure the server so it returns zipped content if the browser can handle it, saving bandwidth for everyone and giving us a happy user.

Fig-Network calls without Gzip


Fig-Network calls withGzip

An ideal Request and Response for Gzip is:

Gzip, saves a lot of bandwidth and the response time of each network call.

Note: While enabling Gzip in the OSGi Configuration, activate the bundle (Adobe Granite Ui Clientlibs Bundle) and clear the cache. Sometimes after enabling it, It serves the request from the cache. So to clear the cache is important. Also, don’t forget to check the Accept-Encoding in the request headers and Content-Encoding in the response headers.

4.Timing: This enables JS Load timing statistics.
So add a query Parameter ?debugClientlibs=true in the page url and hit Ctrl+Shift+U.


Fig: Timing

5.FireBug Lite Path: Path in the workspace where the firebug-lite.js file is located. The script should make sure it does not activate if the real firebug is present. Default: "/libs/widgets/cq-widgets.js/files/endorsed/ firebug/firebug-lite.js "

Browsers have online plugins to install FireBug Lite in the browser that help to debug the css/js files. So the workspace firebug-lite.js will execute if it doesn’t find the file in the browser.

6.Debug Console: To activate this configuration is equivalent to adding "debugConsole=true" in the page Path. If we activate this configuration, FireBug Lite gets activated in the browser.

7.Force CQURLInfo: Enabling this configuration provides the "CQURLInfo" jquery object in the AEM page console. If disabled, this object will come as "undefined" in the browser console.


Fig-Implicit Object CQURLInfo in the AEM Page

8.Max Age: This directive specifies the maximum time in seconds that the fetched response is allowed to be reused from the browser cache within that time of the request. For example, "max-age=50" indicates that the response can be cached and reused for the next 50 seconds.


Fig-Max Age in the Response Header

You can check the cached files in chrome from here “chrome://cache/”.

9. Allowed Library path: This configuration indicates that from which locations clientlibs are allowed to be loaded. The default values are “/apps,/libs,/etc”.

Fig-Allowed Library Path

10.JS/CSS Processor Default Config:
The default value of this configuration is "min:yui".
The full form of yui is Yahoo! User Interface Library.

According to Yahoo!'s Exceptional Performance Team, 40% to 60% of Yahoo!'s users have an empty cache experience and about 20% of all page views are done with an empty cache.

This fact outlines the importance of keeping web pages as lightweight as possible. Improving the engineering design of a page or a web application usually yields the biggest savings and that should always be a primary strategy.

With the right design in place, there are many secondary strategies for improving performance such as minification of the code,

So YUI is a tool that helps in compression of js/css files.

Fig-JS/CSS Processor

You can use any other compressor as well, As I tried with min:jquery. You can find alternatives to yui from here https://w3techs.com/technologies/compselect/js-yui.

11.Max Data URI Size: The minification of css-files can auto-inline small resources (e.g. icons). The config-parameter “htmllibmanager.maxDataUriSize” steers maximum size for resources to be auto-inlined.

Let’s understand this with an example:
I have a css file like this:

#tiny-icon { height: 32px; width: 32px; background-image: url("tiny-icon.gif"); }

If sample-icon has a size of 360 bytes. With maxDataUriSize <= 360, the minified css file will look:

#tiny-icon{height:32px;width:32px;background-image:url("test-alex/tiny-icon.gif")}

With maxDataURI Size > 360, the icon will be auto-inlined as data-url:

#tiny-icon{height:32px;width:32px;background-image:url("data:image/gif;base64,
R0lGODlhIAAgAIQQAEeczSqmzligoGmarl6khnCdy3CpaBj

The format of data URI is:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>

To understand the benefits of data URI, You can go to this website.

Note: Sometimes the configurations may not work because some of the configurations get its value only when the bundle is activated. So just restart the bundle shown below and everything will work fine.

Fig-Adobe Granite UI Clientlibs Bundle

I am still exploring the rest of the options related to this configuration. We will share another blog on the same.