Why did my site speed score increase after compressing images?

Dchan04
Excursionist
24 0 4

Hi, Yesterday (5/11), I went through my Shopify site and compressed around 200 images on our site to increase site speed. However, today, the speed report for our site went from 29 to 32. Can someone take a look to see why it went up even though I compressed images, as well as some advice as to how to lower the speed score?

 

 

Replies 9 (9)

flareAI
Shopify Partner
2405 223 535

Hello @Dchan04,

 

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Follow the below steps to increase the site speed.


1. You can use Google PageSpeed Insights to view more detailed metrics for pages in your store.
2. To reduce the initial load time, you can use Lazyload technique
3. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.
4. Replace GIFs with static images
5. Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.
6. Image compression is important and a necessity for faster loading web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tool like https://tinyjpg.com/.
7. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
8. Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.
9. Use minified CSS and JS files
10. Use a theme which is optimized for performance means a theme which is responsive, fast, and takes minimal time to load the page.
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.
11. Using slideshow, which are high-quality images combined with transitions, take time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
12. Loading extra data your customers aren't using can impact your store speed without adding value.
13. Use a System font which is a font that is already installed on most computers. For example: Segoe UI, Times New Roman. If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
14. Minimize HTTP requests. For example: Combine & inline your CSS scripts
15. Remove third-party JS scripts and Shopify App which you are no longer using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.
16. Avoid unnecessary redirects and fix broken links


For getting better conversions, make sure your store products are Found on Google. We created flareAI to grow your store on Google, the world's biggest and most trusted FREE sales channel. As a Google partner, flareAI will submit your products to free channels on a daily basis. Once your product is found on Google, you don't need to do a thing. Customers will keep finding your product day after day. flareAI will help to scale your site sustainably at NO Agency fees, NO Pay-per-click, NO paid marketplaces. With flareAI, your store can access Google Search and 20+ free sales channels.


Hope these steps will help in loading your website faster.


Gina
Add flareAI Shopify App today!

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing

speedboostr
Trailblazer
136 20 26

@Dchan04  the score with that tool is based on 100 points, and algorithmically gives you a score from 1 - 100 based on potential speed factors on your store. It's basically just importing the results from Google PageSpeed Insights - a general performance analysis tool.

 

That tool can be misleading for ecommerce sites because it's heavily based on the apps you use, but for ecommerce sites with apps (like Shopify) these apps help improve your conversion rate and increase sales, which is the main goal (I assume) of your business.

 

A 32 is pretty good with that tool, most active stores we see score between 20 - 40, but it depends on the apps behind used mainly.

 

Here's what we recommend (we are Speed Boostr, a team of optimization focused Shopify developers that have improved the speed of over 1500+ Shopify stores).

 

1. Optimize the standard points for a Shopify site - you can use the Shopify Analyzer, a free tool for Shopify stores, to easily see issues + how to fix them.

 

2. After you've optimized your theme and images fully, move on to app optimization. This can be a little more tricky but we made a guide to help you: App Optimization Guide for Shopify.

 

3. If you're still not satisfied with your speed you can contact our team of Shopify optimization experts for a free analysis at speedboostr.com/contact.

 

If you want to learn more about how scoring systems and analysis tools work, we've compiled a guide + data from case studies here: https://speedboostr.com/understanding-load-speed-on-shopify.

 

Good luck on your optimization journey, feel free to reach out if you need help.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).

oscprofessional
Shopify Partner
15854 2371 3074

 

@Dchan04 ,

Can you share the URL so that I can see your site suggestion?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

SMustafa01
Tourist
21 0 1

Hi @Dchan04  kindly share your website URL so I can guide you better

Want to modify or develop a Shopify Store, Hire me.
If helpful then please Like and Accept the Solution.
Email: support@smustafa.com

Website: smustafa.com

Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing | Shopify Speed Optimization | Shopify Dropshipping Support
Dchan04
Excursionist
24 0 4
SMustafa01
Tourist
21 0 1

Hi @Dchan04 thanks for your reply I just checked your website and currently it's in a very alarming situation. 

Want to modify or develop a Shopify Store, Hire me.
If helpful then please Like and Accept the Solution.
Email: support@smustafa.com

Website: smustafa.com

Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing | Shopify Speed Optimization | Shopify Dropshipping Support

SeedGrow
Shopify Partner
13 0 3

Shopify is already compressing your images so you don’t have to.
Pay attention to those code remnants, there might be leftover scripts of those uninstalled apps. 

Creating an effective product showcase!
Vario - Variation Swatches

EXPO ‑ Extra Product Options

Stacy_Zhuk
Shopify Partner
419 20 60

You should remember that the height and width of the images you upload to your Shopify store also affect your page load speed. So, size your images appropriately. A common mistake some people make is uploading a large image and simply shrinking the dimensions through source code. This method can increase your page load time since the browser has to load the original image first and then adjust it to the desired dimensions.

It’s best to steer clear from this practice if you want to optimize images for a store as much as possible. Instead, upload the correct size image you need to keep the dimensions of the output image the same as the dimensions of the original image.

 

I suggest you should take a look at this article https://whidegroup.com/blog/shopify-image-optimization-guide/ to find out more details about how to optimize images for Shopify.

Here https://whidegroup.com/blog/shopify-performance-optimization/ you can get full information about how to increase a Shopify website speed.

Co-founder at Whidegroup, e-commerce development company from Ukraine
- 10+ years of experience with SMBs
- Deep expertise in custom development & optimization
E-mail: anastasia@whidegroup.com
speedboostr
Trailblazer
136 20 26

@Stacy_Zhuk  with Shopify you actually do want to use code to control the images, so you can serve large images on desktop and small images on mobile, scaled on the server (not the browser).

 

If you're not familiar, Shopify calls them url filters: https://shopify.dev/api/liquid/filters/url-filters.

 

The best method we've found for serving perfect image sizes responsively is to use URL filters in combination with html's srcset attribute on images to serve the correct image size from the server according to the optimal image size served based on the device.

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).