Best Approaches to Client Libraries in Adobe CQ5, Part 2
In our latest post Best Approaches to Client Libraries in Adobe CQ5, Part 1, we explored the functionality of the Client Library Folder in Adobe CQ5, known as the clientlib, and how it can be properly utilized to create a well-designed application. Continuing on the different approaches, we will also discuss dependencies and how you can optimize performance through clientlibs.
Dependencies
One nifty feature of clientlibs is the dependencies property, which allows you to define dependencies between clientlibs. One example of dependencies is that a component may be dependent on jQuery to function. If the dependencies property of “cq.jquery” is added to the template-level clientlib node, this clientlib can be ‘coupled’ with the template-level clientlib.
For example: <cq:includeClientLib js=”project.all” />
Will then result in: <code><script type=”text/javascript” src=”/etc/clientlibs/foundation/jquery.js”></script><script type=”text/javascript” src=”/etc/designs/{project}/clientlib.js”></script></code>
With all of these features in mind, you can structure your application in a secure, optimized, and logical fashion.
Download Blue Acorn iCi’s “Amplify the Customer Experience with Analytics” whitepaper to learn how you can use analytics to enhance the entire customer journey.
Optimizing Performance
When it comes to the production environment, page load performance is of the utmost importance. The more files that need to be fetched and the greater their size, the longer it will take for the page to be loaded and dispatched to the user.
CQ5 can deliver enhanced performance by enabling Minify and Gzip in the Day CQ HTML Library Manager of the Felix Configuration console. Minify compresses JS and CSS using the YUI compressor, removing all comments and whitespace. This not only obfuscates the source code but also reduces the file size for faster load time.
You can also save even more bandwidth and increase speed by enabling Gzip compression in the Felix console. Gzip is an algorithm that can compress a file ten-fold. The server sends compressed content to the browser of the Gzip encoding, and the browser accepts its compression scheme and decompresses it before loading it into the cache. These are two simple ways of improving overall performance.
Summary
We have covered the centralized, modular, and hybrid approaches to setting up clientlibs in your CQ5 project as well as a few simple tips for optimizing your dependencies and page load performance. A wonderful thing about the organization of clientlibs in CQ5 is that any combination of these strategies can be utilized within your project. You may prefer to always keep “global” clientlib resources at the template level (the centralized approach), and component-specific clientlibs at the component level (the modular approach). Then, you can couple clientlib dependencies and optimize page performance with ease!
No matter what you choose, utilizing clientlibs is essential to well-organized code and will assist you on your path to success. Happy coding!
If you need help optimizing your analytics strategy, we can help. Reach out to us today.