Best Practices for Performant Delivery

Transcript

Hi, everyone. Today’s session is dynamic media masterclass. AEM Assets dynamic media enables fast and flexible delivery of high quality personalized media across devices by optimizing image and video and other assets on the fly. With more than 9 trillion media deliveries every year, it’s one of the most scalable media delivery solutions handling daily peak volumes of up to 69 billion assets in a day. In this session, we will talk about the best practices for setting up AEM Assets dynamic media to optimize for performance and share some helpful tips to utilize dynamic media capabilities to its maximum potential. To quickly introduce us, I’m Rhea Mitta from product management team for dynamic media.

Hello, everyone. Welcome to the AEM dynamic media masterclass. I, Ankush Malhotra, architect of AEM Assets dynamic media, along with my product manager Rhea, will be taking you through some of the tips and tricks of the dynamic media. So let’s dive right in. These are the topics we will be covering today. In case you’re keen on learning about only specific topics, feel free to skip to the time segment in the video as per this page. In this section, we’ll talk about right video profiles to never have a video buffer. Who doesn’t want that? To deliver videos that reduce buffering, one of the most important things to do is make sure videos are delivered in adaptive streaming format. A test performed on a 60-second video in constrained bandwidth of 5 Mbps showed how buffer count reduced by 10 times from 50 to 5 when using adaptive streaming. To deliver videos via adaptive streaming, adaptive video profile needs to be applied on AEM Assets folder. When applied, you see it like this on the folder name. Dynamic media allows you to create custom video profile based on your video. In your video profile, you can define number of encodes created for the video. Every encode typically is a quality variant of the original video, and the final stream of video is served adapting to the network bandwidth for the user. So based on the available encodes, we have to make sure that a diverse set of quality encodes are available for streaming so that users with good bandwidth see high quality variant, but when the network speeds drop, low quality variant is quickly loaded to avoid any buffering. Here is a guidance on what encodes set to define in a video profile section. Opening a video profile section allows you to add a new profile and add encodes to it. You could create a copy of default profile and edit encodes definition there as well. Based on where your input video lies in this table, ideally a profile should have three to four encodes with specific height and corresponding bitrate as specified in this table. If you have variable input size for your videos, go with the highlighted set that should work for most delivery use cases.

Once the delivery URL is made after processing these encodes, you can test the quality of service or QoS metrics like time to first byte, buffer count, buffer duration, playback error rate with online tools to see if your video is performant. A performing video in a site would lead to better lighthouse score and more organic traffic to your page. So one of the key areas while working with any web property continues to be SEO, whether the SEO best practices are being followed. As some of you are already aware that the dynamic media default URLs, which are of the form as you see on the screen, is-image-company-name and the file name, that too without extension, it does not work well or great as far as the search engines are concerned. Now obviously we cannot change the file names that are present in the system. So what can we do? Now dynamic media offers a solution to this in the form of rule sets. Rule sets is not a very widely known solution, but we’ll take an example of how rule sets can be used to address this problem. Now what you see on screen is a very simple rule set. You see there’s an expression and a substitution. Now I must mention here that the rule sets work only on the URL part after the company name. So you can use rule sets to transform the customer-facing URLs to an actual URL for the origin and your customer-facing URL could be very descriptive. It can carry actual description of what the image or whatever the web object is all about and then the transformed URL can be altogether very different. Now if you see here, I have a slash here, any set of characters before slash, then after slash, save any set of characters, and then a hyphen and an underscore, which is a separator, then any set of characters, and finally ending in JPEG. What this rule set is saying is take the first match and put it here as an image preset and take the third match and put it here as a file name. So what we will essentially see is that the second part here is of no consequence to the origin and this is exactly what can be used to get a very descriptive URL for this search engine. So if you see this particular example, after company name, I have product medium and then I have, this is the image of striped blue jeans, and then I have a file name which is very likely the SKU ID and whether it’s a front image and where the product is available. And when I transform this particular URL through rule set, it becomes something like below. So the blue part here ends up becoming the preset. This part, while striped gray blue jeans is of no consequence to the image resolution, but it helps us get a better SEO score. The other trick that I want to mention while working with the rule set is you can always use this particular request parameter, that is debug info is equals to rule set. This will exactly tell you while debugging a rule set that what is your actual URL and what is the transformed URL looks like. So in addition to rule sets, one should use all text and title attributes on the image. Now, this is not something that is strictly under the purview of AEM dynamic media, but any web property that is using dynamic media URLs should add all text and title on the images. So if I take this particular example here, if you look at this particular example, there’s a very descriptive all text here about the viewer, where it is, and then a title as well. And this is again great for achieving a good SEO score.

