Overview
PageSpeed plays an important role in the store’s conversion rate. This article provides easy-to-follow tips to improve your page loading speed efficiently, including factors outside of PageFly. First, let’s gain a basic understanding of what PageSpeed is and how to measure it.
In this article:
- Overview
- Requirements
- How to measure pagespeed?
- How to speed up your Shopify store?
- Use cases
- Tips and best practices
- Frequently asked questions
- Additional resources
What Is PageSpeed?
PageSpeed is how fast a web page loads. A faster-loading page improves user experience. It’s because visitors are more likely to remain engaged with quick-loading sites.
Requirements
- Image Optimization Tools: Use apps like Shopify’s built-in tools or third-party options such as TinyPNG for compressing images without losing quality.
- App Audit: A list of currently installed Shopify apps to review and remove any that are unnecessary.
How To Measure PageSpeed?
Google recommends two tools to measure your PageSpeed:
- Google PageSpeed Insights (PSI): This user-friendly tool provides a simple score and actionable recommendations to improve your page speed.
- Lighthouse: Offering more detailed insights, Lighthouse is geared towards users with a higher level of technical expertise.
Both tools rate your PageSpeed on a scale from 0 to 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, Google PageSpeed Insights is a good tool to start.
How To Speed Up Your Shopify Store?
This is a common question that many people ask when they own websites, especially online stores. Below are 4 important tips to speed up your Shopify-based store.
- Tip 1: Optimize Your Images
- Tip 2: Remove Excess Apps
- Tip 3: Reduce Page Weight
- Tip 4: Fix Server Errors
The tutorial video below will guide you through all the tips.
Tip 1: Optimize Your Images
The first tip is optimizing your images because they frequently make up the majority of a page’s weight, and page weight has an impact on how quickly a page loads.
1. Reduce The File Size
Reducing the size of your images helps to reduce the amount of space you need to store them. You can use some tools to optimize the image size:
- Image: https://tinypng.com/
- Gif: https://ezgif.com/optimize
2. Resize Your Images On Server
When adding images to your website, make sure they match the size of the space they’ll occupy. For example, if your space is 400 pixels wide, use images that are between 400 to 600 pixels wide. This helps your website load faster.
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, etc.
- Use lazy loading: When enabling the Lazy loading option, images will load slowly when they come into view, which improves PageSpeed. You can enable this feature easily:
- Go to the Page Settings modal.
- Scroll down to the Optimization menu.
- Tick the box labeled “Enable image lazy loading“.
- If you prefer not to apply Lazy loading option for the whole page, you can choose the lazy load option for individual image element by following these steps:
- Click on the image you want to have lazyload
- In General tab, scroll down to the Image loading > Select Lazy load
- 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 file.
Example:
Please follow those steps to access the theme.liquid file:
- From your Shopify admin, go to Online Store > Themes.
- Click … > Edit code > Find the theme.liquid file under the Layout folder.
3. Choose The Right Image Format
In order to choose the right image format, the first step is to determine the type of image you’re using. It could be a photo, a screenshot, or a simple graphic (like a logo or icon). Then, you can select a suitable format for your image based on Image Characteristics
- If your image has lots of colors and less text (e.g., a photo), choose JPG for its small file size.
- If your image has lots of text and less color (e.g., a screenshot), choose PNG for its support of transparent backgrounds.
- If your image is a simple graphic (e.g., a logo or icon), choose SVG for its scalability without losing resolution.
Tip 2: Remove Excess Apps
Having too many apps can slow down your website. To speed it up, it’s best to keep only the essential ones. Follow these steps to remove excess apps on your store:
Step 1: Decide Which Apps Are Essential
You can use Google Analytics or Hotjar to identify apps driving the most traffic and conversions.
Step 2: Remove an App on Shopify
After deciding essential apps, remove any apps that you haven’t used in a while:
- On your Shopify admin dashboard > Go to “Apps” from the sidebar menu.
- Find the app you want to remove on the Search bar
- Access the app and find the option to uninstall or remove the app from your Shopify account
Tip 3: 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. As a result, to improve the PageSpeed you should take this into consideration. Here are some recommendation to reduce the page weight:
1. Optimize Your Layout
Using the Gen 2 Editor instead of the Legacy Editor, you can reduce the number of nested containers on your page, which will make your page layout simpler and improve the page loading speed.
The steps to follow to build your PageFly page with the Gen 2 Editor are as follows.
- Step 1: In Pages tab from the sidebar menu, click on Create blank page button
- Step 2: Select your desired page type from the dropdown menu
- Step 3: Choose the Gen 2 Editor and start creating your page
2. Some Advanced Methods
Beside optimizing page layout, there are a few more sophisticated techniques to help you improve 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.
Tip 4: Fix Server Errors
These errors are often caused by the broken code or app code loading. Here is how to fix the errors:
- Step 1: On Chrome web browser, open the Chrome DevTools console by pressing Command + Option + J on Mac or Control + Shift + J on Windows.
- Step 2: Visit a few pages on your website and look for errors (they will be in red).
- Step 3: Fix the errors that are defined. However in case the error is not fixed, you might contact a Shopify expert for assistance.
Use Cases
- Optimize Product Pages: Compress images and streamline product descriptions to enhance page loading times for better user experience.
- Simplify Checkout Process: Reduce the number of unnecessary form fields or steps during checkout to streamline the process and decrease loading times.
- Monitor And Optimize App Usage: Regularly review and remove redundant or unused apps to prevent them from slowing down your Shopify store.
Tips And Best Practices
- Optimize Images Effectively: Choose a single hero image over a slideshow to reduce page weight and enhance loading speed.
- Embrace “Mobile First” Design: Prioritize mobile optimization as a best practice to cater to the increasing mobile traffic and improve user experience.
- Balance Performance: Strive for technical optimizations like removing unnecessary apps and fixing server errors to maintain a balanced website performance without compromising user experience.
Frequently Asked Questions
1. Are there any common server errors that can impact my store’s speed?
Yes, common server errors such as slow response times, timeouts, or server downtime can significantly impact your store’s speed.
2. How to determine if my store’s page weight is optimized effectively?
You can use website performance tools to analyze page weight and loading times.
