update featured collection so we don't lazy load images above the fold #3741
Conversation
|
@katiepeterso how could i tophat this change? there are some demo links in the PR description but they're not going where i thought they would |
katiepeterso
force-pushed
the
load-above-fold
branch
from
2fa9272 to
af35848
Compare
| @@ -145,6 +150,7 @@ | |||
| show_vendor: section.settings.show_vendor, | |||
| media_aspect_ratio: section.settings.image_ratio, | |||
| image_shape: section.settings.image_shape, | |||
| lazy_load: false, | |||
There was a problem hiding this comment.
This section (if shown) will only have one row of items, so lazy_load can always be false.
katiepeterso
force-pushed
the
load-above-fold
branch
from
af35848 to
3433a75
Compare
| @@ -99,6 +105,10 @@ | |||
| {%- if section.settings.collection.products.size > 0 -%} | |||
| {% paginate section.settings.collection.products by section.settings.products_to_show %} | |||
| {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%} | |||
| {% assign lazy_load = false %} | |||
| {% if forloop.index > max_columns_to_show %} | |||
There was a problem hiding this comment.
I decided to use the max possible columns to show here rather than try to figure out which layout is displayed. The numbers should not be so different (like, same order of magnitude).
I think I have the right URL's in the description now, @Al-Campuzano |
Thanks, Katie :) |
That's good! You should not see a change to the functionality. I have added before and after performance tests to the description. |
What about the actual attributes in the HTML, though? that should be visible, and i could not see it. Granted, i may not know what i'm doing 😅 |
| @@ -99,6 +105,10 @@ | |||
| {%- if section.settings.collection.products.size > 0 -%} | |||
| {% paginate section.settings.collection.products by section.settings.products_to_show %} | |||
| {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%} | |||
| {% assign lazy_load = false %} | |||
| {% if forloop.index > max_columns_to_show %} | |||
There was a problem hiding this comment.
Considering that we assign this to true only once, we could adjust this?
| {% if forloop.index > max_columns_to_show %} | |
| {% if forloop.index > max_columns_to_show and lazy_load == false %} |
Would save trying this on all products
PR Summary:
The first row of the Feature Collection is visible above the fold in Rise and on some screen sizes in Dawn. Therefore, we should not lazy load those images. I conditionally set
lazy_loadtofalseforcard-product's that are in the first row based on the number of columns to show per row.Why are these changes introduced?
Images above the fold should not be lazy loaded. This is being introduced to follow Shopify's guidelines and to improve performance.
What approach did you take?
Other considerations
Decision log
Visual impact on existing themes
This should only improve the loading performance of the page, so the change may not be visually detectable. Here is a before and after measurement from Lighthouse:
Testing steps/scenarios
Demo links
Checklist