One can also use scale and DPR parameters. The scale, if you work with scale parameter and you say you request an image with the scale one, that gives the image at the original resolution. If you use a value greater than one, that means image serving will upscale the image. Or if you use a value less than one, it will downscale the image. And we can build an image source set that uses the scale to render images at different widths, depending on the screen viewport and size. Again, if you can look here and you could build up different URLs powering the source set with the different values for the scale and DPR. The newer flavor of dynamic media, that is, dynamic media with OpenAPI, that takes a very simplified approach to SEO. If I take an example, this particular example, what you see in this part after the image ID, this is the SEO name. And this is no bearing on the asset resolution. I mean, this is strictly for SEO. And one could put a very descriptive image name here as well. Hotel deluxe room. And you would see that it renders the same image. And then if you wanted to use some transforms, you would simply say flip is equal to h. If you wanted to flip this image horizontally, the lamp would go over to the other side. So this is the dynamic media OpenAPI. But you would notice here that the SEO name has no bearing on the asset resolution. The asset of the image is resolved using the ID here. And this could be anything. The other thing you would notice here with the OpenAPI URL is, if I reload this, and if I check the cache control header, you would see that it carries two other values. One is stale while revalidated and the other is stale if error. Stale while revalidated is basically saying that for the first six hours after the expiry of this content in cache, if we get another request, serve that request with the stale content while you validate it in the background. So any request after this one will get the fresh request. The stale if error is basically saying this is basically number of seconds in a day. So this is basically saying if the backend is not responsive or is encountering some kind of issues, the stale image can be used for almost up to a day. So this is again very relevant for SEO. And the newer stack that is dynamic media with OpenAPI is doing this by default. Now, one can also use smart imaging. Earlier smart imaging required an explicit domain. It did not work with the generic domain. Now we made smart imaging by default on all domains. It is not enabled for all companies. You can experiment it with smart imaging by using this BFC request parameter. So if I go back to the first image, and here if I say BFC on, and let me just open up the network tab. And now if I say BFC on, you would notice that the request, the response is basically an AVF image. The other two things that you would notice here is that it is, there’s another header called Adobe Smart Imaging. This is basically saying that we’ve saved about 4.9 kilobytes if this image was a JPEG. If I just reopen this image in another tab, but I don’t use the BFC on, and I look at the size, this is about 47.8 kilobytes, and this is 42.8 kilobytes, and thereby saving about 5 kilobytes by the use of smart imaging. Smart imaging is great. It gives reduced time, reduced file size, gives us faster image load. And together, combined along with the latest format that is WebP or AVF, that gives us the better search ranking. Now you can experiment it with this particular request parameter, BFC on. If you want to have this BFC on on your default, by default, without requiring this request parameter, you would need to log a support ticket for it, and engineering will enable it by default for your company.

