Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Monolith vs Headless

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

Understanding Modern Commerce HEADLESS / MACH / COMPOSABLE

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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”

Slide 30

Slide 30 text

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 [...]

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Finding 1% from Content Management HEADLESS / MACH / COMPOSABLE

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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​ ​

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

) 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Design freedom for better UX

Slide 46

Slide 46 text

Design freedom for better UX

Slide 47

Slide 47 text

Design freedom for better UX

Slide 48

Slide 48 text

Design freedom for better UX

Slide 49

Slide 49 text

Design freedom for better UX

Slide 50

Slide 50 text

Design freedom for better UX

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Development for better UX NAVIGATING PITFALLS HEADLESS / MACH / COMPOSABLE

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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