Preload Banner Image on Expression Theme

Store Design
, ,
1

Hello,

I’m trying to preload my banner image on my website which uses the expression theme, but I cannot figure out where the code needs to go. Is anyone able to advise please? Thank you

{% if block.settings.image != blank %}> data-bgset=“{% render ‘bgset’, image: block.settings.image %}”> data-sizes=“auto”> data-parent-fit=“cover”> style=“background-position: {{ block.settings.image.presentation.focal_point }}”>>

2

Hello @Littleonesprelo

To preload the banner image in the Expression theme, follow these steps:

Step 1: Add in theme.liquid

  1. Go to Online Store > Themes > Edit Code.
  2. Open theme.liquid.
  3. Locate the section and add the following code before :
{% if section.settings.image != blank %}
  
{% endif %}

This helps the browser start loading the banner image earlier.

Step 2: Modify Lazy Load Behavior in banner.liquid (or relevant section)

  1. Find the section that loads the banner (banner.liquid or hero.liquid).
  2. Modify the image to load eagerly instead of lazily:

Replace:

With:

This ensures the banner image is loaded as soon as possible.

Step 3: Ensure Proper Image Format
Expression theme may use WebP for faster loading. If the data-bgset is used, update the noscript fallback:

Step 4: Test Performance

  1. Open Google Chrome DevTools (F12 > Network tab).
    2.Reload the page and check if the image is preloaded (should appear in network requests).
  2. Measure performance using Google PageSpeed Insights.

This should significantly improve the initial loading time of your banner. Let me know if you need any refinements!

Thank you :blush:

3

Hi @Littleonesprelo

To improve loading speed, it would be beneficial to convert all CSS background-image: url to image tags (). This will help optimize the loading process.

Best,

DaisyVo