The other thing to keep in mind is never work with the quality of 100. Always work with quality ranging between 80 to 90. This leads to a good reduction in size in most cases without any perceptible difference in the image quality. And then last is use the sharpening parameters. In case where you’re seeing images where the text is blurry or you would want to enhance the sharpness of the text, you can simply use op is equal to sharpen or the more advanced sharpening parameters. So for this one, if I simply add op on this first sharpen is equal to one, I would see that the text is better highlighted now. Let’s now look at some of the best practices for the bulk congestion or bulk migration. Before any bulk upload, analyze the content carefully to segregate into two hierarchies. One that is meant for dynamic media sync and the one that is not meant for dynamic media sync. Any content that is not meant for delivery should live in separate folders and the content that is meant for delivery. Example of content that is not meant for delivery could be, say, very old archive content, large high-res videos or camera raw files or large Photoshop files or the InDesign catalogs. So use this knowledge to have them in separate folder trees and then use the selective sync feature in dynamic media. Just sync only folders to dynamic media which are meant for delivery. This will lead to an overall better processing time and a better time to market. In the cloud configuration wizard, there’s a small checkbox which says whether we want to sync all content to dynamic media or not. One can uncheck this box and enable selective sync and also set the default mode to sync or disable, thereby syncing all content by default or disabling the sync by default. And then go to the respective folder, use the folder settings wizard, and set the folder sync mode appropriately. If you hover over the info icon, it will tell you the current state of the sync. For this particular folder that you see on screen, the sync mode is enabled because it does not have an explicit setting, which is indicated by the inherited value, and it is inheriting its sync mode from the cloud configuration. Also review PDF and PSD extraction settings in the DM general settings wizard. If you come over to the DM general settings wizard, on the Photoshop tab, you can see that the layer extraction is turned off. Similarly for PDFs, you would want to make sure that the page extraction is set to none. And in the processing option, thumbnail is selected. Define these smart crops judiciously. Use screen resolutions to define these smart crops. If you look at these smart crops here, those are mostly the screen resolutions, barring this one particular smart crop, which could be useful in, say, a small carousel with squarish images. Finally, one of the complaints that we hear from our customers, fair sites and assets are both enabled on a single AM instances, that the publishing of content from author to publish is slow. And that leads to a poorer experience when getting the content live. So to get around this problem, again, go to the folder settings wizard and use the selective sync. So selective sync would decouple the publish from AM publish. And now you can publish the content only to dynamic media. The publish to dynamic media is very fast because it only sends the asset handles to the dynamic media. Now, while the ingestion is happening, AM lacks a good way to track if there are any errors. To track any errors, you can log into the AM desktop app and visit the jobs page there. Let’s see. So this is my desktop app. And in here, if you select the jobs page, I’ll show you all the processing jobs from last seven days. You also have to be careful to select all jobs for your company, and then you should be able to see everything that is under processing. And you can select a particular job to see if all the assets in that job were processed or if there were any errors. Finally, you can use the query debugger page in AM to look for assets that are not processed. So this is the query debugger page. And in here, if you look for searching for assets where damn asset status not equals to processed. So one can run such queries and see which are the assets that are, say, not processed.

