Stuart_Tofts_LH_brightonSEO_Headless_Web_Build_sm.pdf

Transcript

1. What we Found From, the advantages, and Why brightonSEO.com migrated to headless​ Stuart Tofts Lemon Hive linkedin.com/in/stuarttofts/
2. What we Found From, the advantages, and Why brightonSEO.com migrated to Headless​
3. (Some of) The future is headless ​
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
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
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
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
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
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
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
11. Why brightonSEO migrated to Headless​
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​
13. Previous site ​Challenging user experience​
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
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
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
17. Previous site ​performance issues​
18. Poor PageSpeed negatively affected the overall user experience. Previous site performance​
19. Use of 50+ 3rd party plugins, custom scripts & bloated code resulted in performance issues for the site. Previous site performance​ Code bloat:
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
21. Previous site ​challenges with site management​
22. Plugin overload Juggling a multitude of plugins for a single task introduced complexity and operational challenges. Challenging site management​
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.
24. Media content limitations Lack of media content reusability and image optimization capabilities hindered performance & efficiency. ​ Challenging site management​
25. What was the thinking behind Headless​
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.
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.
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.​
29. Why headless stats​ According to an article by Gitnux​ 24% more conversions Companies utilizing headless commerce see an average 24% increase in revenue.
30. The solution, for now and for the future​
31. New site technology​
32. Content treated as data Better content editing experience Multiple Workspaces Superior developer experience Sanity, headless CMS​
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​
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)
35. Figma, design​
36. What Headless Meant we could Do​
37. Better Content management
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​ ​
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​ ​
40. The entity approach ensures content integrity and eradicates redundancy. ​ Structured data for content integrity Speaker Session Talks Sponsors Event
41. Efficiency improvements Create entities in sanity
42. Efficiency improvements Create entities in sanity
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
44. Front-end freedom​
45. Quick and easy deployment We rolled out the San Diego site in less than 2 days​
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
47. Multiple front-ends Ability to handle multiple front-ends using the same content. ​ Brighton USA BrightonSEO
48. Better performance and Tech seo
49. Improved PageSpeed & CWV factors​ And most importantly the impact of this on UX. Previous site New site
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
51. Auto image optimisation Optimisation from Next.js and Vercel:​ On-demand Optimization​ Lazy Loaded Images Avoids CLS
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.
53. Auto image alt tags Alt tags can be autogenerated through Next.js & Sanity Auto generated alt tag Auto generated alt tag Improved accessibility
54. The Findings
55. brightonseo.com brightonseo.com brightonseo.com brightonseo.com The site
56. What did we find Internal user experience is incredibly important, and so much better with headless
57. What we found PageSpeed and other CWV factors are essential, but use them from a UX point of view, not just a number
58. What we found Developer experience matters - and it’s more fun when you can actually achieve things with the freedom of headless
59. What we found The technology is moving quickly. Next.js 13.4 (e.g. live front-end editing), Sanity v3, and more
60. What we found Now’s a good time to start looking into headless, and how it can help
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.”
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
63. Thank you for your time​ www.lemonhive.com​ sitebeacon.io (in beta) outstaffing.io (soon)​ stuart@lemonhive.com​
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.”