Inside the Engine: Code Optimization with Adobe Experience Manager Sites Optimizer

Good afternoon. My name is Dec Reyes. If I didn’t mention it before, I am the principal customer success advocate for Site Optimizer here at Adobe. I’m Canadian. I’m from Canada. So I have to forewarn you, I might say sorry a lot, so sorry about that. Thank you for joining me today as we dive into a topic that’s close to everyone’s, every developer’s heart, right? It’s code optimization. So we know that even small bits of code can slow pages, right, and hurt core web vitals. Site Optimizer spots these issues early, auto suggest fixes and then connect you to GitHub and Jira for auto optimization, right? So you go from detection to deployment without any friction. So we’re going to focus on this session on the hows. We’re going to show how a site is onboarded, how issues are detected, how fixes are generated, how they fit into the developer workflow, as well as like how do we validate them quickly. What does it matter, right? So for core web vitals like high LCP and high CLS, they just, you know, not just hurt performance, but also they affect visibility. When we ship clean, efficient code, we make sure that the page load faster, the layout stays stable, scores improve across the board, right? The payoff really is you get better SEO rankings, you get smoother user experiences that keep people on your page instead of bouncing, right? So you can see here, this is really the North Star of core web vitals scores, right? 100 across the board, a clear target that drives better SEO, more traffic and happier user. Also very important to note, this was mentioned to me by one of the engineers, that when core web vitals drop, it takes Google actually weeks to recover. So even after fixes, so you want to make sure that you spot those core web vitals score issues early enough, right? So that’s what SiteOptimizer would do for you. Yes, right there. So just a quick overview, AM SiteOptimizer is an AI power tool that continuously scan your rendered live pages and it finds issues across performance, SEO, accessibility, security and content optimization opportunities. It would then do an auto suggest and then auto apply, right? I mentioned this morning that SiteOptimizer uses a very basic framework. It’s auto identify. So for this particular use case, it’s looking for inefficient code and performance issues, right? It auto suggests, so AI agents analyzes the code and makes some recommendation to fix the issue and then auto optimize. Really test this, fix this instantly and then deploy them directly within the application. Alright, so a lot of things going on here. So when the site is onboarded into AM SiteOptimizer, the agent, the SiteOptimizer agent runs a full audit, scanning for core web vitals, SEO, accessibility and so much more. So in this particular case, the audit is surfacing low core web vitals scores as an opportunity pointing to performance issue, right? So the audit doesn’t stop there. So it also digs into the root cause. So the SiteOptimizer highlights those high traffic pages with performance issues and then it also analyzes, right? So it simulates loads, collect metrics and then review the source code in GitHub to make sure that we’re really surfacing proper opportunities. And then when the opportunity is identified, number one here, the system moves from audit to action, right? So it fetches the relevant project source code tied to the issue and then number two, the optimization agent would analyze the code pinpointing performance bottlenecks such as blocking scripts, inefficient CSS and oversized assets. Within this number two steps here, it’s also important to note that SiteOptimizer is also doing a playwright monkey patching. So it’s intercepting the JS and CSS code and injecting the fixes, the suggestion that makes sure that those fixes are actually indeed validated and confirmed that is going to help your site. Once the suggestion is generated, it’s generated asynchronously so your users don’t have to wait for the audit to run completely, the SiteOptimizer UI will pick up the suggestion as an actionable fix. So we talked about this this morning, right? So once a patch is generated, it shows up in the SiteOptimizer UI as an actionable fix. For developers, most folks in the room here, you have several ways to move this forward. So you can Slack it, so basically quickly collaborate with teammates, discuss the change, align before taking action. You’re going to attach it to a Jira ticket so it fits neatly into your sprint planning and backlog tracking. You can download the patch and apply it manually for direct control in a local environment or you can create a pull request in GitHub to integrate the fix right in the version control in your CI CD pipeline. So let me show you a very quick demo here. We’re going to change it up a little bit because this morning we showed you a core web vitals issue that generated a GitHub issue. Like I mentioned before, SiteOptimizer is looking at different opportunities, right? And one of the opportunities we’re looking for is accessibility issues. So right here we have a accessibility opportunity. So this is a form specific, so something within the form needs to be fixed from an accessibility standard. So let’s take a look at the view. So we’ve identified the page and now we have the detailed AI suggestions, right? So you can see the page, you can see the issue. It has a description very, very specifically on what that accessibility issue is, the element location, as well as how to solve it. But the meat and potato of this suggestion is really that code changes, right? That very prescriptive code level recommendation in order to fix the issue as you can see here. And then we mentioned the different option to deploy it. Slack, Jira, download the patch and then you have GitHub. So what we’re going to do is we’re going to go back, highlight that guy and then we’re going to go create the pull request. So what it’s going to do is going to create the issue. So it created the issue and then if we go back to the opportunity and we scroll down, it also created the PR. So really from here, your development team have a multitude of options, right? You can take a look at the recommendation, the PR request and take a look at the recommendation to make sure it’s aligned or you can also deploy the feature branch that was created into a lower level environment for testing.

All right, so we can go back to the slides. So this is just a good visual representation of the standard development workflow, right? So we’ve shown you how SiteOptimizer creates a GitHub issue which essentially bridges the optimization fix with your development workflow. We also showed you how it can generate a PR. So from here, you can just go through your normal development review, approval and then finally deployment. So once the pull request is reviewed, approved and merged into your main branch, the optimization now isn’t just a theoretical fix, right? It is ready to go live. So from here, your team can then rerun the CI CD pipeline in Cloud Manager and then it will just go through the usual build, test and deploy stages, ensuring quality gates and checks are respected along the way and then when the pipeline completes, the updated code is now deployed to your AAM cloud service and the cycle is closed, right? The site is now live with the optimized fix in place. So after deployment, the site is rechecked against the Core Web Vitals scores. The LCP that was originally flagged now shows an improved score, right? Confirming that the optimization worked. So essentially demonstrating the end-to-end SiteOptimizer workflow from detection to fix to measurable performance gains. I just wanted to touch a little bit about the developer reality, right? So us developers, we’re often constant far-fighting. When we’re urgent issue, pull focus from planned work and over time, technical debt pops up with each releases, manual debugging, burns hours that could be spent building cooler features. So with SiteOptimizer, I like using this in the demo, we get you as close to the finish line as possible, right? You get a head start. So the AI handles the patch creation, so we spend less time debugging. We have choices as we saw how to deploy it and every fix, we’re in complete control, right? We go through the normal review and pipeline deployment, so we are absolutely in control. So the payoff, faster fixes, stronger SEO, better Core Web Vitals and a smoother user experience. So the moral really is you optimize smarter, you build faster and you deliver better, right? So SiteOptimizer takes the guesswork out of performance, it finds the issues, generate actionable fixes and then plug it into the workflow that we already trust and use every day. That’s it for me. I hope that’s enjoyable and enjoy the rest of your DevLive afternoon. Thank you.