So overall, use all these tips to get a much faster processing and overall a better processing experience. In this section, we’ll talk about how to best use your presets for an on-brand and engaging delivery. Your presets is the definition that allows you to control a particular viewer’s appearance and behavior. Dynamic media has different type of viewers like image set, mixed media sets, video viewers and more that allows you to control the experience of media you deliver. Viewer presets allow you to make some out-of-the-box changes to viewer behaviors with a simple UX without needing to make any code changes to viewers. For more custom development, viewer SDK is available to customize it to the use case, and then it would load DM URLs in the customized version. So today we’ll take video viewer as an example and cover a few changes like editing the play pause component, making the video autoplay and loop, increasing font size of captions, adding image overlays to video viewers via the power of presets. Let’s dive right in. So here I start with creating a new viewer preset of the type video. And this is my editor where I’ll be doing all of my editing. It has appearance and behavior tab that I can edit. In the component section, I move to play pause button component and I can see that I can put a custom image as a play component. So here I’m just looking through my DAMP for this yellow play image that is more related to my brand. And I’ve put that as the play one. I also change it in the two X period and I select the same image. And now I have updated it here. Very similarly, now I move on to the pause section, which took the play image by default. And now I just look for the pause yellow icon. And then I want to update that here. Similarly, I will do the same thing for the pause icon. I want to update that here. Similarly, I will do that in the two X image. Ideally, this should be sprite sheet so that they go with the player components and all combination of play and pause, right? When this like icon is on hover and not. So here I can see that in my preview section, like the play and pause yellow buttons are starting showing up. When I hover over that, there’s this bag because I’ve given just one PNG and not the entire sprite sheet as it should be. Now, moving on to my next task, I would go to behavior section where I can control specific player behaviors like playback icons, progressive bit rates and bunch of other stuff, right? For my requirement, I would just go to the autoplay section and toggle that on. And very similarly, I can go to the loop section and toggle that on. This would make sure that my videos autoplay is on loop. I can save it at this point or continue editing. After I’ve done both, I’ll be editing the CSS of your component via this show hide CSS button for the next two things that I want to do. So it’s simply open a text editor and copy the CSS details from this tab into my text editor so that I’m able to edit it easily. So I’m just pasting it in my text editor and increasing the size so that it’s visible. The first thing I need to do is change the captions detail. So I would search for the .s7 caption component in the CSS. Here, for example, I’m increasing the font size and also changing the hex code of color to reflect in my player. For the next part where I want to add an image overlay on top of my player, I copy this video player colon after component. You can copy the definition from the screen share to be able to add an image overlay on top of my player. You can see that background image is a parameter that I need to change and it requires a URL. So here I’ve taken a logo and I’ve also taken the PNG alpha rendition created by dynamic media. And I’ve just done copy URL to embed it in my player preset. Going back to the CSS text editor, I would just replace the URL details with the copy link that I just did with my logo URL. Now, as I copy and paste the details back to my CSS area, I can see that the changes are immediately reflected to show my new overlay in the viewer preset. I can save this preset. Now, the next step is that I need to make sure that this preset is published in this section so that it starts showing up in my assets when I preview my video files. Now, let’s look at an example of how this would look like for a video ingested in a folder where dynamic media video processing profile is applied. So here is a video that I’ve ingested in the tab. In this caption segment, I’ve created three AI based captions with the video with the new AI based caption capability with videos with dynamic media. Now, when I open this video and move on to the viewer preset segment, I can see the new preset that I created and published. Clicking on it, I can see that it shows my video with the play and pause button that I ingested. The video actually auto played. And when I switched to the captions, I can see the caption coming up in an increased font size and the color that I gave specification to.

Lastly, moving at the end of the video, I can see that the video is auto playing as well. So this completes all the things that I want to do for this video. And when I take the publish URL, all these changes would reflect in the surface where I deliver this. In this section, we’ll talk about how changes made to an already published asset can be reflected in the live URLs immediately. The reason why it’s not immediate by default is that dynamic media is backed by CDM, which has time to live or TTL value of 10 hours. By default, every 10 hours, the latest version of image or any asset is pulled and make sure that any changes are reflected. In a scenario when you want to immediately reflect your change, you can use cache invalidation method. Let’s see how it’s done. Here, I’ve already ingested a file with AEM Assets dynamic media and published it. While looking at the URL, I can see that this is the URL that comes up with one of the renditions. Now let’s update this already published file. Here, I add a new file and try to replace it with AEM Assets method. Once replaced, this asset shows as new. After I publish this new asset, my live URL still has the old asset. Even when I refresh, only the old asset shows up. Now for this, I will go to the tools section and go to asset tools, assets and cache invalidation area and open that area. Here, I can also apply some templates to make sure the templated logic is there. But for this example, I’m just going to simply take the URL and go ahead with cache invalidation. With this, when now I refresh this new URL, my asset that is replacing the original asset is loaded immediately. This method can be done for bulk assets and more than one asset as well. Thanks a lot for watching this session. Please reach out to either Ankush or I if you have any questions around any of this topic or in general dynamic media or want to share feedback on this session. Thank you.