In this article, you’ll learn about page speed, including what causes page speed to slow down, it can be caused by factors outside of PageFly’s scope, and some ways to improve your store’s page speed. Page speed plays an important role in your store’s conversion rate, don’t miss this article.
The Basics of Page Speed
What is page speed?
Page speed is the time it takes to display all the content on a website page. In other words, page speed is a measure of how fast a page loads, and we all expect our pages to load fast.
PageSpeed Insights (PSI), provided by Google, measures the performance of a page on mobile and desktop devices and provides recommendations on how to improve that page.
PSI provides laboratory data and field data on the pages. There are pros and cons to using PSI for your Shopify store.
Advantages of PSI
We can’t deny that Google’s PSI is an excellent tool that provides reports on page performance on mobile and desktop devices and gives you detailed suggestions for improving your pages, such as:
- Optimize images
- Minify CSS
- Minify JavaScript
- Eliminate render-blocking JavaScript and CSS in collapsed content
- Reduce server response time with browser caching
- Avoid login page redirects
- Gzip compression
Shopify store owners should consider using Google’s PSI, as its recommendations come directly from Google itself and are worth considering.
Disadvantages of PSI
Although PSI has advantages, it also has some disadvantages.
It can be cumbersome to use for someone without a technical background, and it can be difficult to understand the complex data provided by PSI. It uses “developer language” which is too technical for many people.
Also, for some Shopify themes (especially Turbo themes), Google’s PSI fails to detect many speed-up metrics (smart image loading, infinite scroll feature, etc.). For example, PSI cannot detect Turbo’s preload feature because it depends on user behavior.
Also you need to understand that the PSI score for a mobile device depends on an emulator, which is a computer program designed to simulate the behavior and performance of a page on a mobile device. However, emulators are not always accurate, as some speed tools will give you different results each time you test.
Google’s PSI is a useful tool that can give you many suggestions, but these are often difficult to implement.
What is good page speed?
In this article, we will introduce you to Google PageSpeed Insights. This is a useful tool for webmasters, developers, and anyone who owns any website. Thankfully, Google provides this tool for free, so you can find, check, and fix your website’s performance without spending a cent.
Here comes the question, how do we define good page speed, or in other words, what is a 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, while a score of 50 to 90 is considered moderate. Below 50 is considered slow.”
One study showed that:
- If your page loads in under 5 seconds, this is about 25% faster than the page
- If your page loads in under 2.9 seconds, this is about 50% faster than
- If your page loads in under 1.7 seconds, this is about 75% faster than
- This is faster than about 94% of pages if your page loads in under 0.8 seconds
Maile Ohye states in Google Webmaster’s Webmaster Site Performance , ” 2 seconds is the threshold for e-commerce site acceptability. At Google, we aim for less than half a second .”
When good load times are achieved, Google shows that 53% of mobile visitors choose to leave when a page load event exceeds 3 seconds: so achieving good page speed is what you should be trying to achieve.
The importance of page speed and its impact on conversion rates
According to research by Akamai, a two- second delay in page load time results in a 103% bounce rate, and if your site takes longer than three seconds to load, you could lose nearly half of your visitors.
That’s not the worst thing – the solution from Akamai also shows that over 40% of visitors tell their friends and family about a poor experience with site performance.
So we can say that the faster your website is, the happier your customers will be. This is a testament to how important page speed is to your website and online store.
Obviously, page speed is a factor that Google uses to rank websites. It can even have a major impact on desktop and mobile SEO rankings, especially Google’s mobile-first indexing. Back in 2010, Google included page speed as a ranking factor and focused on desktop searches, but starting in July 2018, mobile page speed has actually become an official ranking factor in search results.
Page speed also plays a vital role when it comes to conversion rates. Conversion rate is the percentage of visitors on your website that convert and complete their intended goal (conversion). For example, if your product page has 100 visitors, and 10 visitors click the “Buy Now” button (10 conversions), your conversion rate is 10%. There are many factors that affect a website’s conversion rate, but the performance of a website can have a big impact on it. Research shows that page speed will increase conversion rates. Understandably, if your page loads quickly, your visitors are more specific about making purchases or other behaviors on that page.
According to Hubspot research, a 1 second delay means a 7% reduction in conversions. Also according to Hubspot:
- With a page load time of 2.4 seconds, there was a 1.9% conversion rate.
- With a page load time of 3.3 seconds, there is a 1.5% conversion rate.
- When the page load time is 4.2 seconds, the conversion rate is less than 1%.
- There is a 0.6% conversion rate when the page load time is more than 5.7 seconds.
Other companies have also experienced:
- For every 1 second reduction in load time, Walmart’s conversion rate increased by 2%.
- COOK increased conversions by 7% by reducing page load time by 0.85 seconds.
- WordStream improves page speed and increases conversion rate by 15%.
So, if your store takes a long time to load, your visitors won’t linger and just jump out. In other words, if your store takes longer to checkout, your customers can give up. Slow page loads give people more time to change their minds.
In short, it’s best to capture and retain visitors during the visit and purchase process, with fast load times to get them to make a purchase decision, so that it leads them towards conversion.
Page speed depends on multiple factors other than PageFly
There are many different factors that contribute to the load time of a page, these are listed below:
- Inefficient code: The more complex the store, the larger the amount of code. If your store contains a lot of inefficient code, the speed of the store will slow down because the server has to do more work to get enough information it needs.
- Oversized files: Images and Flash graphics take a while to load and can slow your store and website if not optimized. The more images the page has to load, the more time it takes. The larger the file, the longer the server takes to process the page and the longer it takes for the user to render the page.
- Multiple Redirects: Redirects are used when you link to a specific address in a store or website multiple times, and it takes time to process all the URL shuffling. In short, when you put a redirect, it means that the user actually has to wait for the page to load twice.
- Server Location and Performance: Simply understand that a great server will attract visitors quickly. A dedicated server will give you faster page load times because there is no competition inside the server.
How to optimize your website to load faster?
This is such a big question that many people ask it when building websites, especially online stores. In this section, we’ll give you a few suggestions to make your store run faster and faster and reduce load times.
Optimize images
All images are optimized to minimize size, thus reducing loading time. This work will help to eliminate invisible image information and improve efficient compression techniques. In many cases, this can save 50% or more of data.
There are 3 factors to accomplish image optimization, they are compression, image size on server and field type. We continue to explain these factors next.
compression
Reduce the size of an image without losing quality or color differences. This helps reduce the amount of space required to store them.
image size on server
Mentioned here is the image size on page load. For example, if you use a 2000px image in your theme, it won’t work on a phone with a screen size of 400px. Speed Boostr recommends that you use images 1 to 1.5 times the size of the actual container in the browser. This can be fixed by editing the liquid code to load smaller images, or scrset can be used . By using scrset , it can also help your images become responsive and work well on devices with widely varying screen sizes and resolutions.
PageFly gives you the lazy loading option in the page settings , so you only need to care about scaling the image above the fold, because the image below the fold will be hidden until the user scrolls it into view.
Field Type
In this article, we mainly refer to JPG, PNG or SVG.
JPG: This format can be used when the image is rich in color and less text, such as photography. The file size is very small compared to PNG. This format does not support transparent backgrounds, while PNG does.
PNG: This format can be used when the image has more text and less color. This format provides a clearer text representation.
SVG: They are generally considered the best choice for graphics because they can be permanently scaled without losing resolution. Certain types of images, such as logos, icons, and non-descriptive graphics, can often be used as SVG.
Reduce server requests and remove redundant applications
There are two main techniques to reduce server requests.
lazy loading
As mentioned above, PageFly provides you with lazy loading option which can help you optimize page loading speed. It helps your pages load quickly. By using lazy loading for pages, page load times are reduced by 10-30%.
You can watch this video to learn how to improve page speed with PageFly’s lazy loading
application problem
Remember, the more apps you use on the store, the more time it will take to load. This doesn’t mean you want to uninstall the app, but you should optimize the app.
You should check all the apps and keep the ones that are really useful to the store (the ones that convert well). By using Google Analytics or Hotjar, you can decide if your app is useful.
Be careful with the code of old apps, because sometimes their code will still appear on your page even after uninstalling them. You can find scripts and stylesheets in the theme.liquid file.
Some applications leave scripts/CSS in the theme.liquid file because it can be used for more use cases. If the app is only required on the product page, the script should only be loaded on the product page, not every page in the store. To solve this problem, you can refer to the following code to restrict resources to be loaded only where they are needed: https://pastebin.com/raw/8W71JEG4.
One more thing you need to keep in mind, every time you make any edits to the theme, you should copy it and deal with the backup theme so as not to break the live theme.
page size
This is a key factor in loading speed, and experts recommend that your maximum page size should be less than 4MB . The best target is less than 2MB . In many cases, the image is the factor that causes the page size to become larger, so we should start with image compression.
Reduce overly large images
An image is considered too large if it is larger than 960px on mobile and 1500px on desktop. You can use the lazy loading option to prevent the “collapsed” image from loading on page load, then use srcset to load the dynamically sized image “after the collapsed”.
Technical optimization work
fix server errors
These errors are usually caused by code or application loading. You can quickly access to fix it by following these steps:
- Open Chrome browser
- Open Chrome Developer Tools ( Mac: Command + Option + J, Windows: Control + Shift + J)
- Browse a few pages on your site and look for errors (errors are shown in red)
Design optimization work
We strongly recommend that you use Hero
You can use a single hero image with beautiful style along with a message or summon action. You can also use slideshows, but they increase the size of the page.
This advice is not 100% correct, you can use A/B testing to determine what works best for your site.
“Mobile First” Design
With more and more mobile traffic coming into your Shopify store these days, a “mobile-first” design is very important, it’s a key indicator of user experience.
For mobile-first design, you can refer to this guide dedicated to mobile device performance and how to optimize it.
Always maintain a performance balance!
Yes, you should keep this in mind as we want to find a balance between technical optimization of design or user experience, analysis and testing without compromising user experience.
concluding remarks
Relax now and bookmark this article for reference, it will definitely help you a lot in optimizing your page speed. Think of yourself as your customers experience in your own store, and you’ll find more problems than expected. If you’re having trouble with load times or even financials, then consider the top 3 key things to improve your page speed below:
- Image optimization
- lazy loading
- Application Analysis and Optimization
Start optimizing your Shopify store today and you’ll enjoy the results.
Finally, as Speed Boostr says: PSI score doesn’t correlate with actual speed, it’s not a good metric for Shopify stores with third-party apps:
- About the authenticity of Google PSI in Shopify
- Google PSI score is not loading speed
- How Apps Affect Loading Speed (and PSI Score)
Regarding PageSpeed, you can read more about how to speed up website load times for a sales guide here . It can help you improve the loading time of your store.
reference
