A radically new approach to Content Management — Speed up everything with Adobe Edge Delivery Services
One revolution follows the next at Adobe! The new Adobe Edge Delivery Services promises nothing less than the fastest websites on the Internet with Lighthouse Scores of 100. The technology is being introduced as a new presentation layer for Adobe’s Content Management System, Experience Manager and Adobe Commerce (formerly Magento). It offers exciting new possibilities for content creation using Word documents.
Following the introduction of the generative artificial intelligence Firefly, the Content Authenticity Initiative against misinformation on the Internet and Adobe Express as a creative tool for everyone, Adobe has now presented a radical new approach to content management. The enterprise CMS Adobe Experience Manager is being expanded to include an extremely lean and fast front-end service. In addition, there is a completely new approach to content editing using Word documents and Excel spreadsheets. This way, the vision of a serverless CMS and composable content services is achieved.
The fastest websites on the Internet
Anyone involved in SEO and website performance optimization will certainly be familiar with the tests and tools developed by Google, such as Pagespeed Insights or Lighthouse. These tools can be used to measure how quickly a website loads and how good the associated user experience is. In addition to performance, tests are also carried out on SEO, accessibility and best practices. Numerous metrics such as Largest Contentful Paint (LCP), First Input Delay (FID) or Cumulative Layout Shift (CLS) of the Core Web Vitals are collected for the survey.
During the development of Adobe Edge Delivery Services, the primary goal was to achieve a perfect score of 100 for all 4 Lighthouse tests. This was achieved by avoiding popular front-end frameworks and libraries such as Angular, React or Vue, as these create unnecessary overhead. Adobe’s development team relies on pure core web technologies such as HTML, JavaScript and CSS. During development, care was taken to adhere to all best practices for optimal performance and not to make any compromises.
The result is impressive! Even for an e-commerce site like Maidenform with Adobe Commerce as the backend, a Lighthouse Score of 100 was achieved. With e-commerce applications, it is usually particularly difficult to achieve good performance because a lot of data has to be loaded dynamically (product information, prices, images, etc.) and often many analysis and re-targeting tags are integrated in the front end.
The newly created framework is available as an open source boilerplate on Github. If you want to try it out for yourself, you can set up your own website in just a few minutes. All you have to do is play through the developer tutorial once.
The high loading speed is achieved, among other things, through so-called phased rendering, in which the most prominent and important components of the website “largest contentful paint” are loaded first.
For an implementation you start with the thoroughly optimized boilerplate and then try to maintain the lighthouse score of 100 while adding further blocks and components.
Of course, a large part of the speed also depends on the close integration and perfect setup of a content delivery network. The Adobe Experience Manager Cloud Service relies on fastly as standard. A new, extremely fail-safe architecture has been created for the Edge Delivery Services, which is based on 2 CDNs (fastly and Cloudflare). If one of the two fails, the traffic continues to run via the other network.
Incidentally, the name Edge Delivery Service also comes from the CDN architecture, where content is retrieved directly via so-called edge servers at the edge of the global network. That way it, the content delivery happens through servers located as close as possible to the client in order to minimize latency and thus increase speed.
Media such as images and graphics also play an important role in performance. That is why they are also delivered in an optimized way through the CDN.
Publish directly from a Word document to the web
Sounds strange, but it’s true! To be honest, an editorial workflow often looks like this: content is first created in Word documents, which are perhaps collaboratively edited. Then the whole thing is copied and pasted into the input mask of a CMS before it gets published.
That’s why Adobe thought: Why not simplify this process? Why don’t we just let the editors work in their Word documents and create a service that publishes the content directly from the documents to a website?
A little browser plugin called AEM Sidekick helps editors to publish their document. Clicking on “Preview” converts the document into HTML code and opens it in a preview mode. A click on “Publish” then publishes the page live on the website. Authors can also access a library of blocks for various design options (header, tabs, slider, accordion, etc.).
Every now and then you hear the keywords “Franklin” or “Helix”. Both are internal project names that were used in the development phase of the technology before the finished product was called Adobe Edge Delivery Services and was incorporated as a feature in Adobe Experience Manager.
Your entire website in Sharepoint or Google Drive?
That’s exactly how it works! With Adobe Edge Delivery Services, the folder structure of Microsoft Sharepoint or Google Drive is used to map the content structure of the website and control access rights. Even page templates or parts of them can be organized in documents, such as header, navigation and footer. One document is then simply referenced in another.
I personally find it very practical to use Excel tables for everything that can be easily represented in table form, such as FAQs, product information, redirects, metadata, etc. All this data is then also pulled from the Excel sheet and rendered into the HTML.
The added value of Adobe Edge Delivery Services
Isn’t it nice that everyone benefits?
The end customers are happy because they can find the brand better in Google searches and because the page loads quickly and offers a good user experience.
The brand is happy because its SEO ranking is improved, user engagement on the website is increased and, last but not least, because conversion rates increase as a result.
Marketers and authors are happy because they can roll out new websites super quickly and they can edit content super easily.
Developers are happy because they don’t have to learn complicated frameworks, they don’t have to go through complex deployment pipelines and they don’t need a lengthy setup to start development. After all, it is a pure front-end technology. The backend part runs as a service.
Further use cases, extensions and integrations
Forms:
Adobe’s development team has come up with a very smart way of dealing with forms. An entire form can be created using an Excel sheet. The rows represent the individual form fields (e.g. name, age, address, etc.), the columns represent the attributes (e.g. type: e-mail, label, mandatory field, etc.).
The whole thing is then converted into JSON code by clicking on “Preview”. To integrate the form into a page, you only need to take the URL of the Excel file with the file extension .json and put it into the respective Word document that represents the page in which the form is to be embedded. This means you don’t have to touch any HTML code to create a form.
There is even a very practical tool that can convert existing HTML forms into Excel format. This can speed up a migration from another technology enormously.
Where does the data go when someone submits the form? In the Excel file, all you have to do is create another data sheet/tab and name it “incoming”. All data records from each submit will then end up there.
Traditional CMS + Edge Delivery:
If you prefer to use the traditional CMS functionalities of the Adobe Experience Manager, but don’t want to miss out on the enormous speed of the new front-end technology, you can use the new Universal Editor. This virtually combines the old world with the new.
The special thing about the Universal Editor is that it can also be connected to other content sources. This allows editors to edit content in a WYSIWYG interface, regardless of whether it comes from the Experience Manager or another system. Everything is brought together in a common front end.
Personalization:
Using an integration with Adobe Sensei artificial intelligence, variants of the content can even be generated for different target groups. These variants can also be used for A/B tests.
Digital Asset Management (DAM):
Last but not least, there is a so-called Asset Selector that can be used to insert images or other media from the digital asset management repository (AEM assets) into Word documents and thus into the website.
Commerce:
As mentioned at the beginning, the new frontend service is not only used to speed up content distribution, but also to improve e-commerce experiences. The framework has therefore been expanded to include e-commerce components. So-called dropins are used to implement typical components of an online store such as product details, shopping cart or checkout. These can be flexibly combined with other blocks from the content area.
