Headless/composable website development brightonSEO 2024

Transcript

2. Headless / Composable Development for better Performance HEADLESS / MACH / COMPOSABLE
3. 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
4. It’s important we are Finding the 1% gains For better results
5. 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.
6. 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
7. 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
8. 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
9. Development for better UX Headless in Simple Terms HEADLESS / MACH / COMPOSABLE
10. 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
11. Monolith vs Headless
12. 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
13. 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
14. 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
15. 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
16. Headless to composable Composable is an evolution of headless / decoupled architecture
17. 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.
18. Headless or MACH Content API AI commerce personalization analytics presentation layer admin presentation layer API Headless CMS Commerce Platform API
19. 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.
20. Understanding Modern Commerce HEADLESS / MACH / COMPOSABLE
21. 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
22. 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
23. Headless front-end technologies Front-end technologies are developing at pace, empowering more engaging user experiences
24. Headless content management systems There are some amazing CMSes emerging / evolving, enabling advanced content management, collaboration and publising
25. A move towards headless/composable commerce We’re seeing brands moving towards headless / composable
26. UX Is Very important in the eyes of GOOGLE & Others Lots of Tools and Data/Case studies
27. Google is pushing for better UX We all know that Google is pushing for UX improvements
28. 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
29. 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”
30. 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 [...]
31. Development for better UX Headless Has Powers! HEADLESS / MACH / COMPOSABLE
32. 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.
33. Finding 1% from Content Management HEADLESS / MACH / COMPOSABLE
34. Content models break your content down into various structured data formats and blocks which can be optimized individually. Content is treated as structured data​ ​
35. 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​ ​
36. The entity approach ensures content integrity and eradicates redundancy. ​ Structured data for content integrity Speaker Session Talks Sponsors Event
37. Finding 1% from performance and Tech seo HEADLESS / MACH / COMPOSABLE
38. 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
39. ) 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
40. 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
41. 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.
42. 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
43. Autogenerated Schema markup (and plenty of other things) Schema can be autogenerated through Next.js & Sanity Improved Schema management
44. Finding 1% from Better Design, UI & UX HEADLESS / MACH / COMPOSABLE
45. Design freedom for better UX
46. Design freedom for better UX
47. Design freedom for better UX
48. Design freedom for better UX
49. Design freedom for better UX
50. Design freedom for better UX
51. 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
52. 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
53. Development for better UX NAVIGATING PITFALLS HEADLESS / MACH / COMPOSABLE
54. 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
55. HEADLESS / Composable / MACH / Jamstack Where’s the 1% for you?
56. 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
57. 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
58. 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.
59. 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
60. 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.
61. Thank you for your time​ Stuart Tofts www.lemonhive.com​ Coming soon - Sitebeacon.io (sitewide CO2 & CWV tool) stuart@lemonhive.com​