AEM Clientlib Versioning

AEM Clientlib Versioning


Clientlib versioning allows CSS and javascript which is served by aem clientlibs to be cached for a very long time which in turn reduces the page load time of the website and improves performance. It has various benefits like -

  • Longer TTL for cached client libraries.
  • Improved web and site performance by reducing page load time.
  • No more inconsistent data from the normal client library.

How it works -

  • It uses Sling Rewriter to rewrite the client libraries and append a unique MD5 value at the end of the client library URL.
  • This url get cache later.
  • This MD5 value is unique for the code of ClientLibs. 
  • If there is a modification in code or ClientLibs, a new MD5 value will be generated and appended to the client library URL this allows it to recache.

Steps to create Clientlib version:

  1. Login to http://localhost:4502/crx/de/index.jsp
  2. Go to /apps/<your-project>/config 
  3. Create a nt:unstructured folder by name it as a rewriter
  4. Go to /libs/cq/config/rewriter/default
  5. Copy the default node and paste it under your project config folder
It will look like this -

versioned-clientlibs

Configure Apache to send the right headers so that it can be cached. Example

Apache server configuration

Versioned ClientLibs URL will look like this:

https://localhost:4502/etc.clientlibs/we-practice/clientlibs/sales.min. 8d1738c51ad22dacbbbec37f85734bac.js

Note -

For loading versioned ClientLibs for the first time you need to restart AEM instance.

Validation -

· Navigate to http://localhost:4502/system/console/status-slingrewriter

· Search for resource path where versioned clientlibs is created /apps/<project-name>/config/rewriter/versioned-clientlib. If a resource path is found under the sling rewriter. That means the configuration is working fine.

Comments

Post a Comment

Popular

AEM 6.3 - Check if page is published or not

If you want to know if the page is published or not you can use the below utility method to know if the page is published or not. Steps - Take Resource Object. Adapt it to Page Adapt page to ReplicationStatus, you will get the status Here is the code - public static Boolean isPublished(Resource resource) { Boolean activated; ReplicationStatus status = null; activated = false; if (resource != null) { try { Page page = resource.adaptTo( Page.class ); status = page.adaptTo( ReplicationStatus.class ); } catch (Exception e) { LOG.debug(e.getMessage (), e); } if (status != null) { activated = status.isActivated(); } } return activated; }
Read more

Sample CQ Filter

import java.io.IOException; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import org.apache.felix.scr.annotations.Component; import org.apache.felix.scr.annotations.Properties; import org.apache.felix.scr.annotations.Property; import org.apache.felix.scr.annotations.Service; import port org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.SlingHttpServletResponse; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /**  * It will intercepts all the incoming requests. Performs  * various operation on Request and Response.  **/ @Component(immediate = true , metatype = true , label = "Filter Service") @Service(value = javax.servlet.Filter.class) @Properties({ @Property(name = "filter.scope", label = "scope", value = "REQUEST"),         @Property(name = "filter.order", label = ...
Read more

Search engine optimization in CQ

Image
SEO Optimization Search engine optimization ( SEO ) is the process of affecting the visibility of a website or a web page in a search engine 's "natural" or un-paid (" organic ") search results . Source : Wiki Whenever you enter a query in a search engine and hit 'enter' you get a list of web results that contain that query term. Users normally tend to visit websites that are at the top of this list as they perceive those to be more relevant to the query. If you have ever wondered why some of these websites rank better than the others then you must know that it is because of a powerful web marketing technique called Search Engine Optimization (SEO) . SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. SEO thus helps you get traffic from search engines.  HTML Tags and SEO Here is the list of important html tags which help search engine t...
Read more