Top 10 Tips to Speed Up Your Adobe Experience Manager Site
summary
A React headless site moves from a 68 Lighthouse score to 98 Lighthouse score by switching GraphQL POSTs to persisted GraphQL queries behind an app proxy (removing a 459 ms CORS preflight), replacing Google Fonts JS with hosted CSS and preloads, lazy-loading below‑the‑fold images and using Adobe Dynamic Media / Adobe Dynamic Media smart imaging for WebP, loading marketing scripts async, removing unused jQuery, componentizing CSS, setting proper Cache‑Control and removing Vary: User‑Agent, and ensuring HTTP/2 delivery.
AI-written summary · about
chapters (14)
- 0:00Introduction and speakers
- 9:39Live performance demo begins
- 31:08Top 10 tips overview
- 32:15Tip 1: Clean front-end code
- 33:02Tip 2: Optimize images
- 34:16Tip 3: Use persisted GraphQL
- 35:46Tip 4: Load JS asynchronously
- 36:30Tip 5: Efficient image loading
- 37:17Tip 6: Optimize font loading
- 40:10Tip 7: Defer non-critical CSS
- 40:55Tip 8: Remove user agent vary
- 41:16Tip 9: Cache assets properly
- 42:02Tip 10: Use HTTP/2
- 43:06Recap and call to action
related talks
36mPerformance tuning in EC site with GraphQL
27mOptimizing the Critical Rendering Path in React
32mHeadless Adobe Experience Manager Sites
01h 00mBuilding next gen composable services with Experience Manager
32mImproving Lighthouse score for media-heavy React applications
46mSpeed Matters: Client Side Performance Improvement Tips & Tricks
46mThe Past, Present, and Future of Adobe Experience Manager
40mNon-trivial optimization techniques in Angular