Edge Delivery Services empowers developers and authors to create lightning-fast, high-performing digital experiences that score a perfect 100% on Google’s Lighthouse metrics. With Edge Delivery, you can choose from two flexible implementation options – document-based authoring and WYSIWYG (What You See Is What You Get) – to streamline your development workflow and accelerate content authoring.
Edge Delivery Services Setup
This blog will focus on document-based authoring, also known as Project Franklin, Helix, or AEM (Adobe Experience Manager) Live. To unlock the full potential of Edge Delivery Services and get started with local development, please refer to Adobe’s comprehensive guide for setting up Edge Delivery Services locally.
With this foundation, we will discuss the developer’s insights on document-based authoring in the subsequent section.
Tips and Tricks
Be a Lighthouse Keeper
The overarching goal is to maintain a perfect Lighthouse score throughout the development process. To achieve this, regularly monitor the score at key milestones, such as the completion of each feature or block. Referring to the diagnostics and addressing suggested areas of improvement will help you maximize your score.
For instance, look at the items listed in the image below. By keeping a close eye on Lighthouse performance, you will significantly reduce the number of issues to address, resulting in a much shorter list. Regular monitoring helps identify and resolve problems early on, streamlining your development process.
Example of Google’s Lighthouse Diagnostics for a website.
Additionally, by adopting a mobile-first development approach, you can minimize rework and ensure a seamless user experience across all devices. This proactive strategy will eventually save time and effort.
Best Practices for Accurate Lighthouse Score Testing
When testing Lighthouse scores during local development, it’s essential to minimize external factors that can impact your results. Only enable necessary browser extensions, as they can negatively affect your score. If you’re unable to disable extensions, consider using the command line interface instead. To get started, refer to the steps below.
- Install Lighthouse: Run the following command to install Lighthouse globally on your machine:
npm install -g lighthouse
- Run Lighthouse: Check your score using the following command:
lighthouse <url>
- Customize breakpoints (optional): To test specific breakpoints, pass options using the following command:
lighthouse <url> --view --chrome-flags="--window-size=<windowWidth, windowHeight>"
Replace <url> with the URL you want to test, and <windowWidth> and <windowHeight> with your desired dimensions.
Leveraging the Boilerplate Code for Enhanced Performance
Edge Delivery Services’ boilerplate code offers a range of functions designed to optimize code performance. To explore these functions and gain a deeper understanding of the code, review the scripts in aem.js and script.js. These scripts provide out-of-the-box (OOTB) functions that can significantly enhance your development workflow.
One of the noteworthy functions is the createOptimizedPicture(), which optimizes image delivery. Additionally, the buildAutoBlocks() function is a valuable tool for autoblocking, particularly on blog post pages or when creating common components for pages using the same template. This function can serve as an inspiration for your own custom solutions.
Naming Conventions for Blocks
To ensure seamless rendering, verify that the block name on the document matches the corresponding block folder and file names (CSS/JS) under the /blocks directory. For instance, if the block is named “social-media-links“, the folder structure should mirror this naming convention.
Example block folder structure.
On the document, the block can be referenced using the following variations, all of which will render the above-sown block successfully:
- social media links
- Social Media Links
- social-media-links
- Social-Media-Links
Example block authored in a table.
Note that while the naming convention is case-insensitive, it is sensitive to camelCase. Therefore, using “socialMediaLinks” will not render the block correctly. Maintaining consistent naming conventions ensures efficient block rendering and avoids potential issues.
Checkout the OOTB Block collection
Before building a new block from scratch, take a moment to explore the out-of-the-box (OOTB) options available with Edge Delivery Services. The Edge Delivery Services offers a comprehensive array of block examples that can serve as a foundation for your project, saving you time and effort. Although the OOTB blocks may seem comparable to core components, they serve a distinct purpose. Unlike core components, the block collection from the boilerplate code cannot be extended, and no updates from Adobe should be expected. Developers are free to utilize or repurpose any block from the collection or those found in the boilerplate code. By leveraging the OOTB collection, you can accelerate your development process and avoid reinventing the wheel.
Overcome New Edge Delivery Services Obstacles
By incorporating these tips and tricks into your Edge Delivery Services-based development routine, you’ll be able to overcome common obstacles faced by a new Edge Delivery developer. Remember, the key to success lies in continuous learning, adaptability, and a willingness to explore new approaches.
Stay curious!
