How to use smart rules to optimize images and speed up your pages

HubSpot’s Smart content modules dynamically display various versions of your content tailored to specific viewer categories. For instance, you might generate alternative content version for visitors based on their location or device type.

You can use the HubSpot’s SMART RULES feature to build a website that provides a better experience for mobile users. There are many ways you can use smart rules and there are many categories but in this article we will only focus on the ‘device type’ category so we can optimize the images.

Here are the steps on how to use smart rules:

• Click on any of the modules on the page.
• A left side drawer will pop out. Click on "Add smart rules".
• Click on "Device type" and "Add rule".
• Select "Mobile" from the dropdown menu and save.

• Now you can define all of the aspects of that module according to device type.

   

  Practical examples of when to use smart rules

  Let’s say you have hero banner that rotates on desktop but on mobile want to show the more simplified version maybe single image with some text for optimization purposes