Simple Client Hints Installation for Magento Image Optimization

by Joseph LoPresti, Solutions Engineer at ScientiaMobile

How Client Hints and Resource Hints enhance ImageEngine

In my experience helping customers configure our products with various eCommerce platforms, I’ve noticed that some customers aren’t taking advantage of Client Hints or Resource Hints. This is a simple one-time fix that gives ImageEngine more information on the requesting device and speeds up the connection to ImageEngine. And since time is money in eCommerce, it can mean the difference between a sale or an abandoned cart.

Magento:

Here’s how to enable Client Hints and Resource Hints if you already have Magento and ImageEngine. If you haven’t connected them, here’s the 4 step blog on how to do this.

__ 1. Find the following file: app\design\frontend\base\default\template\page\html\head.phtml__

__ 2. Below the meta tags add the following and save:__

 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data"/>

 <link rel="preconnect" href="//images.example.com" crossorigin>

Now ImageEngine will recognize client hints and connect faster through preconnect.

Magento 2:

Similar to the last section, below are the steps for enabling Client Hints and Resource Hints on Magento 2. If you have not yet connected Magento 2 to ImageEngine, here’s the 6 step blog on how to do this.

1. In the Admin panel on the left click Content > Configuration and edit the third Design

2. Configuration record, which edits the Default Store View

__3. Scroll down and find the HTML Head Settings. When you open up these settings you should see a text area for “Scripts and Style Sheets.” __

4. Add the following tags after the CSS:

 <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Save-Data"/>

 <link rel="preconnect" href="//images.example.com" crossorigin>

5. Click Save Configuration and you’re done! You’ll need to go into Cache Management and refresh. Now ImageEngine will recognize client hints and connect faster through preconnect.

With these steps, you should be all set and ready to improve your website for the better. If you have any questions or concerns about getting started, you can always contact me at Joe@ScientiaMobile.com and use our free resources such as our ImageEngine Getting Started Guide. or add on other Magento optimization such as TTFB reduction from Goivvy.