Core question: What actually loads on a Shopify page, and whether using a page builder on one or many pages (e.g., collections) affects performance or the homepage.
How a page loads:
Impact of page builders:
Other factors and concepts:
Recommended actions:
Status: Informational guidance provided; no formal resolution. Some replies include promotional links.
I know there’s posts on loading speed, plugins, page builders, etc…
But I couldn’t find a forum which explains what is actually loaded when visiting a shopify web-store. And whether a page builder used on a single page (product page) will affect performance differently than if its used on multiple pages.
Does having a page builder on product collections affect the homepage loading time? And what’s the basic science behind it?
Thanks!!
Hey there, Basically there are two types of factors which are as follows:
As well as, May I suggest you use a good Shopify page builder app such as Layoutbase https://apps.shopify.com/layoutbase-pagebuilder which can make your work easy and handy without any coding by just drag & drop feature. Thanks
Customers who visit your store live around the world and have different devices and internet connections. This means that your store might load faster or slower for them depending on these factors.
If a customer contacts you about the speed of your store, then ask your customer to check that they’re on the latest version of their browser, they have recently cleared their cache, and their Internet service provider is not experiencing any outages or degraded performance.
Shopify hosts your online store on fast, global servers and doesn’t limit your store’s bandwidth. You can check the status of your Shopify store on Shopify Status.
Shopify is constantly making improvements to its code and infrastructure. Some of these improvements might be reflected in your speed score.
Below are some features that affect the speed of your online store.
CDN stands for content delivery network. Shopify provides merchants a world-class CDN run by Fastly that ensures that your online store loads quickly around the globe. You can check the CDN status on the Fastly status page.
Your store caches, or saves, some elements on your customer’s local storage temporarily. The next time your customer visits your online store, the browser can load resources from the cache instead of sending another request to the server.
Shopify sets browser caching for cacheable resources in your store to one year for each file. Files that can be cached include image files, PDFs, JS files, and CSS files.
In addition to local browser caching, Shopify caches pages on the server side. The first time a page is loaded, it might be slower, but later page loads are faster because customers are receiving a cached copy.
The {% content_for_header %} Liquid tag injects assets used by a variety of online store features, including performance analytics and optional features like dynamic checkout buttons. Loading this tag and related assets has an impact on the speed of your store. Shopify is optimizing the tag and its assets to make it faster.
Below are some factors that might impact the speed of your online store, and how you can address them.
If you’re not comfortable with following any of the steps below, then you can hire a Shopify expert to help you.
When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store’s performance. If you’re not using an app, then you can remove it.
If you think that an app is slowing down your store, then take the following steps:
Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.
Apps that run in the admin only, like the Shopify Local Delivery app, don’t affect the speed of your online store.
Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.
If you think that something in your theme is slowing down your store, then take the following steps:
Certain features, when enabled, might also affect your store speed. For example, some quick view pop-ups pre-load information from every product page when a collection page loads. Loading extra data your customers aren’t using can impact your store speed without adding value.
If you think that a feature is slowing down your store, you can take the following steps:
You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.
For example, if you want to order the products in a collection by price, you should do that before you loop through the products in your collection, and not as part of the loop code. This is because the order of the products does not change for each product, and calculating the order of the products adds processing time to the request.
If you’re concerned that your code is not optimized, then you can take the following steps:
The Shopify Theme Inspector for Chrome is intended for merchants and Partners who are comfortable with reading and editing code. If you’re not comfortable with reading or editing code, then you can hire a Shopify expert to guide you. A Shopify expert can also help you to improve your store performance using the results of this tool.
Oversized images and images that are hidden from view can interfere with loading other, more important parts of a page. If users have to wait for large images to load, they might perceive your store to be slow.
Shopify adds some safeguards to prevent you from overloading your online store with images or videos. For example:
However, these safeguards do not entirely prevent images or videos from impacting your online store’s performance.
If you think that images are slowing down your store, then take the following steps:
You can choose from several fonts for the text in your online store. However, if you use a font that does not yet exist on your customer’s computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
To avoid downloading a new font to your customer’s computer, you can use a system font. A system font is a font that is already installed on most computers.
You can select a mono, serif, or sans-serif font family. You can still use font styles, such as bold or italic, when you use any of these font families.
The font that displays on your customer’s computer depends on their operating system. Below are some examples of the fonts that might be used to render text when you select a system font family:
What Happens When You Visit a Shopify Store?
Browser Requests the Page
When someone visits your website, their browser (like Chrome or Safari) asks Shopify’s servers for the content of the page.
Shopify Sends Back the Files
Shopify sends several files to the browser:
How Do Page Builders Affect This Process?
Page builders add extra HTML, CSS, and JavaScript to your store in order to customize its design or functionality. While these features make your store look better and more dynamic, they also mean:
Does Using a Page Builder on One Page Affect Other Pages?
If the Page Builder Adds Global Code
Many page builders load scripts and styles globally, meaning the code gets loaded on all pages, even if the builder is only used on a single page. For example, if you use the builder on a product page, some of its code may also load on the homepage or collection pages.
If the Builder Optimizes Its Code
Some builders, like Foxify, are designed to only load the code that’s needed for specific pages. In this case, using the builder on a single page would have minimal impact on other pages.
The Bigger the Builder’s Footprint, the Bigger the Impact
Builders that include a lot of features or inefficiently coded elements may add unnecessary scripts or styles across your entire store, slowing everything down.
Does Using a Builder on Multiple Pages Make Things Worse?
Yes, using a page builder on multiple pages can slow down your store. This happens because the extra code that the builder adds has to load every time someone visits those pages. For instance, if you use the builder on your product pages, collection pages, blog pages, and homepage, the browser will repeatedly load those additional resources, increasing overall page load times.
Does a Product Collection Page Affect the Homepage?
Directly, no. The layout of the homepage won’t change based on how the product collection page is built. However, if the builder loads global files (like shared scripts or styles), those files might be loaded on the homepage as well, even if they aren’t used there. This can indirectly slow down the homepage.
Basic Science Behind It
Every File Takes Time to Load
The browser fetches files one by one (or in small batches). The more files or larger the files, the longer the page takes to load.
Render-Blocking JavaScript
Some JavaScript files stop the browser from displaying the page until the scripts are fully downloaded and processed. This can delay how quickly the page appears to visitors.
Unused CSS and JavaScript
If a builder adds features or code you don’t use, the browser still downloads it, wasting resources and slowing down the page.
How Can You Keep Your Store Fast with a Page Builder?
Choose a Builder That Optimizes Code
Use a page builder like Foxify that is designed to only load the files needed for specific pages.
Limit Page Builder Use
Avoid using the builder across every page of your store. Use it only for essential pages, such as a specific landing or product page.
Check for Bloat
Use tools like Google PageSpeed Insights or Shopify’s built-in speed report to identify what’s slowing your site down.
Compress Images and Optimize Media
Ensure that images and videos on your site are compressed and properly optimized, as they often account for large file sizes.
Minimize Plugins and Apps
Each app or plugin adds its own files and scripts to your store. Reducing the number of apps can improve performance.
if you found this helpful and want to use FOXIFY then Please use my affiliate link
https://s.foxecom.com/apps/foxify?linkId=lp_462169&sourceId=peterg&tenantId=foxecom