PageSpeed plays an important role in the store’s conversion rate. Learn some tips to improve your page loading speed, including factors outside of PageFly.
In this article, we will cover:
- Basic of Pagespeed Optimization
- PageSpeed depends on multiple factors outside PageFly
- 4 easy Tips to fasten your pagespeed
1. Basics of PageSpeed Optimization
1.1. What is PageSpeed?
PageSpeed is how fast a web page loads. It’s important because people are more likely to stay on a page that loads quickly.
1.2 How to Measure Pagespeed
Google recommends two tools for measuring page speed:
- Google PageSpeed Insights (PSI): This tool is easy to use and gives you a simple score and recommendations for improving your page speed.
- Lighthouse: This tool is more technical and provides more detailed information about your page speed, but it can be more difficult to use.
These tools give you a score between 0 and 100, with a higher score meaning that your page loads faster.
- A score of 90 or above is considered good, meaning that your page loads quickly.
- A score of 50 to 89 means that your page could load faster.
- A score below 50 is considered poor, meaning that your page loads slowly.
Which tool you choose depends on your needs and technical knowledge. If you are new to page speed optimization, I recommend starting with Google PageSpeed Insights.
1.3 What is a good pagespeed
Google says that a good page load time for an e-commerce website is 2 seconds or less. Most people will leave a website if it takes longer than 3 seconds to load. You can check here for more information about the Site Performance for Webmasters in Google Webmasters.
- If your website loads in 2.9 seconds, it is faster than approximately 50% of the web.
- If your website loads in 1.7 seconds, it is faster than approximately 75% of the web.
- If your website loads in 0.8 seconds, it is faster than approximately 94% of the web.
Google recommends that you should aim for a page load time of under 2 seconds.
1.4 How page loading time affects conversion rates
The faster your website loads, the happier your customers will be. This is because people are more likely to leave a website that takes longer than a few seconds to load. According to Akamai’s research, a 2-second delay in page load time increases bounce rates by 103%. This means that if your website takes longer than 2 seconds to load, more than half of your visitors will leave without even seeing your content.
Page loading speed also affects your Google ranking. In 2010, Google announced that page loading speed would be a ranking factor for desktop searches. In 2018, Google announced that page loading speed would also be a ranking factor for mobile searches.
Page loading time also affects your website’s conversion rate, which is the percentage of visitors who complete a desired action, such as making a purchase or signing up for a newsletter. According to Hubspot, a one-second delay in page loading time can reduce conversions by up to 7%.
2. PageSpeed depends on multiple factors outside PageFly
When you test your store’s speed score on Google PageSpeed Insights (PSI), there are a few things you should look at:
- Render-blocking resources: These are resources that prevent your page from loading until they have been downloaded and processed. This can include things like JavaScript and CSS files.
- Unused JavaScript: This is JavaScript code that is not needed for your page to load and render correctly.
- Unused CSS: This is CSS code that is not needed for your page to load and render correctly.
If you click on any of these factors in PSI, you will see a list of the resources that are causing the problem. Many of these resources may be coming from third-party apps or Google Fonts and PageFly is not a common factor that slows down stores.
Here are some common factors that can lead to slow page loading:
- Bulky files: Large images and flash graphics can take a long time to load, making your store slow. The more images your page has, the longer it will take to load. Larger files also take longer for the server to process and the user to render.
- Too many redirects: Redirects are used when you link to a specific address multiple times in your store. Redirects can slow down your store because they take time to process.
- Server location and performance: A good server will provide fast loading times. A dedicated server is even better, because it is not shared with other websites.
If you are concerned about your Shopify store’s speed, I recommend that you focus on the factors listed above. By addressing these factors, you can improve your page loading speed and increase your conversion rate.
3. Easy Tips To Fasten Your Page
This is a common question that many people ask when they own websites, especially online stores.
There are 4 things you can do to optimize your page speed:
- Optimize your images
- Reduce server requests and remove excess apps
- Build page with best practices
- Find the balance between UX and page speed
3.1. Optimize your images
Image is usually the cause of slow page speed and there are 3 main things you can do:
- Reduce the file size
- Resize your images on server
- Choose the right file format
3.1.1. Reduce the file size
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.
You can use some tools to optimize the media size:
- Image: https://tinypng.com/
- Gif: https://ezgif.com/optimize
3.1.2. Resize your images on server
This mentions the dimensions of the images which are being downloaded from your pages. Speed Boostr recommends loading images 1x – 1.5x the actual container size in the browser. This means that if you have a container that is 400px wide, you should load an image that is 400px – 600px wide.
There are some ways to make sure your images are the right size for your website:
- Resize your image by using tools:
-
- Adobe Photoshop
- GIMP
- Canva
- Use lazy loading: PageFly provides a Lazy load option in the Page Settings modal. This means that images below the fold will not be loaded until the user scrolls them into view. This can help improve your website’s speed.
- Use the ‘ scrset ’ attribute: The ‘ scrset ’ attribute allows you to specify different image sizes for different devices. This means that your website will automatically load the right size image for each device, regardless of screen size.
The ‘scrset‘ attribute should be added in the img code. You can find the img code in the theme.liquid.
Example:
3.1.3. Choose the right file format
In this post, we will talk about three of the most common image formats: JPG, PNG, and SVG. You can read here to check what file type that Shopify supports.
| Format | Pros | Cons |
| JPG | Small file size | Does not support transparent backgrounds |
| PNG | Supports transparent backgrounds | Larger file size than JPG |
| SVG | Scalable without losing resolution | Not as widely supported as JPG and PNG |
Which image format should I use?
- If you are using an image with lots of colors and less text, such as a photo, use JPG.
- If you are using an image with lots of text and less color, such as a screenshot, use PNG.
- If you are using a simple graphic, such as a logo or icon, use SVG.
3.2. Reduce server requests and remove excess apps
3.2.1. Remove excess apps
The more apps you use on your Shopify store, the longer it will take to load. This doesn’t mean you should uninstall all of your apps, but you should only use the apps that are essential for your business.
To decide which apps are essential, you can use Google Analytics or Hotjar to see which apps are driving the most traffic and conversions. You should also remove any apps that you haven’t used in a while.
3.2.2. Reduce page weight
Page weight is another important factor in load speed. Experts recommend that your page should be under 4MB, but ideally under 2MB.
Images are often the biggest contributors to page weight, so you should start by optimizing your images.
Here are some advanced methods to reduce page weight:
- Remove any unused code from your theme.liquid file.
- Use a lightweight theme.
- Minify your CSS and JavaScript files.
- Combine your CSS and JavaScript files.
These methods can be more complex and time-consuming to implement, so it is recommended to consult with an expert if you are unsure about how to proceed.
3.2.3 Fix server errors
These errors are often caused by the broken code or app code loading. Here is how to fix the errors:
- Open the Chrome web browser.
- Open the Chrome DevTools console by pressing Command + Option + J on Mac or Control + Shift + J on Windows.
- Visit a few pages on your website and look for errors (they will be in red).
- Fix the errors that are defined.
- If you cannot fix an error, contact a Shopify expert for assistance.
3.3. Best practices for optimizing page speed when building a Shopify page
3.3.1. Hero banner over slideshow
Using a single hero image with a clear message or call to action is often more effective than using a slideshow. Slideshows can add extra page weight and resources, which can slow down your website.
However, the best approach depends on your specific needs and goals. If you need to display multiple images or messages on your homepage, you may want to consider using a slideshow. But be sure to optimize your images and use a lightweight slideshow plugin.
3.3.2. “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.
3.4. 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.
4. 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. Top 3 key-factors for PageSpeed Optimization are
- 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.
5. Reference Cited
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
- 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/
6. Key Takeaways
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!
