Hello Folks,
Greetings for the day.
Wish you all are doing great with Shopify. If not let us know and we are there to help you with conversions on your Shopify store.
As active contributors in the community, we often come across questions on how to increase your Shopify store speed. We remember answering 100s of merchants with the solution on how to fix slow loading pages on Shopify or how to boost the speed of your Shopify store.
Though speed has always remained an issue with online stores globally, the question is why this problem occurs very often and how to fix this permanently.
Now before moving to the solution we must tell you why this problem occurs.
Also, it must be noted that the solution we have provided here is only for those merchants who are technically sound and well-versed with liquid code.
When your store script gets heavier it is intended to load slowly on the user’s device.
(Note: CedCommerce Experts offers the only free and smart way to Increase your Shopify store speed for higher conversions, inbox us to know more about it)
So what makes your store script heavier and how to optimize it?
The speed of your Shopify store is hampered by a lot of factors, the most common factors that reduce the speed of your store are stated below.
- Third-party scripts
- Third-party CSS files and app scripts
- Too many plugins and widgets
- Unused JS and CSS
- Not-optimized large Images or Videos
- Designing ( CLS ) issues
These factors heavily affect the page speed of your website. But the real question remains how do you improve and optimize your page speed without hampering the look and feel of your online store and without degrading the user experience?
Now before you can take the curative measures of improving your page speed, you must know the disease properly, so how do you track what is affecting your webpage?
Here are some ways to check your web page load speed :
To check your web page speed via google follow the steps below:
- Open your web store on Google
- Open the Menu Bar and Go to More Tools > Developer Tools > Lighthouse
- Now click on “Analyze Page speed”
- Check your page’s performance report and analyze the issues
There are also other trusted websites that can help you check your webpage speed.
You can analyze the page speed issues with the help of the above websites and then take the corrective measures as suggested below.
The most common methods that need to be accomplished for improving the page speed of your website are provided below:
- Remove unused JavaScript.
- Optimize the third-party scripts such as Facebook and google tag manager to reduce the total blocking time(TBT).
- Improve CLS score.
- Eliminate render-blocking resources.
- Use minified CSS and JS files.
- Replace GIFs with Static Images.
- Reduce large image sizes.
- Image compression is important for faster loading of web pages. Make sure your images are of good quality.
- Avoid too many images on a single page.
- Prioritize fonts from the Shopify admin panel.
- Use Font-display property as a swap.
- Replace GIFs with static images.
- Remove third-party JS scripts and Shopify App which you are no longer in use.
- Disable unused app features.
- Clear app data while removing an unused app.
- Avoid multiple page redirects.
- Use video formats for animated content.
- Preload the LCP image.
- Avoid large layout shifts.
- Set width and height on image elements to reduce layout shifts and improve CLS.
- Avoid large GIFs for animated content, consider using MPEG4/WebM videos for animations and PNG/WebP for static images.
We have also briefed some of the processes that are vital to improving page speed.
1-) Reduce the impact of third-party code
Third-party code blocked the main thread
(There are a few third-party codes that reduce masks request while loading the page like Facebook, TikTok, Google Tag Manager, Instagram, etc we can make the theme execute after some time when the whole page gets displayed )
2-) Do not use passive listeners to improve scrolling performance
(It enables developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.)
3-) Minimize main-thread work
(Remove third-party JavaScript, Cut the complexity of your styles and layouts)
4-) Avoid an excessive DOM
(We Can Reduce The DOM size To Increase The speed )
5-) First Contentful Paint
( According To Lighthouse FCP Must Be Below 1.2 )
6-) Reduce JavaScript execution time
(Javascript code can be optimized and compressed )
7-) Serve static assets with an efficient cache policy
(Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user’s browser.)
Avoid chaining critical requests
(The “avoid chaining critical requests” warning simply means that critical resources needed to load the web page are overly large in size.)
9-)Largest Contentful Paint element
(There must be any element that is the largest and takes so much space)
10-)Avoid large layout shifts
(These large layout shifts can be reduced by using media query and fixing the image by assigning width and height of images )
11-) Eliminate Render Blocking resources
( We must work on removing certain scripts and CSS files that are blocking the page execution. So we preload these resources in order to ensure that they are loaded as soon as the page loads.)
However, it is only suggested to work on the above-provided guide to optimize page speed, if you are well versed with Liquid code.
In case you are not well versed and less experienced with Shopify codes you are advised to contact an Expert agency like us who can help you fix the issue without affecting your website.
Feel free to Inbox us if you need any help with Shopify.
All the best,
Team Cedcommerce