How to Improve SAP Hybris Page Load Time With Image Optimization

Friday, March 29, 2019

Hybris and Page Load Time

SAP’s Hybris (AKA SAP Commerce Cloud) is an eCommerce platform used by companies around the world. A major part of any eCommerce platform involves serving images of products on the website. Most potential B2B and B2C customers have expectations for fast loading web pages. Studies show that 74% of potential buyers will consider abandoning websites if they don’t load in less than 5 seconds. Images are the largest driver of web payload that slows page load time. So optimizing images for specific devices has a big impact on page load time and online sales.

Integrating ImageEngine image CDN with Hybris

ImageEngine is an image Content Delivery Network (CDN) that will automatically optimize the master images stored on the Hybris platform and accelerate delivery to the end user. ImageEngine does this by:

  • Leveraging the device-aware edge servers on its CDN,
  • Compressing, resizing, and using more efficient next-gen image formats like WEBP and JPEG 2000
  • Delivering the images quickly from its many CDN edge servers around the world.

The net impact is up to 80% image payload reduction and improved web performance by several seconds.

Setting Up An ImageEngine Account

When signing up for ImageEngine free 30 day trial or account, you will add the origin URL where your images are currently being stored. Once you have configured your trial you will receive an ImageEngine URL that you can CNAME to match your domain.

In the following example, if your current domain is example.com, then Hybris stores images in images.example.com. When setting up your ImageEngine Account, you would configure the images.example.com to the ImageEngine hostname.

Step 1: Override Hybris’ Basic Media URL strategy

To override Hybris’ out-of-the-box media URL strategy and replace with one configured for ImageEngine, copy this ImageEngineUrlStrategy.java class from Github to your project’s core extension. If you already have a custom URL strategy, then please contact our support team for guidance on how to proceed.

Make sure its package and folder path look like the following examples:
Class package

com.imageengine.media.url.impl.ImageEngineUrlStrategy

Folder path will be like

/trainingcore/src/com/imageengine/media/url /impl/ImageEngineUrlStrategy.java

Step 2: Define Bean For The Override Strategy

Go to your core extension’s resource folder. Find and edit *core-spring.xml to add the below bean definition that references the new imageEngineURL strategy.

<bean id="imageEngineUrlStrategy" class="com.imageengine.media.url.impl.ImageEngineUrlStrategy" parent="localMediaWebURLStrategy"/>

Make sure above in the class attribute you have given a correct class package path.

Step 3 Configure Your local.properties File

Find your local.properties in ${HYBRIS_HOME}/hybris/config/local.properties

Add the below properties to local.properties. They will point your image media URL to ImageEngine CDN for image media. Use the images.example.com hostname that your configures during your ImageEngine account or trial setup on the second line.

media.folder.images.url.strategy = imageEngineUrlStrategy
media.folder.images.hostname = https://images.example.com

Step 4: Build and Test the Changes

  • Open Terminal
  • Go to ${HYBRIS_HOME}/hybris/bin/platform
  • Run setantenv.bat
  • ant clean all
  • Start the hybris server hybrisserver.bat

Open the home page in your browser and see the rendered image URL. When you inspect the image, It should point to the hostname URL which you have configured in local.properties
For example, a home page image tree.jpg would have an image URL of images.example.com/tree.jpg.

Please visit our ImageEngine documentation for a full explanation of our setup and features. And contact us for a trial or support.

Start a free 30 day ImageEngine trial

Use our demo tool to see how ImageEngine will improve your own website’s image web performance.
Learn more about ImageEngine here.