10 Best Practices For Successful Adobe Experience Manager Sites

What used to take us a week can now happen in 20 minutes with Adobe Experience Manager. We have the control to make changes when the market demands, allowing us to be much more agile as a team. – Kamran Shah, Silicon Labs

For websites with a large repository of content, business enterprises need a content management system (CMS), which can provide an easy and fast method to create and reuse content. This is where we recommend the Adobe Experience Manager (AEM) tool with its user-friendly interface and out-of-the-box tools for page replication.

Effectively, the AEM tool offers a single and centralized location to store your website content, which can lead to multiple benefits like faster site launches, higher incoming traffic, and team productivity.

Despite the many benefits, we have heard users complain about the slow loading of their AEM-powered websites. This is mostly due to a lack of site optimization for speed and scalability. Through this write-up, we shall look at 10 best practices that can improve your website speed and make them successful.

10 Best Practices For Your AEM Website

Each of the following 10 best practices can effectively help you develop and use the AEM tool in the most efficient mode. Let us look at each one of them:

1. Leverage On AEM Core Components

The AEM tool is bundled with multiple core components and templates that can be used to achieve faster time-to-market. AEM components and templates provide website users to adapt their website to changing market needs, thus making them more agile and adaptive. These reusable AEM components are ready for production and proofed for future upgrades.

2. Optimize Your Website Images

Website images constitute nearly 50% of all webpage content and 60-85% of a typical website's bandwidth. Hence, you need to optimize your site images for faster loading. With the Adobe Experience Manager tool, you can leverage the "Image Presets" functionality to deliver your images dynamically in different formats and sizes. Each of the image presets is a predefined set of image formatting and sizing commands to render optimized images to your site visitors.

3. Remove Any Responsive CSS

A responsive website is good to work on any device. However, for websites with loads of content, it is difficult to manage them across all devices. Hence, it is a good practice to remove or disable responsive CSS (if enabled) on your website. With the AEM tool, you can use the Layout Container component to enable (or disable) a responsive layout for your web pages.

4. Create Many Cacheable Requests

A cacheable request is any HTTP response on your website that can be cached (or stored for later retrieval) instead of placing a new request. Caching helps in improving website speed and response by reducing the load on the backend web server. It can also help in reducing database costs.

With the AEM CIF component, you have in-built support for caching responses for any individual site request. Using the AEM tool, you can create and configure cacheable requests at the component level, as well as define the caching behavior for AEM OSGi services with the GraphQL client-side tool.

5. Do Not Change The Library Folder Of Your AEM Repository

The AEM repository contains the library (/libs) and the application (/apps) folders that are regarded as the immutable areas of this tool. This means that they should not be changed in any form (including creating, modifying, and removing) during application runtime. Apart from the /libs and /apps folders, other repository folders like /content, /conf, and /var are mutable and can be changed during runtime.

6. Follow The Project Structure As Recommended By Adobe

The next best practice is to follow the AEM project structure, as recommended by Adobe. Among the recommendations, AEM applications that are deployed must consist of a single AEM package, containing all the individual packages for coding and configuration.

This is recommended for the web application to function efficiently. Additionally, follow the practice of separating your content from the code, meaning that a single content package cannot be deployed to both the /app folder as well as the runtime writable folders like /content and /conf.

7. Use The Proxy Component Pattern

The Proxy Component Pattern in the AEM tool provides flexibility and can prevent content refactoring when any website requires a different behavior for any AEM component. Any customization done on this website component does not impact other sites.

As a good practice, make sure the “resourceType” property of each content resource is pointing to site-specific components, in place of those that are shared among multiple sites.

8. Test The Website Code On AEM And Dispatcher

Once you are ready with the website code, make sure that you validate and debug your AEM code on AEM and Dispatcher tools. This enables the migration of the website code from the legacy mode to the flexible cloud mode. Being independent of AEM, dispatcher tools must be configured properly for code testing.

9. Leverage The AEM Responsive Grid And Style System

As part of the AEM Layout Container component, the AEM responsive grid works as a stylesheet, which allows content authors to add their components within the grid.

Authors can use the Layout mode to specify responsive behavior including column spans, content for specific breakpoints, and to preview them on multiple devices. To reduce the website development efforts, leverage the capabilities of the AEM responsive grid and empower your content authors to use them.

10. Use The Editable Templates Feature

Newly introduced in the AEM tool, the Editable templates feature allows content authors to create and modify their templates. The Editable templates feature is recommended for developing new AEM-powered websites and provides a consistent author experience. To create their templates, authors can use the template console and the template editor for any new AEM project.

Conclusion

By following these 10 best practices, AEM users can overcome the challenge of any lag in their website speed or performance. With the AEM tool, website users and administrators can respond to changing business needs without involving the site development team.

At EnFuse Solutions, we bring years of industry experience in providing enterprise data management solutions and executing a variety of projects for our global customers. We have specialized in many technology domains including data management, data annotation, and proctoring services. Looking for a technology partner to help you out in your eCommerce strategy? Contact us now.

Read more: Best Practices For Migrating To Adobe Experience Manager