Top 10 Tips to Speed Up Your Adobe Experience Manager Site

Transcript

So thank you for joining and welcome to our talk top 10 tips to speed up your site My name is Tobias I’m engineering manager at Adobe and in the industry since more than 20 years working with front-end back-end and cloud technologies With me is my dear colleague Francisco Hello everybody. My name is Francisco chicharos and Working in the software industry for 20 years the last nine of them Assigned a VM to me my current role at Adobe is software engineer So we as an I we are both part of the inside steam and our focus is performance in the context of personalized web experiences and experimentation Today we are happy to have with us Mary Blanchett from our team answering your questions By end of the session you have a good understanding about why speed matters and Why the industry is talking in acronyms like LCP FID and CLS and how it relates to each other You will learn about our top recommendations to speed up your site and you’re going to enjoy a live demo With all the challenges of a live demo. We even made sure to depend on an external non-dendigim inistic dependency for maximum risk and of course in order to follow the mantra of the developer live conference A lot of the items on our top 10 list apply to headless scenarios but before we start I’d like to clarify a bit about terminology and Give an holistic view on the improvement areas and give insights on how we tested the speed in the context of this Presentation so that we are all on the same page Okay, so Why do fast websites matter in the first place? It’s all about the first impression for a visitor and Visitors don’t want to wait according to research about 50% of people don’t wait for more than two seconds for a webpage to load and Then just move on and in the worst case might not return Another important point is visual stability It’s simply distracting if the layout of the viewport changes multiple times The layout can change because images take longer to load while you’re already focused on a text paragraph And in the middle of reading and suddenly the page starts to jump or scroll without your explicit interaction that impacts the overall performance of your site and Then there’s dwell time It’s the time a visitor spends on the web page and that’s crucial for the success of a page It’s crucial for the potential conversion rate in commerce and it’s crucial for SEO. So the search engine optimization search engines know exactly when a visitor clicks on a search result and When the visitor comes back to the search result the Delta of the two is the dwell time in this context The more a visitor spends on your page before going back to the search engine results The more is your page relevant to the search term? So here’s one example from Vodafone where a B testing revealed that a Performant web page can increase sales by 8% How did they test they took an existing web page? Duplicated it and improve the performance of just one of the pages following core web vitals and I will explain the term in a bit Then they split the traffic to both pages by 50 and measured success rate The page that followed core web vitals has been the clear winner so Fast sites matter and the business impact of fast sites is real and measurable Coming to core web vitals It’s a term coined by Google and shall provide guidance to site owners and help to increase the overall performance of your site even if you’re not a performance guru, so Simply following core web vitals will make your site more attractive to users and increase the conversion rate The following key factors to have the most impact on your site’s performance. So there’s LCD The largest contentful paint which measures how fast the most critical content of a page loads then F ID first input delay which measures interaction delay and CLS cumulative layout shift what I mentioned before which mentions layout stability or How smooth a page load is? Okay, so we learned that page speed and page performance are an essential part of the user experience now Let’s have an holistic view on the areas where you as a developer can influence and increase web performance and speed Let’s start from the left of the client This is the browser where your site is running It can be a mobile app or IT app that is running in your fridge or digital signage device It has the responsibility to load all content and assets and to render the experience Usually the client offers local caching and database capabilities, which is by far the fastest delivery method Especially if the experience doesn’t require a network connection in The middle between client and origin is the edge a globally distributed network of service preferably very close to the client or your database in order to reduce latency and is Highly optimized to deliver cache content and assets fast. You will hear the term CDN interchangeably Nowadays edge providers allow you to even execute code which is usually referred to as edge compute Last but not least on the right side the origin what I usually refer to as the backend server amhead full speak and publish is used for data and content hosting in Am head less speak and publish is just used for hosting the data It’s the place where the single source of truth of data and content is it’s usually the computational heavy component in the big picture We Know that you want to choose the delivery method depending on your use case Performance is not a tool and you always need to the freedom to choose the option There are good reasons why you want to deliver a page or fraction of the page from origin edge Or from the cache and the client for the rest of the presentation We won’t dig deeper into the use cases, but instead focus on the practical steps to speed up your site Okay, so now we have a holistic view on the areas where you can improve performance But before we start with the demo, let’s clarify how we test and measure for the purpose of this presentation we used page speed insights a Convenient web tool to measure core web vitals this tool mixes real user and simulated lab data to measure page speed and performance and Returns a score where 100 is the best score you can have That score will change every time you repeat the test because it’s based on real user data which has been collected from the past well 30 days and also, it uses multiple devices and clients and Network connection methods and hence the measurement is non deterministic in Your daily development routines. You probably are more used to the deterministic testing methods in order to compare the results The deterministic version of corporate vitals is lighthouse Lighthouse does not take real user data into account. So here’s a rule of thumb for testing first test locally with lighthouse in your browser dev tools Second before you enable your feature to the visitor Deploy your page into production and test again with lighthouse in order to see the effect of DNS Caching and network aspects your first contentful paint will definitely change probably negatively And then you have to improve a few things After enabling the feature to the visitor start measuring the visitors experience How fast can a visitor interact when is the first contentful paid for for visitor from a completely different region What is the interaction to next paint? INP in core web vitals speak This is called real user monitoring and you will again see how the score goes down and you have to improve things So this is why we have this presentation today Let’s focus on the top 10 things you can improve in order to see a positive effect on the score. I Think we should be good now with terminology the reasons why we are here and how we test with that Let’s start with the demo Thank you very much to us for introducing the topic for the clear explanation and for highlighting the importance of performance in modern websites Now, let’s go with the demo But you know Tobias it’s already a bit late in the evening in Europe and I was thinking out how to make the demo It’s more entertaining to keep the audience attentive Yeah, nice idea what we have in mind Mmm, I propose we play a little game, you know that I’m a big fan of the movie back to the future So what if we do? It were a real-life situation that happens in two weeks from now We will be two different people for example two friends that have a small agency specialize in a implementations These two friends were attending this very same session as part of the audience and they would apply what they learned in this session They top 10 tips to improve the performance of a website Back to the future. Okay, sounds cool to me. Let’s give it a try Well, I hope you all hear that so we asked the wire said let’s give it a try and he’s the man I love it. Now. This is a complete disaster. It’s not just my fault so let’s prepare our trip to the future, so Let’s set our destination time to two weeks from now And accelerate to 88 miles per hour May I ask why 88 miles per hour Come on, you haven’t seen the would you haven’t watched the movie? It’s a quote Doc says now if my calculations are correct when this baby hits 88 miles per hour You are going to see some and I think I will stop here and if you still don’t know how it ends better Google for it So we arrived to our destination time and our destination characters Okay, let me put my demo head on hey Francisco Hi Tobias, good morning. How are you doing today? Hey I got a call yesterday from a customer asking to take a look at their website because users say it’s too slow The website is implemented as a react app consuming content from a.m. In a headless manner Okay, let’s take a look I think is the one that you send me by email this morning, right? Yeah, so I have it here Sounds familiar somehow this website Okay, I took the advantage of running the performance check and you see it is not so good. Actually. It is pretty slow. Oh Okay, so what do we do? Well, you know we are actually very lucky because do you remember that few weeks ago there was a super cool session about improving website performance in the Adobe developers live conference. Oh, yes You mean the top 10 tips to speed up your site the one presented by that guy with a Spanish accent and the German dude Exactly. The other one exactly that one funny German guy and it’s fine. So they probably were presenting from Majorca or somewhere nearby So we can use the top 10 they described in the session and try to improve the performance for its customer That’s a great idea Um Actually, I remember images were a hot topic. Can you check what kind of images are used in a website? sure So we have them here. You see they are actually JPEGs and they are coming directly from a.m Yeah if I remember correctly they It is better to use next generation formats and serve them from a CD and instead of from from a and other Okay, well actually the customer told me they have Adobe dynamic media with smart imaging so they could just Use it. No, that’s great. Of course. That’s perfect. Perfect fit for this. So let’s try let’s look into the code and I think the images should be loaded somewhere here Okay Yeah, you see here, okay, they are getting the image URL and the image URL is getting from this method So, let’s check what is in here you see image URL when they actually already have the method to deliver from dynamic media So let’s give it a try and see how it works Replace this one by this one Done Hey, did you notice that images are not responsive and not lazy loaded this is also important. Oh, yes, you’re right This is you know, if I remember currently in the in the session they mentioned that The images that are above the fold. So the ones are pairing the initial report should be loaded With high priority or and the ones that are below the phone so not immediately visible when the user Access the website should be loaded in a lazy mode. So I think we can try that Okay, so let me see Okay in this case I think The only image that it’s actually displayed about the phone Is the first one so what we can do is we can just say that Any image that is the not the first one will be lazy loaded and the ones that are The first one will be actually loaded in an eager mode, which is the default but with high priority and now we have this To the image element And you also mentioned the responsive they are not responsible you are right so let’s add this as well So We are Okay, let’s make the code a bit nicer and Yeah, I think this is it. You also mentioned if I remember correct that the user was The customer was consuming Content from a.m. In a headless manner. So they’re probably using the graph QL API Yeah in the session they recommended to use persisted graph queries with get requests Okay, so yeah I see No, this is the call probably right? So, let’s see what comes in the response Yeah. Yeah, so this is all information coming from a.m. And this is supposed to put and Yeah, they are sending the the request payload. They are saying the whole query. This is not so good They should be using a get request With a persistent graph QL query, you know Why because get requests are casual and post request this post request is not casual by the CDN So and by the way This is going directly to a.m. And this is also not so good. It could be better because you know, this is Across the reading request. So if we will do this Really or proxy through our applications it will hit our it will not be across read and this is less expensive Than the way it is now. So let’s change that in the code Okay So persistent queries Yes, get a lot. Thank you. So this is what they are running right now. They are using the a.m Headless clients or the API provided by Adobe. That’s great, but they are calling their one query method, you know And this method is just executing the query as a possible test. So better less Comment this part of the code and we use this one You see so this one is actually executing a persistent query that is already available And Yeah, we talked about the cross-rear. So, let’s see we can get rid of that This would be somewhere here. Yeah, you see the service URL. So yeah, let’s use instead of this one the service URL Let’s the secure the query directly against our application which is already prepared for with a proxy to play And I think we can deploy Okay Deployment and testing probably takes a bit. So while we are waiting Can you explain a bit more about that cross origin request and proxy? Yeah, sure, so let me first open a new tab Okay deployment should be on the October, okay, so You see here we have this post request which is running the query right running the the graph fuel query and You see it says here. The method is post plus preflight This preflight is a preflight request that you can see here. That is sent automatically by the browser and Yeah, what it does it is just checking if This domain is allowed by the server the destination server in this case To execute the query to execute this this request so first it sends these options request checks the headers a the header says that the Request can be executed is granted then it will execute the real the real post request and you see this took Four hundred fifty nine milliseconds. So half a second, which is actually a lot in terms of performance So if we will do the request just directly Or proxy through our application. We will get rid of these four hundred fifty nine seconds Now, let’s see if we have our changes already in the page, yeah looking forward this Okay, so You see images yeah great so they are being loaded directly from dynamic media they are with P or IVIF great and What else? Yeah So this is the graph fuel query. You see it is using the persistent one and The response is the data that we need Which is great. So let’s now run The performance again and see how where we are This might take a while but yeah, let’s be a bit patient You know in the session they also mentioned something about the way JavaScript should be loaded Yeah, they said To load JavaScript asynchronously, oh wow, this is already 68 to 93. Oh, that’s actually very good So yeah, we’re talking. Yeah. Sorry to interrupt you. We were talking about the about the JavaScript I thought the way you have a speech would be loaded. So yeah First of all, I think we are making good progress here. But yes, they said to load JavaScript asynchronously when it’s possible So I asked the customer and you told me that they’re using tag manager from Adobe because they plan to use Adobe target and analytics Can you check how this script is loaded in the website? Yeah, let’s let’s check that Okay So this should be in the head of hopefully and Yeah, we have it here so you see this is loaded in a synchronous manner so Basically, what it is doing. This is just blocking the rendering of the website until this Full JavaScript is loaded. Yeah, and look nice. They’re also loading. They’re also loading jQuery, but do they actually use it because I’m not sure I I Think I would say you see jQuery. Yeah, let’s remove it okay, so let’s go back to the code and Yeah, so this is here. Okay, let’s Async Attribute so and you said that we should remove jQuery. Yeah, I agree. So let’s get rid of this okay, and Yeah You see oh they are moving the fonts here you see that They were in the session in the they said something about the font something like preload them or something like that You remember this? Yeah, they said fonts should be pre-loaded I see. Yeah, but I think it was a bit more come because There Was something about the phone display and so so you know what the problem is really is that this request here is just Expensive because it is going through a different domain well API and this is just executing some JavaScript probably So let’s do it. Let’s call it in a browser tab And see what it brings and you see this is oh, it’s a little small, right Maybe you can see it Well, I cannot to me, okay But you see this is bringing a lot of a lot of funds that actually are not needed because these guys they are just need the Latin So, you know what what we can do is we can just replace this call By the phones that we are interested in So let’s do that So with this we got rid of this first call to the phones Google API which is pretty expensive and Yeah, but you know this still is loading the fonts from Google which is fine But you know, we could speed it up if we preload them So let’s do that Okay, so We have these two links that will preload in background the funds and Then let’s make sure that we are using from this place. Well, yeah, so Basically, these two phones will be downloaded in in background and when they are ready the browser will swap the fallback font to this one That’s pretty cool So you reduce the amount of data that the web page needs to load and can we do something similar for the CSS? Okay, let’s check what we have in the CSS Oh, I See they are using that Just the CSS Containing the whole styles of the website yeah, this can also be improved, you know because Same as with the fonts and with the images actually we should allow the browser to To we should give the browser only the information that is needed to render the first part of the page and this is loading The whole website so maybe the style for the whole website. So most likely Some of them is that some of them are not needed. So let’s do something since we are using react We can change and instead of using This kind of CSS we can say that each component will use its own CSS file okay, and we just need to Find the component and import CSS Okay, so let’s do here with adventures page we will do the same with adventure details Okay, and finally with the main which is the app Okay, here we are Okay Yeah, okay, I think that’s the point I think we should be able to do that So let’s see if we can do that So let’s see if we can do that So let’s see if we can do that Okay, so let’s see if we can do that Yeah, okay, let’s deploy Okay, curious to see the lighthouse score Let me just double check if I remove them The CSS no, I didn’t okay, then we will be loading twice the styles. So now I think we are ready to deploy Okay, so this is non-deterministic so potentially the score could also be go down, right Yeah, it’s you know with this this pages fit inside stool it’s a bit tricky because Sometimes you get very weird Results and you don’t know why so it’s better to run it different times until until you get something that is reasonable Right, that’s something that is in the spectations that you had when you were running the test Yeah, let’s see To run it multiple times and then take the average Yeah, yeah, that’s a good approach That’s how we approach actually, okay. So now if If the deployment was successful we should see already our changes So same as before let’s check in the head of the page If we are loading this in an asynchronous manner, yeah, so we have it here as its dm Is loaded synchronously and we don’t have At the j query so perfect now, let’s run iphone scoring For me the magic threshold is like 95 Let’s see where we are Whoa 98 Okay Yeah, that’s that’s perfect and and but here’s the question do you think if the customer would use a different javascript framework? They will be able to reach a score of 100 Well, maybe with with react you can also you can also get it but it’s of course more complicated why because react Is client side rendered? What does it mean in this use case in this specific use case? What happens is that? The Quest the browser is doing a request for the index html page. You see this first one and this in this html is downloaded from the server and passed by the browser At some point there is a there is a script a javascript Um that contains all the logic so it is doing a new request To the server to get this javascript which is actually this main.js Now when this main.js is back in the browser it is executed and then somewhere in between in in this in this javascript, there is an instruction that says that We should execute a query to am a graphql query to get the data that we want to show and this is this one Okay, and then we get the json And finally this json has to be parsed by the browser again And transformed into html elements As you can see there are many back and forths between the browser and the server And of course if we will be using a different Grasping framework that is allows static site generation such as Next year or godspeed then What you will have is that this first very first calls in the state. Gml will actually contain all the data Including all the html elements and so on so you don’t need to download the javascript. You don’t need to do the query to To am to get the data. You don’t need to parse the json because all of this is done at build time and of course you can imagine that this is much faster than Than react or that not react itself, but plug inside render in general Hey Thank you very much. We did a huge improvement. The customer will definitely be happy Um, and I will call them and let them know Great so We are now done with the demo yeah, thank you again and I hope everyone enjoyed it And now we are going to present our top 10 tips to speed up your site some of them were part of the demo Some of them were not and with that I hand it over again to francisco Okay. So before we start with the recommendation, let me do a quick explanation. Okay for each Slide that you are going to see for each recommendation. You will see these three boxes on the right side of the slide the first one It shows if the recommendation applies to headless and or head full a implementations The second one is the area the area to which the recommendation applies being origin your am publish and with your application is hosted edge we can simplify it as the cdn and client which is user browser or the mobile application the last box Vitals metric where the recommendation has an impact. So let’s do a quick recap Lcp stands for largest content full paint and this is basically how fast critical content loads Fid stands for first input delay. So when the page is interactive And cls cumulative lie-off sieve is about visual study. And with that let’s go through the top 10 tips Okay, and sir and sure All your front-end code loaded is needed it may seem obvious But uh, this is actually a real issue in several websites. They are loading some front-end code that is not needed at all Typical examples in head full implementations of amr jQuery by accident you include a dependency to the jQuery client lead and it is loaded on the website Even if you don’t need it or contest cup You might be loading the full contest cup in all pages and maybe you just need it in two pages For instance my account page or my shopping cart or the shopping cart page Or maybe you know with the contest half There are several stores available out of the box and you just need few of them and you are loading all So all of this is selling load and impacting the performance for your website and we saw it in the demo The app was loading jQuery, but not using it Mesk one This is about serving images with the appropriate dimensions dimensions and next generation formats in this way We reduce the volume of byte transfer and improve the page load How can we implement this in am? So if you are in am65 you need to liberate leverage dynamic media with a smart imaging Or some other external service which transform, uh am images into the next generation form and hopefully service them from a cdm If you are in cloud service And you are running a headless implementation As of now, I mean today or tomorrow you need to do it the same that am65 So dynamic media and smart imaging and this is what actually what we did in the demo but very soon You will get from in the graph your response from am a url to display each image in directly from the am cloud service cdm If you are in cloud service in head full Implementation then just configure core components to use web optimized delivery This is just a checkbox in the content policy that you can see down there in the in the slide Okay load Use persisted graph ql queries since the focus of this year’s developers life is headless This is a recommendation that applies just to headless am implementations Use persisted graph ql queries why because they are faster more secure and the response can be cached and with that what? We do we improve Response time and you have seen this in the demo Talking about the cache ability of the graph ql persisted query response I guess you are all familiar with the graph iql editor in am it is available out of the box in am cloud service And as an external package in am65 service packet 13 In this editor you can create your persisted queries test them and if you If you need it, you can also tune the cache control header for each query The one that you are seeing there in the in the slide at the bottom. This is the default cache control header for Persisted queries and normally this is good enough for most of these cases Load javascript asynchronously number four when your site is loading a javascript that is not needed to render the critical content Just load it asynchronously Using the async of the fair attributes of the script tag In this way, we avoid loading resources that lock the rendering allowing the browser to focus on important stuff The usual suspects here are the martech scripts martech stands for marketing technology And includes things like tag management scripts analytics scripts or experimentation If you remember in the demo, we changed the aap data collection script from synchronous to asynchronously Number five In getting back to the images topic. It is important to load them in an efficient way This means preload or load with high importance the images that are part of initial viewport above the fold And lazy load the ones that are below default In this way, we improve the load time of the critical content of the page. How can you do it in am? well, if you are in headless you need to do it yourself because The application is yours, right? If you are in head full you can use core components v3 They already provide some ways to control which images to load with higher priority If you remember in the demo reloaded with high priority just the first images and the other was the ones in a lazy way Fonts well, this is a complex topic, okay Fonts are critical because they are required to display any content and unfortunately, there is no perfect solution for this But there are some tips that you may use to improve Uh the impact they have in the performance First recommendation is host the phones in your app. They will be cached and served from the same regime That will make the load time Faster If you can’t because of licensing issues At least host the css File that loads the phones instead of for instance calling the google fonts api javascript, which is an expensive request You remember we did that as well Next tip Use font display optional if you can afford it why? Because this setting what is making is telling the browser to load the fonts only if they are available when they are needed Most of the times it means they are only loaded if they are in the browser cache If they are not available, the browser will load a fallback font and will never replace it Sometimes this is a minor issue But for instance if you have icons in your phones or you are you have a very special custom phone Then it won’t work If you can do font display optional then what you can do if you could do is reload the fonts in the head of the page They will be downloaded in background and use font display swap This is what we did in the demo if you remember sometimes the preload is not fast enough So browser will use again a fallback font to first render to the first rendering and then swap the fonts as soon as they are downloaded Be aware that if the fallback font And your custom font are very different it might impact your cumulative life In any case It is crucial to find the best fallback font possible. It means the one that is More similar to the one that you that your customer And there is a great chromex session written by my colleague alex cabs that helps you finding the best possible follow fallback font for each And you can find the link there in this github I invite you to take a look at it and to test it And provide your feedback As I said fonts is a very Complex topic and if you want to dig deeper There is an excellent article about it and the link is this one at the end of the slide Number seven Defer non-critical css continue with what we discuss about images and fonts loading css should also be considered For the performance of your site and the idea is the same try to load on required to render the critical part of the page and load the rest on the month or as If you remember in the demo we passed from a single global css file to a css for each component How to load a css asynchronously well we have this snippet this code snippet here and as you can see it’s a bit tricky We don’t have time to go into details of why how it works, but if you want to know it I suggest you that you check The link at the bottom of the page Number eight ensure user agent is not part of body header Body header by user agent was forced Dispatcher configuration in the am project archetype Dispatcher configuration in the am project archetype this setting In practice is adding the user agent header to the cdn cache key Fragmenting the cdn and therefore reducing the cache the cache key duration, so please Check if your project has this setting and remove it Number nine Cash control header for assets similar to the previous one until may this year am assets were not cached by default at the cdn They were served from the am cloud block storages, but not cached at the cdn You needed to enable it manually by adding the cloud manager variable am block enable caching headers new programs created after may 22 But with program number higher than 65 000 do cache assets by default If your am cloud service program is older than this, please add that variable And finally Number 10 ensure your site is delivered with http2 There are different advantages of http2 over http1 in terms of performance But if I will need to sell one, I will choose multi-text Which is the capacity of reducing a single pcp collection connection to perform different concurrent http request I think the diagram below is very descriptive. You see that with a single TCP connection in http2 you can also actually get all these different resources without needing to open anymore Why are we mentioning this? Because even if am cloud service cdn uses http2 by default We have seen some customers who have their own Cdn for web application firewall in front of am Which for some reason is not properly configured and delivers the website with http1 So please if you have your own cdn or web application firewall ensure it is properly configured to leverage And with this we finish the top 10 tips and i’m hand it over back to my colleague to alex Yes Hey, thank you. So let’s recap in this session You have learned speed matters and am gives you the right tools to improve performance based on your use case you learned about cobweb vitals and how to optimize for them and You learned about the top 10 recommendations on how you speed up your site We have a few call to action items for you, so do you actually know the state of your site’s cover vitals? If not, I would like to invite you to run the tool against it if you are Below the magic threshold of 95. I definitely invite you to follow the recommendation as as well as starting using real user monitoring and In case of am head full try out experience audit testing in the cloud manager pipeline Thank you very much for attending That’s it. Thank you very much. Thank you very much for your attention and I hope you enjoyed this session Bye