Slide 1
Slide 1 text
What we Found From, the advantages, and Why
brightonSEO.com
migrated to headless
Stuart Tofts
Lemon Hive
linkedin.com/in/stuarttofts/
Slide 2
Slide 2 text
What we Found From, the advantages, and Why
brightonSEO.com
migrated to Headless
Slide 3
Slide 3 text
(Some of) The
future is
headless
Slide 4
Slide 4 text
Monolithic vs headless architecture
content
database api
code
+
front-end templated
web server
GraphQL
or
Rest API
Headless architecture
CMS
front-end
Clients
content
web server database
database code + plugins front-end
templated + css
CMS
Client
Monolith
Slide 5
Slide 5 text
What is headless?
A headless architecture decouples the CMS from the presentation layer. This
frees each to be the very best at its thing, so the CMS is free to focus on
content and content management, and the front-end on presenting that
content and enhancing user experience.
headless
CMS
API
presentation layer
admin
AI
commerce
personalization
analytics
Slide 6
Slide 6 text
Who is headless right for?
Headless isn’t right for everything but we’re seeing improvements for
advanced integration requirements,
including ERP, CRM, and other
third-party services
Slide 7
Slide 7 text
Who is headless right for?
Headless isn’t right for everything but we’re seeing improvements for
complex web management
situations - continual evolution,
multiple editors, entities, reusable
modules
Slide 8
Slide 8 text
Who is headless right for?
Headless isn’t right for everything but we’re seeing improvements for
centralized and complex content
management for various front-
ends, whether web, mobile or
others
Slide 9
Slide 9 text
Who is headless right for?
Headless isn’t right for everything but we’re seeing improvements for
businesses operating in
competitive markets where
exceptional user experience really
matters
Slide 10
Slide 10 text
Who is headless right for?
Headless isn’t right for everything but we’re seeing improvements for
when monolithic CMSes become
limiting in terms of scalability and
adaptability
Slide 11
Slide 11 text
Why
brightonSEO
migrated to Headless
Slide 12
Slide 12 text
Build with monolithic WordPress
The site was getting old
Plugins, plugins & more plugins!
(50+)
Restricting growth
Laborious and inefficient site
management
limited capacity for growth
The previous site
Slide 13
Slide 13 text
Previous site
Challenging
user experience
Slide 14
Slide 14 text
Navigating the website was difficult for users.
Unintuitive site navigation
Unintuitive site navigation
It's hard to understand
where this is navigating to
It's hard to understand
where this is navigating to
Slide 15
Slide 15 text
The most vital content lacked structure, was cluttered
and was challenging to find.
This Approach Doesn't Effectively
Serve the Content's Purpose
This Approach Doesn't Effectively
Serve the Content's Purpose
Slide 16
Slide 16 text
Inconsistency of fonts and design patterns.
Section sizing negatively impacted
the user experience.
Inconsistent use of font
Inconsistent use of font
Multiple fonts cluttered in a single
webpage.
Text is difficult to read
Text is difficult to read
Slide 17
Slide 17 text
Previous site
performance
issues
Slide 18
Slide 18 text
Poor PageSpeed negatively affected the overall user experience.
Previous site performance
Slide 19
Slide 19 text
Use of 50+ 3rd party
plugins, custom scripts
& bloated code
resulted in
performance issues for
the site.
Previous site performance
Code bloat:
Slide 20
Slide 20 text
SEO difficulties:
Previous site performance
Absence of meta tags on pages
More than 100 internal redirects
Absence of image alt tags
Abundance of unused javascript
Sluggish page load time
Slide 21
Slide 21 text
Previous site
challenges with
site management
Slide 22
Slide 22 text
Plugin overload
Juggling a multitude of
plugins for a single task
introduced complexity and
operational challenges.
Challenging site
management
Slide 23
Slide 23 text
Challenging site management
Redundant content management:
Managing content from one event to the next was both repetitive
and time-consuming.
It's hard to understand
where it's navigating.
It's hard to understand
where it's navigating.
Slide 24
Slide 24 text
Media content limitations
Lack of media content
reusability and image
optimization capabilities
hindered performance &
efficiency.
Challenging site management
Slide 25
Slide 25 text
What was the thinking behind
Headless
Slide 26
Slide 26 text
Why headless stats
According to an article by Storyblok
83% reported a general improvement
of companies reported that switching to a headless CMS
improved time, budget, productivity, meeting their KPIs,
and revenue/growth.
Slide 27
Slide 27 text
Why headless stats
According to an article by Gitnux - link
25% faster switching
Headless commerce platforms enable businesses to
switch technologies 25% faster than their traditional
counterparts.
Slide 28
Slide 28 text
Why headless stats
According to an article by Gitnux
60% of major retailers switching
60% of major retailers in North America are predicted to
adopt a headless platform by 2025.
Slide 29
Slide 29 text
Why headless stats
According to an article by Gitnux
24% more conversions
Companies utilizing headless commerce see an average
24% increase in revenue.
Slide 30
Slide 30 text
The solution,
for now and for
the future
Slide 31
Slide 31 text
New site technology
Slide 32
Slide 32 text
Content treated as data
Better content editing experience
Multiple Workspaces
Superior developer experience
Sanity, headless CMS
Slide 33
Slide 33 text
brightonseo.com
brightonseo.com
Superior developer experience
Flexible and dynamic rendering
options
Clean and mature documentation
Great potential for improved
visibility in Search Engines
Next.js, website front-end
Slide 34
Slide 34 text
Vercel – hosting (Next.js)
Fast and smooth deployment
User-friendly interface
Easy integration with the backend
CMS
Real-time collaboration and preview
features
Cool future friendly features (edge
functions, analytics, AI integrations)
Slide 35
Slide 35 text
Figma, design
Slide 36
Slide 36 text
What
Headless Meant
we could Do
Slide 37
Slide 37 text
Better
Content
management
Slide 38
Slide 38 text
Streamlined event handling.
Various entity types exist
and we've established an
efficient structure for
managing these directly
from Sanity Studio.
Content is treated as data
Slide 39
Slide 39 text
Events, people, speakers,
sessions, talks, and more
are now organized as
structured data in the
backend.
This improves content
management, efficiency
and content integrity
Nested data organization
Slide 40
Slide 40 text
The entity approach ensures content integrity and eradicates redundancy.
Structured data for content integrity
Speaker
Session
Talks
Sponsors
Event
Slide 41
Slide 41 text
Efficiency improvements
Create entities
in sanity
Slide 42
Slide 42 text
Efficiency improvements
Create entities
in sanity
Slide 43
Slide 43 text
Efficiency improvements
Auto generate
talk list page
Auto generate
people list page
Auto generate
talk detail page
Auto generate
people detail page
Create entities
in sanity
Slide 44
Slide 44 text
Front-end
freedom
Slide 45
Slide 45 text
Quick and easy deployment
We rolled out the
San Diego site in
less than 2 days
Slide 46
Slide 46 text
Flexibility through UI
Developers empowered to create better performing front-ends
improving user experience, structure, site speed and tech SEO.
Speaker
Session
Talks
Event
Sponsors
Speaker
Activities
Talks
Track
Sponsors
Slide 47
Slide 47 text
Multiple front-ends
Ability to handle multiple front-ends using the same content.
Brighton USA
BrightonSEO
Slide 48
Slide 48 text
Better
performance
and Tech seo
Slide 49
Slide 49 text
Improved PageSpeed & CWV factors
And most importantly the impact of this on UX.
Previous site
New site
Slide 50
Slide 50 text
Streamlined SEO Management
All essential SEO aspects are manageable with ease through the CMS.
Along side this we customised SEO factors for brightonSEO as required.
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 51
Slide 51 text
Auto image optimisation
Optimisation from Next.js
and Vercel:
On-demand
Optimization
Lazy Loaded Images
Avoids CLS
Slide 52
Slide 52 text
Auto image optimisation
Optimisation from Sanity
Sanity allows setting
image hotspots,
ensuring optimal
rendering across
diverse devices.
Hotspot selected
Hotspot selected
Cropping
option
Cropping
option
Using a single image for diverse
front-end renderings.
Slide 53
Slide 53 text
Auto image alt tags
Alt tags can be
autogenerated
through Next.js
& Sanity
Auto generated alt tag
Auto generated alt tag
Improved accessibility
Slide 54
Slide 54 text
The
Findings
Slide 55
Slide 55 text
brightonseo.com
brightonseo.com
brightonseo.com
brightonseo.com
The site
Slide 56
Slide 56 text
What did we find
Internal user experience is
incredibly important, and so much
better with headless
Slide 57
Slide 57 text
What we found
PageSpeed and other CWV
factors are essential, but use them
from a UX point of view, not just a
number
Slide 58
Slide 58 text
What we found
Developer experience matters -
and it’s more fun when you can
actually achieve things with the
freedom of headless
Slide 59
Slide 59 text
What we found
The technology is moving quickly.
Next.js 13.4 (e.g. live front-end
editing), Sanity v3, and more
Slide 60
Slide 60 text
What we found
Now’s a good time to start looking
into headless, and how it can help
Slide 61
Slide 61 text
Kelvin Newman - brightonSEO
“We'd outgrown our WordPress setup as our events have grown and
become more complex. Moving to a modern, future-proof headless
solution using Sanity and Next.js has facilitated our growth, which
includes rapidly launching a website for our first US conference.
We have exciting plans for future development, which includes
integrating more features such as additional schema markup,
allowing attendees to build personalised schedules and automating
some of our processes.”
Slide 62
Slide 62 text
Where to find us
www.lemonhive.com
We also have a stand this year #22
22
5x3
22
5x3
4
6x4
7
Cafe
43
21
21
41
42 39
35 34
37
38
33
55
16
24
14
20 19 17
18
5X3
40
6
Slide 63
Slide 63 text
Thank you
for your time
www.lemonhive.com
sitebeacon.io (in beta) outstaffing.io (soon)
[email protected]
Slide 64
Slide 64 text
Kelvin Newman - brightonSEO
“We'd outgrown our WordPress setup as our events have grown and
become more complex. Moving to a modern, future-proof headless
solution using Sanity and Next.js has facilitated our growth, which
includes rapidly launching a website for our first US conference.
We have exciting plans for future development, which includes
integrating more features such as additional schema markup,
allowing attendees to build personalised schedules and automating
some of our processes.”