No content

Headless / Composable Development for better Performance HEADLESS / MACH / COMPOSABLE

We’re in changing times for web development The opportunities of finding competitive advantages through development are becoming more and more significant We’re at a moment of seismic change for web development and the impact has the potential to empower other marketing areas as well

It’s important we are Finding the 1% gains For better results

We’re optimizing for the 1% gains And there is technology available to help you win Improving by 1% across multiple parts of your website can give you that extra edge you need to stay ahead of your competitors.

1% better in web/app/content management Headless can improve internal content and site management b Content modelW b Content as datG b EntitieW b Single source of content trut6 b Component based approach C b Page builder / reusable components

1% better performance Headless / composable gives you the tools to improve performance q Lighter front-end coda q Auto image optimizatioc q Better rendering, SSR, CSR, SSG, ISR C q Device optimised experiences

1% better UX, design and branding Freed from the restriction of traditional CMSes, websites can improve s Design freedoV s Advanced interactions & transitionsp s Better branding / brand experienceq s Faster for userq s Improved accessibilitB s Lower carbon output

Development for better UX Headless in Simple Terms HEADLESS / MACH / COMPOSABLE

Monolithic architecture content web server database database code + plugins front-end templated + css CMS Client Monolith Web page In a monolithic system, the CMS is tied directly to the front-end display layer WordPress Shopify Sitecore Joomla Drupal Umbraco Magento

Monolith vs Headless

Decoupled / Headless The head is decoupled from the body and connected through APIs Body / Backend Body / Backend Head / Front-end Head / Front-end Connected through APIs Connected through APIs

Lighter weight front-ends The front-end is much lighter and more efficient The head is much lighter to load compared to the whole body The head is much lighter to load compared to the whole body

Security benefits with a smaller attach surface, and correctly configured, security is improved Less area exposed to security attacks Less area exposed to security attacks

Multiple front-ends, with simplified management Easier to manage, flexible and lighter weight with front-ends The same body can be connected to multiple heads / front-ends The same body can be connected to multiple heads / front-ends

Headless to composable Composable is an evolution of headless / decoupled architecture

Complexity and benefits of composable More complex? No, and the benefits are significant Flexibility to gain infinite power more easily / compose a body with the best element for each part. Flexibility to gain infinite power more easily / compose a body with the best element for each part.

Headless or MACH Content API AI commerce personalization analytics presentation layer admin presentation layer API Headless CMS Commerce Platform API

A word of caution Businesses are sometimes getting too tied up in terminology and acronyms. Don’t go searching for a particular acronym, it’s about the best solution for the project requirements.

Understanding Modern Commerce HEADLESS / MACH / COMPOSABLE

What is modern / headless / composable commerce? The separation of elements, allows the very best services to be used for each aspect, as well as opportunities for a better omnichannel approach. Commerce Experience Management Search Payment Orders Content / CMS Customer Cart Email Execution Inventory Catalogue CRM Commerce Commerce Search Search Inventory Inventory Orders Orders Cart Cart Payment Payment Catalogue Catalogue Promotions Promotions Experience Management Experience Management Content / CMS Content / CMS Email Email PIM PIM OMS OMS CRM CRM Execution Execution Customer Customer Pricing Pricing Front-end API API Monolith vs Headless

