Goal: remove lazyloading from Brooklyn theme’s slideshow/hero images to improve LCP (Largest Contentful Paint). Lazyloading defers offscreen image loading; LCP measures when the largest visible element finishes rendering.
Change implemented: helper provided a code change that successfully disabled lazyloading. The original code snippets are central, but largely omitted in the thread.
New issue: without the theme’s original data-widths (Shopify’s responsive image widths), mobile now loads the full-size image, worsening mobile LCP.
Interim tweak: requester adjusted Liquid to use img_url with the {width} pattern (e.g., replacing _1x1 with _{width}x) to approximate responsive behavior. Code details are partial in the post.
Requested outcome: an “elegant” solution that preserves responsive image sizing for mobile while keeping lazyloading disabled.
Guidance given: a link to MDN on responsive images (srcset, sizes, and
Status: partially resolved. Lazyloading is disabled, but an exact Liquid implementation for responsive image widths remains open; further code guidance is needed.
That has worked, thank you very much.
It would be good to somehow keep the data-width functionality in there as now the LCP for mobile is actually worse than before as it’s loading the full-size image.
Is there a way to have smaller size images load for mobile like the original “data-widths” provided?