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:
Folder path will be like
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
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 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