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