Enhancing Website Loading Performance

You can take several measures to improve your website's loading performance. These steps include optimizing web page design elements such as image sizes, code formatting, and the use of external scripts, as well as using store features and applications judiciously.

When web pages load faster and more reliably, they not only provide a better user experience but also tend to rank higher in natural search results, making them more visible to potential visitors and often resulting in higher conversion rates.

Store Features and Loading Performance

A store page consists of various functional modules, such as template code, applications, images, videos, payment options, sharing tools, and data analysis trackers. These features improve the overall visitor experience and expand the functionality of the store page.

Each added feature on your store page requires network and hardware resources to function properly. Some features require more resources than others, and adding new features can significantly impact the loading performance of your store.

When considering adding a new feature to your store page, it is important to balance its value with its impact on loading performance. In some cases, sacrificing loading performance may be necessary to provide a better visitor experience and increase conversion rates.

Loading Performance Troubleshooting Tools

You can utilize the following tools to assess the web page speed of your online store:

You can use Google PageSpeed Insights to generate your own Lighthouse report for more detailed store page metrics. To understand the meaning of these metrics, please refer to the Google Lighthouse Performance Scoring documentation.

Understanding Lighthouse Reports

Using the Lighthouse report obtained from Google PageSpeed Insights as an example, it is important to pay attention to two key metrics: Largest Contentful Paint and Total Blocking Time. When these metrics are displayed in red, you can follow the suggested optimizations below:

For abnormal Total Blocking Time:

1. Check if there are too many installed applications.
2. Review the usage of analysis libraries.

For abnormal Largest Contentful Paint:

1. Verify if the image or video specifications are appropriate.
2. Check if there are too many installed applications.
3. Review the usage of analysis libraries.

Factors Affecting Loading Performance

The speed of your store’s pages can be influenced by various factors, which can be divided into controllable and uncontrollable factors based on whether you have control over them.

In addition to explaining the factors related to store page performance, the following content will also provide methods for handling these factors in the controllable factor section.

Controllable Factors

• Applications:
  When you add apps to expand your store’s functionality or appearance, these apps will add code to the template so that they can run. The code inserted by apps runs in the same environment as the theme template, which can affect the performance of the page. The impact on performance is more noticeable with complex functional apps. Therefore, we recommend the following:
  • Reduce the number of installed apps and remove unused or unnecessary ones, finding a balance between store functionality and performance.
  • Avoid inserting large amounts of custom code, as custom code can easily disrupt the original structure of the theme template unless you can ensure that the inserted custom code won’t have a significant impact on the page.
  • Choose high-performance installations for similar functional apps whenever possible.
    

    Note: Applications used only in the store management admin don’t affect the store’s speed.

• Images and Videos:
  Large images and hidden images on the page can potentially interfere with the loading of other more important parts. If users have to wait too long for images to load, they may perceive the store as being slow. The themes provided by SHOPLINE have undergone a series of optimizations for images and videos. For example:
  

  (-) Lazy loading of images or videos that are not currently visible on the screen.
  (-) Loading images in specific sizes based on screen dimensions.
  (-) Progressive loading of large GIF images

  Note: The above information is only applicable to official SHOPLINE themes. For unofficial or private themes, please contact the respective developer for assistance.

  However, these optimization measures can’t eliminate the impact of images or videos on store performance. Your store’s configuration may also affect performance. Therefore, we recommend the following:
  • Refer to the recommended image dimensions when configuring images.
  • Avoid using large-sized GIF images and instead use PNG/JPG format images (GIF format images tend to be much larger compared to other formats of the same dimensions).
  • There should be no more than 50 products associated with a single product category or SKU pictures associated with a single product.
• Analysis Libraries:
  SHOPLINE offers support for event tracking and analysis on various platforms such as Facebook Pixel, Google Ads, Google Analytics, Google Tag Manager, Google Remarketing Tools, and Bing Keyword Advertising. Enabling these analytics capabilities will consume a certain amount of page resources and may impact the performance of your store’s pages if too many are activated. Therefore, we recommend merchants carefully balance store functionality with performance by choosing the appropriate event tracking and analysis based on their specific needs.
• Theme Templates:
  Theme templates consist of Handlebar, HTML, CSS, and Javascript code. Editing or customizing templates may increase file size and impact the speed of your store.
  SHOPLINE provides multiple sets of free theme templates, which are periodically optimized and updated. However, modifying the code of official templates will turn them into private templates, preventing them from being promptly synchronized with the latest optimizations of official themes.
  If you believe that a template has performance issues, you can try the following steps:
  • If you are using an official SHOPLINE theme template, you can contact the SHOPLINE support team for guidance. If you are using a third-party or private template, you can reach out to the template developer for consultation.
  • Consider installing an official OS 2.0 optimized theme, such as the Arise theme.

Uncontrollable Factors

• Customer’s Devices, Network, and Location:
  Customers accessing your store are located all over the world, and their devices and network connections vary. This means that the loading speed of your store may be faster or slower depending on these factors.
  For example, if you have a store in the United States, SHOPLINE will optimize resource access for customers in the US. However, if a customer accesses your store from China, their page loading speed may be slower compared to accessing from the US.
• Local Browser Cache:
  The static resources of your store will be temporarily cached or stored in the customer’s local storage. When a customer visits your store again, the browser can load resources from the cache without sending additional requests to the server.
  SHOPLINE sets the browser cache time for cacheable resources in your store to one year. Cacheable files include image files, PDFs, JS files, and CSS files.
• Server-side Page Cache:
  In addition to local browser cache, SHOPLINE also caches pages on the server side. Initial page loading may be slow, but subsequent page loads will be faster as customers receive cached copies.