In this article, you will learn about PageSpeed, including the factors causing PageSpeed outside PageFly, and some ways to increase the page loading speed and learn how to speed up the Shopify store. PageSpeed plays an important role in the store’s conversion rate so you don’t want to miss this article
The basics of PageSpeed
What is PageSpeed?
PageSpeed is the length of time a page takes to display all content of any given website. In other words, PageSpeed measures how quickly a web page loads and all of us surely expect our pages load fast.
According to Google, 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.
PSI provides both lab and field data about a page. PSI brings many benefits as well as some disadvantages that you should know for your Shopify store.
Pros of PSI
We cannot deny that Google’s PSI is a great tool which provides page performance reports on both mobile and desktop devices and gives detailed recommendations for you to improve your page such as:
- Optimize images
- Minify CSS
- Minify JavaScript
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Leverage browser caching and reduce server response time
- Avoid landing page redirects
- Gzip compression
Google’s PSI should be considered for Shopify store owners to use because its recommendations are provided first hand by Google itself, which is worth taking into account.
PSI’s cons
Despite the PSI’s pros, there are also some drawbacks.
For people who have not much technical knowledge, it is quite cumbersome to use and can be very difficult to digest the complex data that PSI provides. It uses “developer speak” for the labeling language and it is too technical for many people.
In addition, with some Shopify themes – especially the Turbo theme – many speed-boosting techniques (smart image loading, infinite scrolling feature, etc) are not detected by Google’s PSI. For example, PSI cannot detect Turbo’s preloading feature because this depends on user behavior.
There is one thing you need to know that PSI scores for mobile devices depend on emulators, which are computer programs designed to mimic the behavior and performance of a page on a mobile device. However, emulators are not always accurate because some speed tools give you different results each time you test.
Keep in mind that Google’s PSI is a useful tool and can give you lots of great ideas, but often the recommendations can be quite difficult to implement.
How can we define the good PageSpeed?
In this article, we’ll introduce you to Google PageSpeed Insights. This is a useful tool for webmasters, developers, and anyone who owns any site. Thankfully, Google offers this tool for free so you can find out, examine and fix your website’s performance without shelling out a penny.
So the question here is, how can we define the good PageSpeed, or we can say in other words, the good performance score? This score is determined by running Lighthouse to collect and analyze data about the page. “A score of 90 or above is considered fast, and 50 to 90 is considered moderate. Below 50 is considered to be slow.”
And according to one study:
- If your site loads in 5 seconds, it is faster than approximately 25% of the web
- If your site loads in 2.9 seconds, it is faster than approximately 50% of the web
- If your site loads in 1.7 seconds, it is faster than approximately 75% of the web
- If your site loads in 0.8 seconds, it is faster than approximately 94% of the web
Maile Ohye demonstrated in the Site Performance for Webmasters in Google Webmasters that “2 seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half-second”.
And when it comes to reaching a good loading time, Google shows that 53% of mobile visitors leave a site that takes longer than 3 seconds loading time: this is what you should try to aim for.
The importance of page loading time and how it affects the Conversion Rate
According to Akamai’s research, a two-second delay in web page load time increases bounce rates by 103%, and if your website takes longer than three seconds to load, you could be losing nearly half of your visitors.
And it’s not the worst thing – the solution also coming from Akamai revealed that more than 40% of visitors who had bad experiences with a website’s performance would tell these to their friends and families.
So we can say that the quicker the website’s speed, the happier your customers will be. And this proves strongly the importance of PageSpeed to your websites and your online stores.
Obviously, PageSpeed is a factor that Google uses to rank websites. It even has a major impact on SEO rankings on desktop and mobile, especially with Google’s mobile-first index. Back in 2010, Google put PageSpeed as a ranking factor and it focused on desktop searches, but mobile page speed effectively became an official ranking factor in search results, starting in July 2018.
And when it comes to the conversion rate, the page speed also plays an essential role. Conversion rate is the percentage of visitors to your websites who convert as well as complete the desired goal (a conversion) out of the total number of visitors. For example, if your product page has 100 visitors, and there are 10 visitors clicking on the “Buy now” button (10 conversions), then your conversion rate is 10%. There are many factors affecting the website’s conversion rate but website performance has a big effect on it. And the studies indicate that page speed will make a better result in conversion rate. This can be understood that if your page loads quickly, the more likely a visitor is to take action on that page.
According to Hubspot, a 1-second delay means a 7% reduction in conversions. Also per Hubspot, it found that:
- Pages that loaded in 2.4 seconds had a 1.9% conversion rate
- At 3.3 seconds, the conversion rate was 1.5%
- At 4.2 seconds, the conversion rate was less than 1%
- At 5.7+ seconds, the conversion rate was 0.6%
And other companies have experienced that:
- Walmart’s conversions saw up to 2% increase for every 1 second of improvement in loading time.
- COOK increased conversions by 7% by reducing page load time by 0.85 seconds.
- WordStream improved page speed and got a 15% boost in conversion rates.
So if your stores have a low loading time, then your visitors won’t stick around and they will bounce. Stated differently, if your stores have a longer time checkout, your customers can give up. Pages load slowly gives people more time to change their minds.
In a nutshell, it is much better to catch and keep people during their visits and purchase decisions with fast loading time pages so this will lead them on the way to the conversion.
PageSpeed depends on multiple factors outside PageFly
If you test your store’s speed score on the Google PSI, there are the following factors that you should consider carefully:
Eliminate render-blocking resources
And when you click on each factor, you can see many sources that make your store slow come from other third-party apps and Google fonts. And PageFly is not the factor that makes your store loading slowly. You can check this store which made totally by PageFly https://storefly.pagefly.io/ with 95 scores on the desktop and 84 scores on the mobile.
Therefore, you should focus on these factors by reducing their unused code first and then check the image size to consider optimizing them.
Other factors which lead to slow page loading:
- Bulky files: Images and flash graphics need to take time to load and they can make your stores and websites run slowly if they haven’t been optimized. The more images your page has to load, the more time it will take. Bigger files mean it will take longer for the server to process that page, and longer for the user to render the page.
- Too many redirects: The redirects are used when you link to a specific address many times within your stores or website and it takes time to process all the URL shuffling. To put it briefly, when you place a redirect, it means that the user essentially has to wait for the page to load twice.
- Server location and performance: It is simply understood that a great server will get visitors quickly. A dedicated server will give you a faster loading time of your pages since there is no competition within the server.
How to optimize your site to make it load faster?
This is a big question so far that many people have asked when they own websites, especially online stores.
In this part, we include in some ways for you to apply to make your store run faster and quickly as well as reduce the loading time.
Optimize your images
Optimizing all your images to minimize their sizes and thus reduce the loading time. This work will help to remove the non-visible image information and improve high-efficiency compression techniques. In many cases, this can save your data of 50% or more.
There are 3 factors that complete the image optimization, they are compression, image size on the server and field type. We will go through these factors.
Compression
Reduce the size of your images with no difference in quality or color. It also helps to reduce the amount of space you need to store them.
Image size on the server
This mentions the dimensions of the images which are being downloaded from your pages. For instance, if you are allowed to upload a 2000px image to your theme code, that’s no good on a phone with a screen size of 400px. Speed Boostr recommends that you should load images 1x – 1.5x the actual container size in the browser. This can be solved by editing your liquid code to load smaller images or you can use the scrset. By using the scrset, it also helps your images to be responsive and work well on devices with widely differing screen sizes and resolutions.
PageFly provides you the Lazy load option in the Page Settings modal, so you only need to worry about scaling images above the fold because images below the fold will be hidden until the user scrolls them into view.
Field type
In this post, we primarily refer to JPG, PNG, or SVG.
JPG: You can use this format when images have a lot of colors and less text, such as photography. The file size will be very small compared to the PNG. This format doesn’t support transparent backgrounds, while PNG does.
PNG: You can use this format when images have lots of text and less color. This format provides much sharper text presentation.
SVG: They are often considered to be the best to use for graphics because they’re eternity scalable without losing resolution. Some kinds of images such as logos, icons, and non-illustrative graphics can usually be served as an SVG.
Reduce server requests and remove excess apps
There are 2 main components for reducing server requests.
Lazy loading
As mentioned above, PageFly provides you the Lazy load option, which helps you to optimize the page loading speed. It helps your pages load super fast. By using Lazy load for your page, we can see 10-30% of reduction in the page loading time.
In PageFly, you can increase page speed by turning on Lazy load in Page Settings. Consult this video on how to do it
App issues
Please bear in mind that the more apps you use for your store, the more time they need to load. This doesn’t mean you uninstall your apps, this means you should optimize your apps.
You should examine all your apps and keep the apps that are really useful for your stores (convert well). By using Google Analytics or Hotjar, you can decide whether your apps are useful or not.
Be careful with the code of old apps because sometimes, even when you uninstall them, their code is still on your page. You can find scripts and stylesheets in your theme.liquid file.
Some apps have scripts/CSS in the theme.liquid file because it can cover more use cases. If that app is only needed on the Product page, then that script should be only loaded on the Product page, not every page on your store. To solve this, you can consult the code below to limit resources to the only load where they’re needed: https://pastebin.com/raw/8W71JEG4.
There is one more thing you need to remember that every time you make any edits on your theme, you should duplicate it and work on the backup theme in order not to break the live theme.
Page Weight
This is the key factor in load speed and the experts recommend that your page should be under 4MB max. The expected goad is under 2MB. And in many cases, images are the heaviest factor contributing to the page weight so we should start with the image compression.
Try to reduce the oversized images
It is not good if you have images larger than 960px on Mobile or 1500px on Desktop. And to prevent these, you can use the Lazy load option to prevent “under the fold” images from loading on page load, then using srcset to load dynamically sized images ‘above the fold’.
Technical optimization work
Fix server errors
These errors are often caused by the broken code or app code loading. Here is the way you can quickly access to fix with these steps below:
- Open Chrome web browser
- Open Chrome Dev Tools console (Command + Option + J in Mac, Control + Shift + J in Windows)
- Go through a few pages on your site and look for errors (they’ll be in red)
Design Shopify speed optimization work
We highly recommend using the Hero
You can use the single hero image with a nice and cool style and a message or CTA. You can use Sliders too but they can add extra page weight and resources.
The recommendation is not truly 100% so you can use A/B testing to decide which is the most suitable for your site.
“Mobile first” design
Currently, the mobile traffic coming to Shopify stores is increasing more and more so the “mobile-first” design is pretty important and it is the key feature for user experience.
Regarding the mobile-first design, this guide explains specifically the mobile performance and how to optimize it, you can check it.
Performance is balance, always!
Yes, you should remember this because we want the balance between the technical optimizations which don’t affect user experience, design or the UX, analyze and test.
Summary
Relax and keep this article in your bookmarks to refer to as and when you need it, it will surely help you a lot when it comes to optimizing your page speed. Be your customers to experience in your own stores and you will realize much more than you imagine. The top 3 key-factor to make your page speed faster you can bear in your mind if you have a limitation on time or even your finance:
- Image optimization
- Lazy load
- Apps analysis and optimization
You can start now to optimize your Shopify stores, and you will see and enjoy the result.
Last but not least, as Speed Boostr said that: PSI score does not correlate to actual speed, and is not a good metric for Shopify stores with 3rd party apps:
- The truth about Google PSI for Shopify
- Google PSI score is not equal to load speed
- How apps affect load speed (and PSI score)
Regarding the PageSpeed, you can read more here about how to speed up website load time to capture sales guide. It can help you much in improving the store’s load time progress
Reference Cited
- https://speedboostr.com/shopify-optimization/
- https://speedboostr.com/google-psi-for-shopify/
- https://speedboostr.com/case-study-google-psi/
- https://speedboostr.com/how-apps-affect-load-speed/
- https://developers.google.com/speed/pagespeed/insights/
If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!