Headless / composable commerce platforms Commerce platforms are developing and embracing headless / composable approaches D Centra (headless only commerce platformE D Shopify (Hydrogen/Oxygen)H D BigCommerce (catalyst.devE D Salesforce Commerce Clouf D Adobe Commercw D Swell / Fabric / Crystallize + others & growing

Headless front-end technologies Front-end technologies are developing at pace, empowering more engaging user experiences

Headless content management systems There are some amazing CMSes emerging / evolving, enabling advanced content management, collaboration and publising

A move towards headless/composable commerce We’re seeing brands moving towards headless / composable

UX Is Very important in the eyes of GOOGLE & Others Lots of Tools and Data/Case studies

Google is pushing for better UX We all know that Google is pushing for UX improvements

Google is really pushing the narrative Google are pushing for better user expereinces “Studies show that better Core Web Vitals improves user engagement and business metrics.” Google - Search Console Help

Understanding page experience in Google Search results https://developers.google.com/search/docs/appearance/page-experience “Google's core ranking systems look to reward content that provides a good page experience. [...] check if you're providing an overall great page experience across many aspects”

Self assessment questions content's page experience https://developers.google.com/search/docs/appearance/page-experience u Do your pages have good Core Web Vitals?e u Are your pages served in a secure fashion?e u Does your content display well on mobile devicesF u Is your page designed so visitors can easily distinguish the main content from other content on your pageF u [...]

Development for better UX Headless Has Powers! HEADLESS / MACH / COMPOSABLE

Headless / composable commerce SEO opportunities Headless commerce gives us opportunities to increase SEO performance With headless, there are opportunities to better optimise content, performance, and design/UX, and you can do this independently of each other to improve results.

Finding 1% from Content Management HEADLESS / MACH / COMPOSABLE

Content models break your content down into various structured data formats and blocks which can be optimized individually. Content is treated as structured data​ ​

For example events, people, speakers, sessions, talks, and more can be organized as structured data in the backend. This improves content management, efficiency and content integrity. Nested data organization​ ​

The entity approach ensures content integrity and eradicates redundancy. ​ Structured data for content integrity Speaker Session Talks Sponsors Event

Finding 1% from performance and Tech seo HEADLESS / MACH / COMPOSABLE

7 Modern front-end frameworks come with optimized rendering techniques lik' 7 Server-side Rendering (SSR6 7 Client-side Rendering (CSR6 7 Server-side Generation (SSG6 7 Incremental Static Regeneration (ISR6 7 This ships less JavaScript to the browser resulting in quicker response times for users Performance optimization

) Images can be optimized automatically to the correct size and converted to WebP for further performance gain ) Optimization is on a per device basis, so no need for different images for each device Performance optimization Size: 3 mb Size: 300kb Size: 200kb CMS / FE Upload Web Mobile

Less duplication Headless CMSes have features such as image hotspot and automatic croppin This allows for the same image to be used across mobile and desktop even if the aspect ratios are differen) This results in optimized data fetching and eliminates data duplication

Improved PageSpeed & CWV factors​ With more front-end freedom, optimizing PageSpeed and other CWV factors is easier, as are opportunities to lower carbon use with a similar approach.

Streamlined & strategic SEO ​ All SEO aspects are manageable, configurable through the CMS and customized as required. SEO can become more strategic, as well as less dev tickets.​ All of these areas are configurable All of these areas are configurable Implement SEO rules or tool tips for effective optimization strategy in content management. Implement SEO rules or tool tips for effective optimization strategy in content management. SEO becomes more strategic, and more powerful SEO becomes more strategic, and more powerful

Autogenerated Schema markup (and plenty of other things) Schema can be autogenerated through Next.js & Sanity Improved Schema management

Finding 1% from Better Design, UI & UX HEADLESS / MACH / COMPOSABLE

Design freedom for better UX

Design freedom for better UX

Design freedom for better UX

Design freedom for better UX

Design freedom for better UX

Design freedom for better UX

Flexibility through UI​ Developers are empowered to create better performing front-ends improving user experience, structure, accessibility, site speed and tech SEO. Sneakers Kids Women Collections Men

Flexibility through UI​ Developers are empowered to create better performing front-ends improving user experience, structure, accessibility, site speed and tech SEO. Sneakers Kids Women Collections Men

Development for better UX NAVIGATING PITFALLS HEADLESS / MACH / COMPOSABLE

Navigating the pitfalls of composable commerce Development approach changes and needs careful, and structure approach € Detailed discovery is vital for a 
 successful projecg € Rollout incrementalls € Must understand tech, implications 
 & business needb € Agile (not Agilefall / Scrumfally € Needs cross functional collaboratioi € Focus on user experience factors
 both internal and external Technology Business Needs

HEADLESS / Composable / MACH / Jamstack Where’s the 1% for you?

Find the 1% performance gains with the modern web Through the use of best in class content management Publish content more efficiently, more collaboratively and across channels more easily, reaching more people in the process, with a single source of content truth

Find the 1% performance gains with the modern web Through the use of the best front-end technology Produce lighter and more versatile websites, apps and other front-ends that create better user experiences

Find the 1% performance gains with the modern web Through development efficiency Removing bottlenecks and conflict between developers and other teams, which means you can achieve more, faster.

Find the 1% performance gains with the modern web Through the gains possible from better user experience UX has developed as an important factor for performance, as well as a visibility factor. It is poised to play an increasingly important role in the future of SEO

Find the 1% performance gains with the modern web Through a composable approach and freedom to choose the best technology Composable / headless commerce is evolving quickly, and with Shopify Hydrogen, Next.js, Centra, and CMS evolution, it is starting to become a very strong option.

Thank you for your time​ Stuart Tofts www.lemonhive.com​ Coming soon - Sitebeacon.io (sitewide CO2 & CWV tool) stuart@lemonhive.com​