Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stuart_Tofts_LH_brightonSEO_Headless_Web_Build_sm.pdf

 Stuart_Tofts_LH_brightonSEO_Headless_Web_Build_sm.pdf

Stuart Tofts - Lemon Hive

September 17, 2023
Tweet

Other Decks in Marketing & SEO

Transcript

  1. What we Found From, the advantages, and Why
    brightonSEO.com
    migrated to headless​
    Stuart Tofts
    Lemon Hive
    linkedin.com/in/stuarttofts/

    View full-size slide

  2. What we Found From, the advantages, and Why
    brightonSEO.com
    migrated to Headless​

    View full-size slide

  3. (Some of) The


    future is

    headless ​

    View full-size slide

  4. 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

    View full-size slide

  5. 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

    View full-size slide

  6. 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

    View full-size slide

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

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. Why
    brightonSEO
    migrated to Headless​

    View full-size slide

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

    View full-size slide

  13. Previous site

    ​Challenging

    user experience​

    View full-size slide

  14. 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

    View full-size slide

  15. 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

    View full-size slide

  16. 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

    View full-size slide

  17. Previous site

    ​performance
    issues​

    View full-size slide

  18. Poor PageSpeed negatively affected the overall user experience.
    Previous site performance​

    View full-size slide

  19. Use of 50+ 3rd party
    plugins, custom scripts
    & bloated code
    resulted in
    performance issues for
    the site.
    Previous site performance​
    Code bloat:

    View full-size slide

  20. 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

    View full-size slide

  21. Previous site

    ​challenges with

    site management​

    View full-size slide

  22. Plugin overload

    Juggling a multitude of
    plugins for a single task
    introduced complexity and
    operational challenges.
    Challenging site
    management​

    View full-size slide

  23. 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.

    View full-size slide

  24. Media content limitations

    Lack of media content
    reusability and image
    optimization capabilities
    hindered performance &
    efficiency. ​
    Challenging site management​

    View full-size slide

  25. What was the thinking behind
    Headless​

    View full-size slide

  26. 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.

    View full-size slide

  27. 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.

    View full-size slide

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

    View full-size slide

  29. Why headless stats​
    According to an article by Gitnux​
    24% more conversions
    Companies utilizing headless commerce see an average
    24% increase in revenue.

    View full-size slide

  30. The solution,

    for now and for
    the future​

    View full-size slide

  31. New site technology​

    View full-size slide

  32. Content treated as data
    Better content editing experience
    Multiple Workspaces
    Superior developer experience
    Sanity, headless CMS​

    View full-size slide

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

    View full-size slide

  34. 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)

    View full-size slide

  35. Figma, design​

    View full-size slide

  36. What
    Headless Meant

    we could Do​

    View full-size slide

  37. Better
    Content

    management

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Efficiency improvements
    Create entities

    in sanity

    View full-size slide

  42. Efficiency improvements
    Create entities

    in sanity

    View full-size slide

  43. 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

    View full-size slide

  44. Front-end
    freedom​

    View full-size slide

  45. Quick and easy deployment
    We rolled out the
    San Diego site in
    less than 2 days​

    View full-size slide

  46. 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

    View full-size slide

  47. Multiple front-ends
    Ability to handle multiple front-ends using the same content. ​
    Brighton USA
    BrightonSEO

    View full-size slide

  48. Better
    performance

    and Tech seo

    View full-size slide

  49. Improved PageSpeed & CWV factors​
    And most importantly the impact of this on UX.
    Previous site
    New site

    View full-size slide

  50. 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

    View full-size slide

  51. Auto image optimisation
    Optimisation from Next.js

    and Vercel:​
    On-demand

    Optimization​
    Lazy Loaded Images
    Avoids CLS

    View full-size slide

  52. 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.

    View full-size slide

  53. Auto image alt tags
    Alt tags can be

    autogenerated

    through Next.js

    & Sanity
    Auto generated alt tag
    Auto generated alt tag
    Improved accessibility

    View full-size slide

  54. The

    Findings

    View full-size slide

  55. brightonseo.com
    brightonseo.com
    brightonseo.com
    brightonseo.com
    The site

    View full-size slide

  56. What did we find
    Internal user experience is
    incredibly important, and so much
    better with headless

    View full-size slide

  57. What we found
    PageSpeed and other CWV
    factors are essential, but use them
    from a UX point of view, not just a
    number

    View full-size slide

  58. What we found
    Developer experience matters -
    and it’s more fun when you can
    actually achieve things with the
    freedom of headless

    View full-size slide

  59. What we found
    The technology is moving quickly.
    Next.js 13.4 (e.g. live front-end
    editing), Sanity v3, and more

    View full-size slide

  60. What we found
    Now’s a good time to start looking
    into headless, and how it can help

    View full-size slide

  61. 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.”

    View full-size slide

  62. 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

    View full-size slide

  63. Thank you

    for your time​
    www.lemonhive.com​
    sitebeacon.io (in beta) outstaffing.io (soon)​
    [email protected]

    View full-size slide

  64. 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.”

    View full-size slide