Edge Delivery Services provides a boilerplate project with basic components that can be easily integrated into an existing Adobe Commerce Cloud project. In a recent migration, we took an Adobe Commerce Cloud website from an average Google Lighthouse score of 20 to an astonishing 95+, significantly enhancing both performance and user experience.

Read on to discover how our strategic approach and innovative solutions can help your business achieve similar success.

Embracing the Learning Curve

Edge Delivery Services uses a new approach to deliver content compared to Adobe Commerce or Adobe Experience Manager.

Here are some key takeaways:

• Edge Delivery Services uses Markdown (MD) behind the scenes, which comes with certain limitations.
  • No Nested Blocks: You can’t directly add a block inside another block
  • Advanced rich text features are not supported:
    • Font Size
    • Font Color
    • Horizontal Rule
    • target=_blank in links
• Edge Delivery Services uses client-side rendering, while server-side rendering is not supported.

Here are a few client-side rendering pros:

• Simplified local development: Developers would spend less time on development and bug fixing.
• Safe for SEO: According to Adobe, client-side rendering is safe for SEO if the website is optimized for speed. Modern search engine crawlers can execute JavaScript.
• Reduce server cost: Rendering is happening on the client, so there’s no need to have expensive servers
• Asynchronous data loading: Enhance performance by loading only the necessary resources on demand

But there are workarounds to achieve the desired outcome. For example, you can set target=_blank to all external links with JavaScript without an author to manually set them. This approach would guarantee the same behavior across the website.

Building Blocks, Not Pages

Edge Delivery Services blocks are individual components, each serving a specific function. Examples include hero banners, CTAs, product lists, product details, and reviews. When planning, prioritize individual components over entire pages. Combine similar components into a single one using block “variants” to reduce development and quality assurance (QA) time.

Enhancing the Authoring Experience

Edge Delivery Services with Adobe Experience Manager Universal Editor enhances the authoring experience compared to Adobe Commerce Page Builder. You can preview, in real-time, how the content changes would look when published, streamlining the authoring and development processes.

Focusing on Website Performance

Blue Acorn iCi migrated a project from a Luma-based Adobe Commerce store to Edge Delivery Services. Our average Lighthouse performance score increased from 20 to 96 points. Edge Delivery Services uses as few 3rd-party libraries as possible to get that increase.

To achieve a high Lighthouse score, we used this loading priority:

• Priority 1: Content above the fold (Edge content and A/B Testing)
• Priority 2: The rest of the content
• Priority 3: Third-party tags and scripts (Exception: conversion pages like checkout)

Tip: Proxy 3rd-party resources (scripts, styles, fonts, images, videos) used above the fold through your CDN. This improves load times and ensures these critical elements are delivered efficiently. Also, ensure you don’t have any layout shifts above the fold.

Speed and SEO Are Interconnected

Our project demonstrated that improving the Lighthouse score significantly improves organic SEO rankings. Faster websites not only provide a better user experience but also rank higher on search engine results pages, driving more organic traffic.

Building a Brand-Oriented Authoring Experience

Edge Delivery Services has many authoring limitations, forcing authors to stick to a single branding style rather than allowing authors to do whatever they want with the content. These limitations might be considered challenging initially, but they prove to be a safer authoring option in the long run. We created a library of standardized components (blocks) that adhere to the brand’s style guide.

To learn more about the benefits of Edge Delivery Services, contact Blue Acorn iCi to learn more.