Best Approaches to Clientlibs in AEM: Part III
The breadth of useful and innovative features within Adobe Experience Manager (AEM) covers many different aspects of creating an amazing digital experience:
What about speed? While all of the dynamic and intricate functionality AEM provides is impressive, it does impact the speed of the site. You may already know that page load time has a direct impact on SEO, revenue, customer satisfaction, and conversion rates. Load time often comes down to page design and optimizing the when and how of loading resources on a page. You’ve organized, minified, and gzipped…What more can you do!? There are a few more design tricks with clientlibs you can take advantage of if you’re looking to create extremely fast websites.
Load only what you need
Start by visualizing the types of pages on your site and components on those pages. Maybe you already have a navigation menu designed. That’s a great place to start to figure out what types of pages you have. Do you have components that are only used within that category of page?
For our example, we’ll use an eCommerce site and split the pages into different categories. These would be categories like homepage, product marketing/description pages, shopping flow pages, account management pages, and support pages. Some components are very common and used across most pages, like rich text, images, menus, and so on. Identify these and write them down under a Shared category. Then identify other components that you use only in one or two categories. Hero banner and carousels may only be used on the homepage and product marketing pages.
A marketing page could load <cq:includeClientLib js=”project.marketing.all” /> which embeds “project.marketing” components and has a dependency on “cq.jquery” and “project.shared” resulting in:
This concept works particularly well if you’re aiming for an extremely fast site and minimizing total loaded file size. If mainly targeting mobile users, it may make sense to aim for a low number of requests instead by embedding the “cq.jquery” and “project.shared” in the “project.marketing.all” client library. Keep in mind that this approach will take some additional code updates if you decide later that a component should be used in another location on the site.
… [Navigation component logic]
[Navigation component end]
… [Sitemap component logic]
[Sitemap component end]
<div class=”footer” />
Looking for even faster speeds? Remember when sites loaded “instantly?” So do your customers. Contact us to learn more about how we can help you develop your optimization strategy.
Subscribe to Our Newsletter
Get the latest insights from Blue Acorn iCi