Optimera bilder på sök- och kategorisidor

I den här artikeln beskrivs hur du optimerar sidorna sökning och kategori i Microsoft Dynamics 365 Commerce.

Ett sätt att förbättra prestandan för e-handelswebbplatsens kategori- och söksidor är att optimera hur produktbilder renderas. Före versionen av Commerce version 10.0.26 har produktbilder lästs in på klientsidan för att stödja bild som reserv till en standardbild när det inte finns någon produktvariant eller huvudbild.

Från och med versionen av Commerce 10.0.26 har stöd lagts till SDK-bildkomponenten och innehållshanteringssystemet (CMS) för direkt hantering av reservlogik när en primär bild inte är tillgänglig. CMS-API:t accepterar nu en ny frågesträngsparameter med namnet Reserv som innehåller en lista med alternativa reservbilder för att försöka om den primära bilden inte hittas. Den renderingslogik på klientsidan som tidigare använts behövs inte längre, vilket förbättrar sidinläsningsprestandan på kategori- och söksidor enligt LCP-måttet (Largest Contentful Paint).

CMS API-exempel

I följande CMS-API-exempel returneras den begärda huvudbilden (productVariant1.png) om en bild hittas, annars försöker systemet att returnera den första reservbild som finns (product1Main.png). Om den första reservbilden inte hittas försöker systemet att returnera en tredje och sista bild (placeholder.jpg).

https://images-us-ppe.cms.commerce.dynamics.com/cms/api/phpjqgrmtp/imageFileData/search?fileName=product1Variant1.png&fallback=product1Main.png,placeholder.jpg

Stöd för modulbibliotek

Commerce modulbibliotek version 10.0.26 innehåller kodändringar som använder den nya CMS-API-platshållarsträngen för frågesträngen när bilder begärs. Huvudkodsändringen som finns i \node_modules@msdyn365-commerce\components\src\product-card\product.component.tsx skickar en tom reservbild för platshållaren och en valfri bypassHideOnFailure-parameter för att aktivera reservfunktionen.

Filen appinställning innehåller nu en ny Tom platshållarbild en ny bildplatsinställning för tom platshållare som gör det möjligt för en användare av webbplatsskaparen att ange reservbild från bilder som överförs till mediebiblioteket. Det angivna bildnamnet för platshållaren överförs till innehavaren för tomma platshållare som ska visas om den primära bilden inte är tillgänglig. Produktkomponenten läser av platshållarbildnamnet och passerar det som reservalternativ när du anropar SDK-bildkomponenten.

Notering

Om komponenten product.component.tsx har skrivits över med anpassad kod, eller om modulen för behållare för sökresultat har klonats och/eller anpassad kod gör bildanrop direkt, måste du ändra den anpassade koden för att förbättra prestandan. Följande exempelkod visar de ändringar som behövs för att överföra en platshållarbild till CMS-API:t.

Lägga till stöd för reservbildskod för anpassad kod

Följande funktion renderProductPlacementImage finns i filen product.component.tsx i Commerce-versioner innan 10.0.26.

    function renderProductPlacementImage(
        productCardimageSettings?: IImageSettings, gridSettings?: IGridSettings,
        imageUrl?: string, fallbackImageUrl?: string, altText?: string, requestContext?: IRequestContext): JSX.Element | null {
        if (!imageUrl || !gridSettings || !productCardimageSettings) {
            return null;
        }
        const image: IImageData = {
            src: imageUrl,
            altText: altText ? altText : '',
            fallBackSrc: fallbackImageUrl
        };
        const imageProps: IImageProps = { gridSettings };
        imageProps.gridSettings = gridSettings;
        imageProps.imageSettings = productCardimageSettings;
        imageProps.imageSettings.cropFocalRegion = true;
        return (
            <Image
                {...image} {...imageProps} loadFailureBehavior='empty'
                requestContext={requestContext}
            />
        );
    }

Följande ändrade funktion renderProductPlacementImage innehåller ändringar för att skicka en reservbild till bild-API och kan användas som ett exempel på hur den används. Ett sant värde för bypassHideOnFailure måste skickas för att reservfunktionen ska fungera.

    function renderProductPlacementImage(
        productCardimageSettings?: IImageSettings, gridSettings?: IGridSettings,
        imageUrl?: string, fallbackImageUrl?: string, altText?: string, requestContext?: IRequestContext): JSX.Element | null {
        if (!imageUrl || !gridSettings || !productCardimageSettings) {
            return null;
        }
        
        const emptyPlaceHolderImage = context.app.config.placeholderImageName as string;
        let fallbackImageSource = fallbackImageUrl;
        if (emptyPlaceHolderImage && fallbackImageUrl) {
            fallbackImageSource = `${fallbackImageUrl},${emptyPlaceHolderImage}`;
        }
        const image: IImageData = {
            src: imageUrl,
            altText: altText ? altText : '',
            fallBackSrc: fallbackImageSource
        };
        const imageProps: IImageProps = { gridSettings };
        imageProps.gridSettings = gridSettings;
        imageProps.imageSettings = productCardimageSettings;
        imageProps.imageSettings.cropFocalRegion = true;
        return (
            <Image
                {...image} {...imageProps} loadFailureBehavior='empty'
                requestContext={requestContext}
                bypassHideOnFailure
            />
        );

I exempelkoden ovan är bildkällan den primära bild som ska återges (t.ex. en blå produktvariantbild). Reservbilden används om den primära bilden inte är tillgänglig (t.ex. produktens huvudbild) och platshållarbilden läses från programkonfigurationsfilen om de primära bilderna och reservbilderna inte är tillgängliga.