Skip to content

Commit

Permalink
[Image_tag] Update to remove lazy loading and let it automatically de…
Browse files Browse the repository at this point in the history 
…cide the best loading strategy (Shopify#3002)

* remove lazy loading where necessary to better performance

* add fetch priority
  • Loading branch information
@ludoboludo
ludoboludo authored Sep 20, 2023
1 parent 223a94c commit ba3251d
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 24 deletions.
6 changes: 2 additions & 4 deletions sections/collage.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
block.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
Expand All @@ -82,7 +81,6 @@
block.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
Expand Down Expand Up @@ -141,7 +139,7 @@
{{
block.settings.cover_image
| image_url: width: 3000
| image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
| image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
Expand Down Expand Up @@ -185,7 +183,7 @@
{{
block.settings.cover_image
| image_url: width: 3000
| image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
| image_tag: sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
Expand Down
1 change: 0 additions & 1 deletion sections/collapsible-content.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@
section.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
}}
Expand Down
12 changes: 8 additions & 4 deletions sections/image-banner.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@
assign half_width = '50vw'
assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}

<div
Expand All @@ -70,12 +74,12 @@
section.settings.image
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: widths
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
Expand All @@ -102,12 +106,12 @@
section.settings.image_2
| image_url: width: 3840
| image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths
widths: widths,
fetchpriority: fetch_priority
}}
</div>
{%- endif -%}
Expand Down
10 changes: 8 additions & 2 deletions sections/image-with-text.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@
}
{%- endstyle -%}

{% assign scheme1 = settings.color_schemes | first %}
{%- liquid
assign scheme1 = settings.color_schemes | first
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}

<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == scheme1 and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
Expand Down Expand Up @@ -42,7 +48,7 @@
{{
section.settings.image
| image_url: width: 1500
| image_tag: loading: 'lazy', sizes: sizes, widths: widths
| image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority
}}
{%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
Expand Down
1 change: 0 additions & 1 deletion sections/multicolumn.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@
block.settings.image
| image_url: width: 3200
| image_tag:
loading: 'lazy',
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
sizes: sizes,
class: 'multicolumn-card__image'
Expand Down
2 changes: 1 addition & 1 deletion sections/multirow.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
{{
block.settings.image
| image_url: width: 1500
| image_tag: loading: 'lazy', sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
| image_tag: sizes: sizes, widths: '165, 360, 535, 750, 1070, 1500'
}}
{%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
Expand Down
22 changes: 17 additions & 5 deletions sections/slideshow.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,24 @@
assign sizes = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
{{
block.settings.image
| image_url: width: 3840
| image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
}}
{%- if forloop.first %}
{{
block.settings.image
| image_url: width: 3840
| image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
}}
{%- else -%}
{{
block.settings.image
| image_url: width: 3840
| image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
}}
{%- endif -%}
{%- else -%}
{%- assign placeholder_slide = forloop.index | modulo: 2 -%}
{%- if placeholder_slide == 1 -%}
Expand Down
8 changes: 2 additions & 6 deletions sections/video.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,7 @@
{{
poster
| image_url: width: 3840
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: alt
| image_tag: sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
}}
{%- else -%}
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
Expand Down Expand Up @@ -102,7 +98,7 @@
{{
poster
| image_url: width: 3840
| image_tag: loading: 'lazy', sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
| image_tag: sizes: sizes, widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', alt: alt
}}
{%- else -%}
{{ 'hero-apparel-3' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
Expand Down

0 comments on commit ba3251d

Please sign in to comment.