10 Best Practices For Successful Adobe Experience Manager Sites

1
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.
2

• 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
• 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.
• 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.
• 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.

3

• 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.
• 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.
• 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.

4

• 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.
• 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.
• 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.

5
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