Page Speed Issues

Highlighted
Excursionist
17 0 6

Hi I have been using Google Pagespeeds Insights to check out my site. I have a few issues with the following

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

Optimize CSS Delivery of the following:

Also I have this as another area that needs to be looked at

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Enable compression for the following resources to reduce their transfer size by 98.4KiB (66% reduction).

 

Any advise will be very greatfully recieved. 

Many thanks

Danny Kirk

6 Likes
New Member
39 0 0

Anyone? I'm having the same issues.  Not much out there to fix Shopify specific sites.

0 Likes
Excursionist
13 0 6

I'm having the same page loading issues with Shopify and Google Pagespeeds Insights has given me similar recommendations. Having a feature that enables gzip compression would have the most impact on page load times. Is there any solution for this?

0 Likes
Shopify Partner
33 0 8

Hi all,

unfortunately some of the issues are hard to fix. Some resources are not even on Shopify server, so you don't have any control of them.

What you could do is to Minify JS and CSS files that are on your server. Just google "minify js" or "minify css" and you'll get a ton of free tools.

I would suggest to keep your original JS/CSS files and use different name for minified files (for eg. myjsfile.min.js)

Another thing you can do is to compress images. We created an app for lossless image compression - Crush.pics

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

Hope that helps.

Cheers,
Dom

1 Like
Shopify Expert
9349 0 1229

@Dom - those two links you posted are not a fair comparison at all. One site (the slower one) loads a lot more images than the the other. You should really set up a true test before posting speed results.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
33 0 8

@Jason, thanks for catching that!

I forgot to include "Related products" widget on optimised theme. Now that I included, I noticed one easy fix I can do to get better score on both optimised & unoptimised versions. After implementing fix, new results are:

Google doesn't care how many images you have, only if they are optimised and if you are using right image size in place (for eg. don't use 600x600 image and then in CSS resize image to 300x300)

So even with all this new images in related products, PageSpeed score stays same.

That said, it's always better to have less images, because page will load faster and faster loading is in direct correlation with better conversion rates.

Thanks again.

Dom

1 Like
Shopify Partner
1157 0 51

That said, it's always better to have less images, because page will load faster and faster loading is in direct correlation with better conversion rates.

This is a bit of a blanket statement and potentially misleading. High quality images also play an important part in driving conversion rates (particularly for fashion sites) and it is fine to use as many as you need (as long as they don't slow down page load time). You can avoid slowing down page load time, even for non Shopify hosted resources, using lazy loading techniques (for example this). Even better for mobile if you can provide responsive images based on device resolution (more here).

Don't get me wrong - faster page load time is a good thing (and your App for optimizing images sounds great). But there are a lot of factors that should be considered regarding conversion rate than just the technical aspects.

Take a look at our Apps: www.bookthatapp.com ♥ www.searchifyapp.com ♥ www.productsassistant.com
1 Like
Shopify Partner
33 0 8

@BBG You are absolutely right. I didn't express myself correctly. I was thinking about images loaded with initial page render - one that will slow down page load time. 

There are lot of parameters that affect page speed, but images usually play big role. Without using lazy loading or other techniques, page load time can easily go way above 2-3 seconds and that will kill conversions.

Here are some numbers from https://blog.kissmetrics.com/loading-time/:

  • 40% of people abandon a website that takes more than 3 seconds to load
  • 47% of consumers expect a web page to load in 2 seconds or less
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year

Another good follow up article: https://blog.kissmetrics.com/speed-is-a-killer/

Like you said, use many images as you like, but keep an eye on initial page load time, that one should be optimised for < 3 sec.

Dom

1 Like
Excursionist
13 0 6

@Dom I'm having some serious speed issues with my website and I'm wondering if it's specific to the theme I'm using or not as it is not premium or if it is something else. My home page Google Pagespeed score was at 45/100 which is a really poor but I was able to get that to 58/100 just by removing the KuduBuzz app. That app has many linked resources which weren't minimizable as they are not on the Shopify server. I did use the Crush.pics app you recommended which brought the image sizes down about 10% or so and that helped a bit too. 

PageSpeed Insights is reporting that I now have 10 blocking script resources and 7 blocking CSS resources after reviewing them I can see that they are pretty much all minified already and too long in length that I should be embedding them inline in my <head> tag to prevent network request latency. So I'm not sure what I can now do to improve this. The site will no doubt be getting penalized for it's loading time. Is it specific to my theme or is there something I'm missing here?

My website www.matchazentea.com and here is the Google PageSpeed Insights report http://bit.ly/1QSP7bX. Any suggestions or advice would be appreciated. 

Jeff

0 Likes
Shopify Partner
33 0 8

Hi Jeff,

first, one easy fix - you had assets images that were not optimised, because Crush.pics in free version only compresses product images. I moved you to 2GB plan and now all your asset images are optimised (like slide images, logo, etc...)

This improved your desktop PageSpeed score for 12 points, from 63 to 75, you are out of the "red zone".

Another easy fix you can apply is to use proper image size for product thumbnail. Right now on product page and on homepage, where you show product, you have little thumbnails on right side, those are using "compact" image size (160x160px) but CSS is resizing them to 60px in width (and height is autom. calculated). That's why you still have "optimize images" section in google pagespeed results that's telling you to compress and resize those images.

You have few options here, you can change CSS and make thumnail images to be around 160px or you can change image size and use "thumb" (50x50px) instead "compact". You can find more about shopify image sizes here: https://docs.shopify.com/themes/liquid-documentation/filters/url-filters#size-parameters

Another quick and easy fix is to optimize your google fonts request, instead of 3 requests, you can combine all into 1 request using | (pipe) character as separator like this:

link href="//fonts.googleapis.com/css?family=Open+Sans%7cMerriweather:700%7cMontserrat:700"

%7c is URL encoded |(pipe) character

If you want to do more, you can also combine all your CSS files into 1 file and minify it.

~

These are low hanging fruit fixes you can easily do. Of course, there is more that you can do, but it's also more complicated (like combining JS files or using async JS loading)

Hope this helps!

Let me know if you need any help, my email is: hi@spacesquirrel.net

Cheers,
Dom

0 Likes