Hi everyone, need advice related to page speed - yet again. My client is considering consolidating his product templates and use meta fields and metaobjects to create a single dynamic template. those metafields will hold large images as well. my question is, will that affect page load speed as opposed to rendering a static page?
Generally not, I’d make sure that all the metafields are supported by replo though - pulling in metafields should work great but metaobjects might be harder, may have to use custom liquid there. But should have no impact on performance, just gotta watch that the images you pull in aren’t huge, and that all of them are lazy loaded
Great question I’ve seen this come up a lot, especially with Shopify or similar setups using metaobjects. Using dynamic templates with metafields especially large images can affect page speed if the images aren’t optimized or lazy loaded. A few things to consider: Make sure images in metafields are compressed and use modern formats (like WebP). Use lazy loading so images only load when needed. Consolidating templates can reduce maintenance headaches, but benchmark your current speed vs. the dynamic version (try GTmetrix or PageSpeed Insights). If it’s a Shopify store, I can share some community docs I’ve bookmarked if that helps!
{% assign slider_images = product.metafields.custom.product_images_extra.value %} {% if slider_images %} <!-- Swiper CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <!-- Full Width Slider Styles --> <style> .fullWidth_swiper { width: 100%; height: 500px; } .fullWidth_swiper .swiper-slide { text-align: center; font-size: 18px; background: #444; display: flex; justify-content: center; align-items: center; border-radius: 12px; width: 396px !important; flex-shrink: 0; } .fullWidth_swiper .swiper-slide img { display: block; width: 100%; max-height: 500px !important; object-fit: cover; border-radius: 12px; } .fullWidth_swiper .swiper-pagination-bullet { background: #fff !important; } .fullWidth_swiper .swiper-pagination-bullet-active { background: #fff !important; } </style> <!-- Full Width Swiper --> <div class="swiper fullWidth_swiper"> <div class="swiper-wrapper"> {% for file in slider_images %} <div class="swiper-slide"> <img src="{{ file | image_url }}" alt="{{ file.alt | escape }}"> </div> {% endfor %} </div> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <!-- Initialize Full Width Swiper --> <script> var fullWidthSwiper = new Swiper(".fullWidth_swiper", { slidesPerView: 'auto', spaceBetween: 30, freeMode: true, pagination: { el: ".fullWidth_swiper .swiper-pagination", clickable: true, }, }); </script> {% endif %}
I just did this on another project, here you can see how I'm pulling metaobjects and placing into a slider
Hope it helps
Our product pages have a lot of content. I converted only 50% of the page to dynamic and the load time went from 6s to 16s+
Not a good idea
Huh, would love to see the page speed comparison. Very surprising that you’d see longer load times with a dynamic page
I thought so too. But then realized, dynamic page means more API calls to fetch Shopify data as opposed to serving static content. Does that make sense?
I'll record a loom and send a comparison. It was surprising for me too.
well generally there's only one API call to Shopify to load the page content. Shopify handles all the liquid rendering and such in that one API call and returns HTML
technically if you're loading more dynamic data shopify's server will have to do more work, but that's usually a difference of maybe maximum a few 100 milliseconds. I definitely would not expect to see 1+ second differences in page load time
my guess would be that some of this dynamic content is actually loading large assets like uncompessed images or videos or something like that, but would need to look at the page speed reports to see
https://www.advtennis.pro/products/adv-tennis-bag?variant=39689857204297 Here is the page that I converted to dynamic template by 50%
yeah, I'm seeing a lot of large assets on this page - https://www.advtennis.pro/cdn/shop/files/group_1484581660.webp?v=1739558598 is almost 1MB
