Adobe Summit Distilled: Performance is Key
Enhancing user experience and driving engagement with Accelerated Mobile Pages (AMP), Reduced Code and Progressive Web Applications (PWA).
28th Apr 2020
Adobe Summit Distilled: Performance is Key
The summit this year was filled with sessions that showed off impressive new features to enhance user experience and drive engagement. Many of these enhancements come with additional weight on the client side such as enabling (and encouraging) authoring of rich media like video in Magento. Or projected trends towards Machine Learning models for the client as suggested by Ram Parthasarathy in his session “Adobe Target & Adobe Experience Platform: The Future of Personalization”. This type of innovation is in juxtaposition to the well-known trend that becomes more prevalent each year, namely the continued rise in mobile traffic and the lack of user tolerance for extended page load times. It is thus not surprising that, while there weren’t any sessions expressly dedicated to the topic, many touched upon performance and efforts to offset enhanced experiences with a careful eye towards site speed. Experience transformation is key to everything we do at Isobar, so naturally this underlying theme at Summit piqued my interest. There were 3 main trends that emerged for how this could be done: Accelerated Mobile Pages (AMP), Reduced Code and Progressive Web Applications (PWA).
Accelerated Mobile Pages (AMP):While not covered in much depth, AMP is the epitome of performance, though it is often thought of in a narrow scope as a SEO tool. I was extremely excited to hear that AEM is now supporting AMP modes for page templates out of the box. Haresh Kumar and Cedric Huesler call out this enhancement in their talk “Adobe Experience Manager Sites: Top Innovations”. As part of this enhancement all of the core components now support AMP output as seen with their core component library website (https://www.aemcomponents.dev/). While Cedric did not really go into depth about how implementation works, outside of the page’s new Advanced AMP export settings and `.amp.html` design pattern, the enhancement and out of the box support seems like a strong step forward towards addressing this need for more performant mobile experiences.
Reduced Code:In Ram Parthasarathy session on The Future of Personalization, Ram acknowledged the burden to performance that usually comes with personalization. It is of course unarguable that personalization leads to increased engagement and conversion (Claire Yeh and Chris Menezes from Bank of Montreal’s session called “ROI You Can Bank On: BMO’s Blueprint for Proving Personalization Value” clearly illustrate this point case), but Ram projects that the future of personalization will demand decreased network requests decreased use of script tags and an increase in server side rendering/solutions. While this is true of personalization it is also applicable to all web technologies. For some time now Isobar and other industry leaders have been utilizing concepts such as dynamic imports, tree shaking, lossless compression, modular design patterns, DRY code among other practices to help drive down site weight and number of network requests to ultimately increase performance. As Ram discusses these optimizations will become even more important and impactful in the near future and these are steps that every project can take today as many industry leaders, like Isobar, already are.
Progressive Web Applications (PWA):Clearly the star of the show with Magento’s PWA offering (PWA Studio), progressive web applications and off-line experience is gaining a stronger hold in the market. Olena Tkacheva and Andrew Wilcox in their session “Page Builder, PWA Studio, and the Magento Commerce Experience” talk about the “Mobile Gap”, the dependency between desktop and mobile conversion, citing that 4 of the 5 top reasons people don’t convert on mobile being due to sites not being fast enough or otherwise not built/optimized for the mobile experience. The session highlighted that a 1 second delay can be indicative of a 7% drop in conversion and that a 2 second delay can lead to over a 100% drop. Adobe’s offering of PWA Studio is aimed to alleviate some of this pressure.
PWA Studio is actually an open source Git Monorepo (https://github.com/magento/pwa-studio) that “is a collection of tools that lets developers build complex Progressive Web Applications on top of Magento 2 stores”, with Venia being a POC storefront that can be used as reference for development. These tools include libraries and design patterns to streamline work with service works, data binding, GraphQL, CSS modules, state management, React, Redux, off-line states as well as others to build the most performant application and user experience.
The benefits of PWA Studio were highlighted by the Carrier Enterprise team in the “B2B Customer Experience Meets PWA at Carrier Enterprise” session. Two main things jumped out at me from this session. The first was the visibly noticeable and impactful performance boost, or at least the perceived performance as the Carrier team did not call out exact metrics. The other part of interest was how new and underdevelopment PWA Studios is. The value of PWA and performance gains are clear from the Carrier case study, but so were the growing pains of PWA Studios and being an early adopter. What is particularly interesting about PWA Studios is that even if your application doesn’t utilize Magento, the packages and lessons learned that are available within the repo could easily be ported over to any platform and project! The clear benefit of PWA studios though is the ability to leverage the continued growth of the framework over time as opposed to forking off a custom solution (the same conclusion reached by the Carrier team).
While Isobar has been implementing each of these practices for some time now, the widespread endorsement by Adobe and the larger community is heartening. It is also interesting to see how different teams and platforms are integrating these technologies making the implementations more streamline and lower effort to entry. Efforts by Adobe Experience Manager (AEM) and Magento to support headless architecture are key steps towards optimizations like PWA and smaller code footprint. The amazing sessions and lessons learned by so many other enterprise customers also provides a great platform to begin this discussion internally with your own project team to see what can be done to start optimizing your application(s) for performance in a world where mobile use is already over 50% and continues to rise. Unfortunately, there is no silver bullet to address performance and things like AMP, PWA and code optimization are tools towards this aim, but the best solutions are usually holistic and take into account the many facets of your business. It is exciting to see that Isobar’s partnership with Adobe will help to streamline the delivery of these enhanced/ more performant experience with increased ease and without impeding authoring or creativity.