Optimizing Replo Loading for Improved Shopify Page Performance

Hi! I am on the tech team at Thrive Causemetics- we are a customer. I am trying to understand if we are able to exclusively load Replo into the head of 'pages' in Shopify rather then globally to improve our web performance.

7 comments

Megan M.
·
·
Are there any risks associated with it? We currently only use Replo on pages and intend to for the foreseeable future. For more context, we have codebase that builds to liquid
Steve S.
·
·
Hmmm, this is an interesting question. I'm not sure I fully understand, but here are a few follow-up questions.
1.
When you say "load Replo" what do you mean? There are generally two concepts from Replo that could be said to "load in":
a.
First is the script that powers Replo pages, sections, and product templates. This should, in theory, ONLY load in when the Replo content is on the page (and NOT load in globally).Two is our analytics pixel should load globally but really shouldn't affect anything in the way of web performance.
2.
What web performance metrics are you worried about? Do you have any reports or a specific page we can look at? Generally speaking, Replo is NOT the reason for slow page speed, and most of the time, Shopify or other theme bloat is the main culprit. Docs here
Is there a specific page you're worried about (a link here would be helpful)? Curious to learn more.
👍1

Megan M.

Thanks for the quick reply Steve S.. You can disregard the question above. I was referring to the script that powers Replo pages, sections, and product templates

{% if request.page_type == "page" and page.metafields.replo.page_featured_image != blank %}
      <meta property="og:image" content="{{ page.metafields.replo.page_featured_image }}"/>
      <meta property="og:image:secure_url" content="{{ page.metafields.replo.page_featured_image }}"/>
      <meta property="twitter:image" content="{{ page.metafields.replo.page_featured_image }}"/>
    {% endif %}
    {% if request.page_type == "page" and page.metafields.replo.before_head_end_content != blank %}
      {{ page.metafields.replo.before_head_end_content }}
    {% endif %}

It looks like it exclusively does load exclusively on pages even though it is loaded into the global theme header.

Steve S.
·
·
Ahhh yes this code is specifically to make sure we're only affecting our pages 💪
🙌2
Megan M.
·
·
That is great! One more question. What is the second warning in the console about here? https://thrivecausemetics.com/pages/about-us
Steve S.
·
·
Hmm it looks like you have several references to this product which is in Draft state so the page's liquid can't fetch the relevant data. From the looks of it is generally coming from these "Image Tile" Buy Box components on Tablet and Mobile views (there are a lot of them) You can: a) Ignore the errors as they shouldn't negatively affects your customers page experience b) Change those Buy Boxes to normal containers since you don't actually need them to be Buy Boxes (they don't seem to be referencing any Product data) c) Change the Buy Boxes to reference some other product that isn't in Draft state. This will remove the error in console but is kinda wonky since you're not referencing any product data in the boxes. Also, I wanted to make sure you saw this support article here: https://support.replo.app/articles/8150513820-best-practices-for-building-pages-in-replo#don-t-duplicate-and-hide-con[…]ers-for-different-devices-29 Basically it speaks to the relative dangers of over-using visibility to created components for each device type. You should generally instead use Replo's responsive design framework if you can!
Megan M.
·
·
cool thanks!

Optimizing Replo Loading for Improved Shopify Page Performance | Reploverse