How We Optimize Boost App To Improve Site Speed of Shopify Stores

Ellie Ho

June 17, 2024

November 30, 2020

•

6 min read

Get started

(Updated in May 2024)

Site speed is a critical factor in search engine optimization (SEO) and conversion rates. A fast-loading eCommerce store provides a better shopping experience, encourages visitors to stay longer, and ultimately leads to more sales.

At Boost, we understand the importance of website speed and are constantly working to improve our app to help your Shopify page speed get a higher score on Google PageSpeed Insights.

What is Google PageSpeed Insights?

As the No.1 search engine, Google serves not only browsers but also website owners. It has developed a bunch of free tools for site builders to monitor and improve their websites so they can rank top on the search result page (SERP).

While Google Analytics provides a more detailed look into website traffic, the Google PageSpeed Insights tool addresses another critical factor in search engine optimization (SEO) - website speed.

A brief explanation for tech dummies

“PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.”

Google

PSI uses a scoring system from 0 to 100 to evaluate your Shopify page speed. The higher the score, the faster.

A score of 90 or above is considered good. A score between 50 and 90 needs improvement, and below 50 is considered poor.

One common misunderstanding about PSI is that it is often mistaken with load time. In fact, load time is a component of the PSI performance score.

This score is determined by running Google.

🤓 Textbook definition (you can skip it): A PSI score consists of 6 components:

First Contentful Paint (FCP): quantifies the time from the moment the page starts loading to when any part of the page's content is rendered on the screen.
Speed Index (SI): measures how quickly content is visually displayed during page load.
Largest Contentful Paint (LCP): measures the load time of the primary–or "largest"–content. It shows how long a user is actually able to see the content of a page.
Time To Interactive (TTI): quantifies the time from the moment the page starts loading to the moment its main sub-resources have loaded and it is capable of reliably responding to user input quickly.
Total Blocking Time (TBT): marks the period between First Contentful Paint (FCP) and Time to Interactive (TTI).
Cumulative Layout Shift (CLS): evaluates how much a page's content visually shifts around when the first user interaction happens. It signals visual stability.

Why you should pay attention to PageSpeed Insights metrics

Users expect a web page to be lightning-fast

Countries around the world are pushing to implement 5G mobile networks. This reflects the race for speed in cyberspace.

Online users want things to load faster and faster.

Hubspot reveals that 64% of mobile users expect pages to load in 4 seconds or less while regarding desktop browsers, 47% want a webpage to load in less than 2 seconds.

Google also takes processing time into account when it comes to ranking on SERP.

Your site needs to be loading in milliseconds to rank in the top 10 positions on Google. (Source: SEMrush)

There is a correlation between the Shopify page speed and conversion

E-shoppers are demanding. Dissatisfaction with a website's performance makes up to 79% of customers less likely to give the same site a second chance. 1-second delay can cause a 7% reduction in conversion.

According to research done by Google, an increase in page load time can impair bounce rate to a great extent.

Source: Think with Google

To sum up

A good PSI score (90 or above) is crucial for several reasons:

Improved SEO: Google prioritizes faster-loading websites in search results, leading to higher visibility and organic traffic.
Enhanced shopping experience: Visitors expect websites to load quickly. A slow eCommerce store can lead to frustration, bounce rates, and lost sales.
Increased conversions: Studies show that a 1-second delay in page load time can decrease conversions by 7%.

How Boost AI Search & Discovery helps increase PSI Score

Using Server-Side Rendering in Boost TURBO to make storefront load 30% faster

Boost is dedicated to continuously improving your Shopify store's performance and Google PageSpeed Insights (PSI) score. This is where Boost TURBO, the latest version of our Frontend Library (Fe Lib), comes in.

It's a game-changer designed to significantly enhance your storefront's loading speed and deliver a lightning-fast experience for your customers.

How does Boost TURBO work?

TURBO operates behind the scenes to make your online store stand out and load within seconds. Its secret sauce lies in a special technique called "server-side rendering" (SSR).

This allows for faster initial page loads and a smoother overall user experience.

Our tests across various stores, ranging from small to large, showcase significant mobile page speed improvements compared to previous versions.

TURBO's pagespeed insight on Mobile

What about desktop? We've tested stores of all sizes, and TURBO consistently delivers impressive results across the board.

TURBO's pagespeed insight on Desktop

With TURBO, you can rest assured that your customers will enjoy a lightning-fast shopping experience, regardless of the device they use.

👉 Check out our detailed introduction to Boost TURBO and its advancement to help you boost your storefront performance.

Achieve Top PageSpeed Scores with TURBO

Take TURBO for a spin and see your Shopify store climb the Google PageSpeed Insights rankings, leading to better visibility and organic traffic.

What’s more? Your storefront itself will load much faster, saving you time and money in turning that traffic into potential sales.

TRY BOOST TURBO FOR FREE NOW

Reorganizing JavaScript, CSS files

In case you have no idea what JavaScript and CSS are and what we do with them, here is a short explanation.

“JavaScript is a logic-based programming language to modify website content and make it behave in different ways in response to a user's actions.”

Hubspot

Boost AI Search & Discovery uses JavaScript for our filter and search functions, so whenever you interact with the filter tree or perform a search on the search box, the website will return the correct results.

CSS or Cascading Style Sheets is also a programming language, but it works more on how elements of a website should look on the frontend of the page.

“CSS helps to style this content so it appears to the user the way it was intended to be seen.”

Hubspot

We can change the appearance of the filter tree, styling the search box thanks to CSS script.

To optimize those things, we split script files into three smaller folders for both JavaScript and CSS:

Filter function
Instant search function
Third-party libraries

By doing so, your website will only load the folder it needs for a particular user’s behavior. Also, many separate files can be loaded at once to reduce processing time.

We’ve also improved metrics by simplifying JavaScript, including the Total Blocking Time, Speed Index, and Time To Interactive.

We’ve improved metrics by simplifying CSS, including First Content Paint and more.

Removing unnecessary files

In addition to restructuring script folders, we also eliminate redundant files to make your website’s file size around 30% more compact. The code is simpler, meaning you have a faster script execution time.

Moreover, we've reduced the HTML complexity of the filter tree while still keeping the same look and functionality. This helps to accelerate the rendering time of the filter tree after each filter engagement.

Promising results so far!

An example of a store using a clean Debut theme that we tested. You can see the increase in page speed score from 88 to 93 after upgrading to the latest Boost app.

Before releasing the upgraded frontend library, we carried out an experiment to see if our time and effort would pay off.

We tested on several popular Shopify themes, including Debut, Turbo, Warehouse, and Prestige in both development stores and customers' stores (with their permission). The result was very positive.

The overall score on both desktop and mobile increased significantly. The highest score difference was up to 20 points on Google PageSpeed.

It’s important to note that the page speed can be affected by many factors other than our app. However, we are and we will keep doing our best to help your site run as fast as possible. That's what we can promise you.

Stay tuned for other good news from Boost and connect with us via Facebook, Twitter, and LinkedIn to get the latest updates in eCommerce.

Trusted by fast-growing brands

Start your 14-day free trial

Get started

Ellie Ho

•

Content Marketing Specialist

June 17, 2024

•

6 min read

There's More

How We Optimize Boost App To Improve Site Speed of Shopify Stores

Start your 14-day free trial

Related Posts

How Much Cost To Open A Shopify Store For SMBs. 4 Tips To Save Money On Your First Years

How We Optimize Boost App To Improve Site Speed of Shopify Stores

9 Elements Of High Converting Shopify Fashion Stores