Page speed apps

Highlighted
New Member
19 0 0

Hi all,

I'm in a bit of a dilema. I have used WP pretty much solidly the past two years for nearly all sites where you are spoilt for choice on plugins and many being free too and have always liked and found Prestashop very good for ecom in the past too.

This time I liked what I was hearing about Shopify and dived in perhaps too quickly and have spent a lot of time and money building my store here. I'm very happy with the look of my site bar one thing which is that the product images are not all the same size.

I ran all images through tinypng.com before adding to the site and then also ran both template and product images through an excellent app available here Minifier - Image and Website Optimization By Studio4 UAB using the Lossless system and then for others like background images where the quality is not so important ran through the Lossy system to reduce even further.

I cannot really do much more with my images but cannot find any other page speed performance apps for things such as minfy js/css/html etc do any exist?

http://www.webpagetest.org/result/150910_XB_12RV/ you will see here my site is taking over 12 seconds for the first visit which is just of no use at all.

Are there any apps I'm overlooking that can help here? I don't seem to be able to find any but thought I'd ask the community before I seriously start thinking about leaving Shopify already which I would really rather not do having spent so much time money and effort on it.

Many thanks

Tim

0 Likes
Highlighted
Shopify Expert
9852 98 1617

...cannot find any other page speed performance apps for things such as minfy js/css/html etc do any exist?

Shopify apps work differently to wordpress so I wouldn't expect such tools to exist. You've got control over the assets in your theme so you can minify the css and js. For css ideally you'd want to be using scss.liquid files since it minifies automatically.

HTML minification can be acheived as well but gets a little riskier. Your theme has to be ready for this. I've minified parts of mine (here) so you could look at the source to see what can be acheived.

Many themes in the store could do a better job of squeezing more performance IMO. They are decent, but there's improvements that can be made. Themes found off shopify (like on theme forest) are generally worse for performance.

Image however you're kind of stuck on. It would be nice to see image compression / controlled improved in the future.

Specifically on your home page:

  • Your site is loading 458 things on the home page
  • 20 css files. That's way too many.
  • 39 js files. Some could be app scripts, but again this number should be way less.
  • 195 images. Most of those probably don't need to be loaded right away, but rather on demand.

Those are not Shopify specific issues, but rather how the theme is built.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
New Member
19 0 0

Thanks Jason,

Appreciate the above and like I say I am talking to my theme dev about the issues so will forward the specifics you mention 

I've been looking at things in detail on GTmetrix and certainly looking closely at the JS files nearly all seem to be the theme, only a couple are app scripts from what I can see.

I am spending today looking at everything indepth as like I said I am very new to Shopify and things are very different here from WP where I think I probably would've been much better off sticking with but really too far down the line now to consider that now.

You clearly know what you're talking about having looked at your site, are there any specific Shopify themes you really rate with regards to performance? 

Best reagrds

Tim

0 Likes
Highlighted
New Member
19 0 0

Sorry Jason I didn't ask as  your site says booked out but just out of interest what sort of cost would you charge to fix the issues?

0 Likes
Highlighted
Shopify Expert
9852 98 1617

I guess if you've got a long history of using wordpress I can see the appeal. For ecommerce stuff I tend to avoid WP - but that's down to the experience I've had with both platforms. 

Interestingly there's not really any theme that I've seen that's a super star for performance. They are all decent, just not amazing. This might seem odd to the user, but I can see why that might be. Making a site super efficient generally comes at a cost of flexibility with future edits. It's better for the theme creators to find a middle ground that doesn't make it insane to edit later on.

I've got a theme in production that should be pretty cool and fast - of course finding the time to work on side projects is proving hard!

For you, you should be trying to at least:

  • Combine some of those css files.
  • Combine some of the js files (and minimise if you wanted to).
  • Try to lazy load some of the images (if possible).

Simply getting a bunch of those images to load a bit later could do wonders for your home load time. If you want to try a bit of DIY you can always post back here if stuck, and I can try and nudge you in the right direction.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
New Member
19 0 0

Thanks Jason,

Once again appreciate your time and words and offer of a little guidance if needed.

I need to get my head out of thinking in WP mode and start a fresh and get learning again. I understand the issues and what I'm being told by GTmetrix & co so it's just a case of me learning the Shopify way :)

Many thanks again

Tim

0 Likes
Highlighted
Shopify Partner
33 0 8

Hi,

I just quickly checked your site and run it through Google PageSpeed

There are some easy things you can tweak to get have faster pages and better PageSpeed rank.

For eg. on your product page in "Related Products" section you are showing "_large" images for products, but your CSS is allowing images to be only 263px in width (and height is autom. calculated) . "large" image in shopify is 480x480px, there is no need to show large image there, when you can show "medium" size (240x240px). 

Similar problem is in section below that - "Related items" (also consider renaming that, it's repetitive, maybe use some like: "Customer also liked" or some other phrase). There you are limiting images to 150px with css and then showing images with size "medium". You can use "compact" size which is 160x160px, it's gonna be perfect for that section

Again, on the right side, you have "Top related items", showing "medium" images but CSS size of image is 68x68px, you can use Small size 100x100 or Thumb size 50x50 and tweak your css to match that size.

You can find more about Shopify image sizes here: https://docs.shopify.com/themes/liquid-documentation/filters/url-filters#size-parameters

I noticed that there is room for more image compression as well, tested few images, think you can get ~ 5% more if you use latest loessless algorithams like Mozilla MozJPEG

I created an app image compression called Crush.pics, it's using latest open source algothams, like MozJPEG. If you want to test it I can give you free 500MB/month of compression. I think you will see ~ 5% drop if image size.

Compressing images will improve your PageSpeed score, here is one example from our test sites:

    • before compression PageSpeed score is 56/100https://goo.gl/HBg3ay

    • after compression PageSpeed score is 87/100https://goo.gl/fl3NXv

Cheers,
Dom

1 Like
Explorer
109 3 4

Hi, T_L_Shaw,

 

This is Song Fei from Giraffly company which develop apps for shopify. I see you are looking for page speed performance apps in this thread. 

 

Page speed is a very important thing for shop visitors. And we developed a page speed app for user like you. Here is our app's shopify store address: Page Speed Boost

 

The Page Speed Boost uses the cheating latency which helps you preloading a page right before a user clicks on it. There is a time between a user hover the mouse over a link and actually click on it. That time is so quick and people won't even notice while our App detects and takes a good advantage of that time and do a just-in-time preloading for that page. So when you click on that link, that pre-loaded page opens instantly. This principle works on mobile as well, as when a user touching a link and before releasing it leaves PageSpeed Boost a good time to preload that page.

 

You can click and see more instruction here:  Page Speed Boost

0 Likes
Highlighted
Tourist
16 0 2

Hi Tim,

 

One of the solutions our customers find useful for this kind of problem is CDN.  CDN stands for Content Distribution Network and it is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to customers. Because the servers are closer to the user making the request, a CDN is able to deliver content more quickly.

 

What I mean is that CDN servers cache content to reduce latency, and web browsers cache HTML files, JavaScript, and images in order to load websites more quickly.

 

We are creating a state of the art app specialized in improving mobile experiences with more than 400 positive reviews. One of them is PWA which is an app offering speed improvements thanks to caching features. It can bring speed boost when all the other options fail and is working on every possible theme. PWA by AmpifyMe can also make your store installable as an app on customers' mobile devices and works offline. PWA is a technology of the future every site should adapt in order to be in the market.

0 Likes