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 worldwide
The net impact is up to 80% image payload reduction and improved web performance by several seconds.
Struggling to get your SEO just right? Start with your image optimization, and start with our blog!
Setting Up An ImageEngine Account
When signing up for ImageEngine free 30 day trial, 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 delivery address.
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.