Can you check the speed of a theme that has not been published yet?

Technical Q&A
,
1

I have recently got an updated version of my theme (Spark) as my current version is very slow. I was wondering if I can check the speed of the updated version (which I have not published yet but I did copy the codes from my old one (json))

I don’t want to publish and potentially loose my old version if the speed is still the same.

2

Hello @LSAccounting ,
Please share your updated website preview link.

3

@MandasaTech

https://www.lsaccountingfirm.com/?_ab=0&_fd=0&_sc=1

This is the one that has updated and is in my theme library - I haven’t completely updated everything.

https://www.lsaccountingfirm.com/

This is my original with the low speed levels.

I think these links do not work anyway because once you try to access the updated version which has not been posted it takes you to the old one.

TIA

4

@LSAccounting ,

Please share preview Link -

https://www.lsaccountingfirm.com/?_ab=0&_fd=0&_sc=1
It’s you live website URL

5

@MandasaTech This was the preview link.

6

@LSAccounting ,

I have checked your store. Here is the score.

oscprofessional_0-1669191080663.png
oscprofessional_0-1669191080663.png1671×961 118 KB

I have gone through your store. It really looks nice. You have chosen the best-known e-commerce solution Shopify platform currently on the market.

Optimizing your Shopify store is time-consuming. Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize the themes, file sizes can increase and affect your store speed.

Google PageSpeed Insights is a free tool to help you find and fix issues slowing down your web application. Get your PageSpeed score and use PageSpeed suggestions to make your website faster through our online tool.

You need to work on the following points :

  • Theme Upgrade if there is a scope and upgraded theme available
  • Reduce JS Payload.
  • Use Critical CSS.
  • Replace GIFs With Static Images
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Shopify Apps
  • Preload Web Fonts.
  • I would suggest limiting to one and using a standard web font.

By fixing these issues, your website speed score can definitely improve.

If you’re looking to improve your Shopify store’s site performance or SEO.

For more details please check the link below.

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything is missed out or unclear then don’t hesitate to ask.

We will surely help you.

Have a nice day !

1 Like
7

Hello @LSAccounting ,

First, you need to bring all the required changes from your old theme to your new theme. Then you can compare the speed and publish anyone of them. As we have checked both the themes have the same website speed score.

In case you find your speed to be average or poor, you need to work on the following below-mentioned points :

Note: We advise you to follow the below suggestions only if you are familiar with the Shopify theme or liquid.code, else please refrain from this and ask a Shopify developer to help you with it or connect with us.

  • Reduce unused JavaScript
  • Reduce and Eliminate render-blocking resources
  • Use minified CSS and JS files
  • Replace GIFs With Static Images
  • Reduce Large Image Sizes
  • 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 tools like tinypng
  • Firstly try to find fonts from the Shopify admin. If the third-party font is required then should upload to the Assets folder.
  • Use the Font-display property as a swap.
  • Replace GIFs with static images
  • To reduce the initial load time, you can use the Lazy load technique
  • 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 the code that was added as part of the app install process.
  • Avoid multiple-page redirects
  • Use video formats for animated content
  • Preload the Largest Contentful Paint image
  • Avoid large layout shifts
  • Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
  • Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.
  • Apply lazy loading on video

Check the below images for references.

Cedcommerce_0-1669191994702.png
Cedcommerce_0-1669191994702.png300×146 19.7 KB

image.png

Cedcommerce_1-1669191994707.png
Cedcommerce_1-1669191994707.png300×147 19.8 KB

image.png

Hope it helps, let us know if you need any further help.

Regards,

CedCommerce

1 Like
8

@oscprofessional Hi!

So the score you have checked is for my existing website. My question was regarding the theme update that I have not yet published.

But thank you for the tips, I will definitely go through them and complete what I can as when it comes to things like reducing JS payload, preloading web fonts or migrating tracking codes to google tag manager - I have no idea what any of these mean!

9

@LSAccounting ,

May be you should have an expert Shopify developer.

10

@Cedcommerce

Hi!

Unfortunately, same with the answer above yours. The speed you have been comparing are for the same existing theme rather than one for the already published and one for the one that has not been published yet.

Thank you for providing tips for speed optimising however, most of these I have no idea how to do. I.e., reducing the render blocking resources.

11

@oscprofessional

I did try to find one to help me but no response from the Shopify Team regarding that as of yet unfortunately.

12

Hello @LSAccounting ,

Okay, then we suggest you hire a Shopify expert who will optimize your website speed for any of your themes whether it is published or not.

13

Hi there,
Pls follow the instructions in the images below to get the preview link
https://prnt.sc/cImhuy8ZihEb
Then pls kindly use Google Page Speed to measure your speed score and compare it with your current score without publishing the edited theme