Site Speed - Help please?

Briggsy
New Member
6 0 0

Hi all,

Apologies if this is in the wrong section - this is the first time I've posted here and still finding my way around.

My Google site speed appears to be really slow - and my Shopify speed store is also only showing as 22.

Could someone kindly take a look to see if there's anything that stands out that could be causing some issues? 

Thank you

Women's Handbags & Purses | Online Bag Store | Be Younique Bags (be-younique-bags.com)

'Amelia' Small Faux Leather Cross-body Handbag For Women – Be Younique Bags (be-younique-bags.com)

Replies 16 (16)
JoesIdeas
Shopify Expert
1672 143 428

A couple things stand out:

1) Large amount of warnings for lazy loading (from results of analyzing your site on the Shopify Analyzer - https://analyze.speedboostr.com/result/fuplyq2cgz)

Screen Shot 2021-01-07 at 12.13.47 PM.jpg

Lazy loading is a tactic to load images as the user scrolls into view, rather than all at initial page view. You can see details + how to implement here: How to Lazy Load Images on Shopify

2) Seeing a console error that may be coming from an app:

Screen Shot 2021-01-07 at 12.13.33 PM.jpg

Check into that to either fix it or remove it. If it's from an old app that you deleted, you'll want to remove the code (when you delete an app they lose access to your site so can't clean up the code).

It's pretty common to have old app code lingering if you've installed / uninstalled a few store front apps. You can investigate this by combing through your theme code and removing any code / apps that are from apps that you no longer use.

If you prefer an expert to handle these just reach out to speedboostr.com/contact and reference this post. That's my team that optimizes Shopify sites every day and built the Shopify Analyzer.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
_onkar
Shopify Partner
8 0 1

Hi Briggsy

After checking the issues with Google Page Insights it seems the major issue with the website is the Image size and not use of properly resized and optimized images.

_onkar_0-1610047385630.png

_onkar_1-1610047428767.png

 

You also need to check the JS loading pattern over the website after checking the website page source it seems 2 jQuery versions are included at the top of the website header and other JS code which is not a good or great practice in terms of page speed.

_onkar_2-1610047636007.png

 

Also, there are google fonts that look like load 4 times and have the same content so you need to check and make the sure necessary font the are needs loaded optimized.

I hope these points help you to determine the real culprits that delay the loading of the website.

Thanks

 

Want to modify or incorporate custom changes on the store, Hire me
If helpful then please Like and Accept Solution.
Contact : onkarsankhyan@gmail.com
Skype : live:831c4e4b34655655
JoesIdeas
Shopify Expert
1672 143 428

Good point on the double jquery loading @_onkar , we see this occasionally, it's usually from an app injecting a jquery script without first checking to see if the theme has a jquery reference already.

@Briggsy for the double jquery issue check your theme.liquid file to see if there are 2 instances loading there. If not, you'll probably have to do some detective work to try and figure out. If you can identify which app is loading it, you can contact them to request a) for them to update their code to check if jquery is already in the theme and do not load if it is (the ideal solution if they're relying on the jquery library) or b) that they prevent it loading for your store.

@Briggsy To reiterate though, the major issue is lazy loading, as indicated in my analysis and also in the screen shot of the tool @_onkar 's using (lazy loading is the same as "deferred offscreen images")

I wouldn't worry too much about the google fonts, since they're public and popular, it's common that google fonts are already cached on the user's browser. Analysis tools give estimations so they won't reflect this, so my advice is keep the google fonts if they help your site's design, but just check to make sure you're using all the fonts you are loading.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Briggsy
New Member
6 0 0

Hi @JoesIdeas and @_onkar,

Thank you so much for your help. I really appreciate your responses. They're a big help!

I'm going to have a go at tackling the lazy load images issue in a few moments. I've already started replacing the images with optimized images too which has brought the file sizes down by around 75% without any noticeable drop in picture appearance - so I'll see if I can get my head around how to do this lazy load problem while I'm at it.

@JoesIdeas - I'm not too sure on what I'm looking for in regards to seeing if there are double jquery issues. 

This is my theme.liquid file. Any ideas what I should be looking for please? 

<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- spice-style -->
<style id='spiceStyle'>
.product-img-box {
opacity:0 !important;
}
</style>
<!-- Added by CSB Webmaster - Google Analytics Tracking Script -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TE8KZ58WZV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-TE8KZ58WZV');
</script>
<!-- End of Google Analytics Tracking Script Added By CSB Webmaster -->

<!-- Basic page needs ================================================== -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
{% if settings.favicon_enable %}
<link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
{% endif %}
<!-- Title and description ================================================== -->
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
<!-- Social meta ================================================== -->
{% include 'yuhu-smi-social-meta-tags' %}
<!-- Helpers ================================================== -->
<link rel="canonical" href="{{ canonical_url }}">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_primary }}">
{% include 'frame_header_styles' %}
{% include 'frame_header_fonts' %}
{% include 'frame_header_scripts' %}
<!-- Header hook for plugins ================================================== -->
{{ content_for_header }}
<script type="text/javascript">
delete History
</script>
{% include 'linked-options' %}
<script src="https://cdn.younet.network/main.js"></script>
{% include 'scapp-customerinfo' %}
<script async='async' src='https://variantimages.upsell-apps.com/script.js?shop=be-younique-bags.myshopify.com'></script>
</head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} {% unless tempate contains 'index' %} others {% endunless %}">
{% section 'top-countdown-bar' %}
{% section 'announcement-bar' %}
{% if settings.search_model == 'search_type3' %}
{% include 'adv-search-model' %}
{% endif %}
<div class="shifter-page {% if settings.ajax_cart_method == 'drawer' %}is-moved-by-drawer{% endif %}" id="PageContainer">
{% include 'frame_headers' %}
{% include 'breadcrumb' %}
<main class="{% if template contains 'index' or template contains "about" or template contains 'services' %}main-home-content {% else %} main-content {% endif %}">
{% unless template contains "index" or template contains "about" %}
<div class="dt-sc-hr-invisible-large"></div>
{% endunless %}

{% if template contains 'product' %}
{% if settings.enable_filters and settings.product_page_sidebar != 'full_width' %}
<div class="sidebar-label">
<div class="sidebar-button">
<div class="tags-filter">
<button id="showTagsFilter" class="btn tag-fillter">
<svg data-name="Layer 1" id="Layer_1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M47,12a2,2,0,0,0-2-2H24a2,2,0,0,0,0,4H45A2,2,0,0,0,47,12Z"></path><path d="M3,14H8.35a6,6,0,1,0,0-4H3a2,2,0,0,0,0,4Zm11-4a2,2,0,1,1-2,2A2,2,0,0,1,14,10Z"></path><path d="M45,22H37.65a6,6,0,1,0,0,4H45a2,2,0,0,0,0-4ZM32,26a2,2,0,1,1,2-2A2,2,0,0,1,32,26Z"></path><path d="M22,22H3a2,2,0,0,0,0,4H22a2,2,0,0,0,0-4Z"></path><path d="M45,34H28a2,2,0,0,0,0,4H45a2,2,0,0,0,0-4Z"></path><path d="M18,30a6,6,0,0,0-5.65,4H3a2,2,0,0,0,0,4h9.35A6,6,0,1,0,18,30Zm0,8a2,2,0,1,1,2-2A2,2,0,0,1,18,38Z"></path></svg>
{{ 'collections.toolbar.filter' | t }}
</button>
<!-- <button id="showTagsFilter2" class="btn tag-fillter"><i class="fa fa-sliders"></i></button>-->
</div>
</div>
</div>
{% endif %}
{% endif %}


<div class="wrapper">
<div class="grid-uniform">
<div class="grid__item">
{% unless template contains 'index' or template contains 'about' or template contains 'services' %}
<div class="container">
{% endunless %}
{{ content_for_layout }}
{% unless template contains 'index' or template contains 'about' or template contains 'services' %}
</div>
{% endunless %}
</div>
</div>
</div>
{% unless template contains "index" or template contains "about" or template contains 'services' %}
<div class="dt-sc-hr-invisible-large"></div>
{% endunless %}
</main>
{% section 'footer' %}
</div>
{% include 'frame_footer_scripts' %}
{% include 'qmodal' %}
{% include 'modal-box' %}
{% include 'currencies' %}
{% include 'newsletter' %}
{% include 'modal-compare' %}
{% unless template contains 'product' %}
{% section 'someone-purchased' %}
{% endunless %}
{% section 'GDPR-modal' %}
{% if template contains 'product' %}
{% include 'ask_an_expert' %}
{% endif %}
{% if settings.search_model == 'search_type1' %}
{% include 'search-autocomplete' %}
{% endif %}

{% include 'cart-dropdown' %}

<div class="wrap-overlay"></div>
{% comment %}This is for Badge Master By Hulkapps{% endcomment %} {% include 'hulkcode_trustbadge' %}
{{ 'https://evi.spicegems.com/js/serve/be-younique-bags.myshopify.com/v1/scriptTag.js?shop=be-younique-b...' | script_tag }}
</body>
</html>

oreoorbitz
Shopify Partner
205 24 115

I believe the redundant Jquery file is being loaded by this app:

https://apps.shopify.com/trust-badge-by-giraffly

Maybe you can contact them and ask them to add code to double check if jquery is already present on the page before inserting it, doubt they'd make the extra effort though.

 

Or you could remove your themes jquery and depend on their jquery, but I really don't recommend that.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
oscprofessional
Shopify Partner
11655 1820 2326

Hello @oreoorbitz ,

You need to work on your website performance’s speed. Low mobile page speed may kill your traffic and affect your conversion.

In order to Improve website speed we need to:
- Remove unnecessary code on a high priority basis.
- Compressed images or Defer offscreen images.
- Web Pages need to be Minified.
- Reduce JavaScript execution time
- Minimize main-thread work
- Beware of excessive liquid loops
- Decrease thumbnail image size
- Weigh the benefits of installing another app


By fixing these issues, your website speed score can definitely improve. For more details please check and select the plan you wish to select -
https://www.oscprofessionals.com/shopify-performance-optimization/

If anything is missed out or unclear then don't hesitate to ask
Thank You!

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
JoesIdeas
Shopify Expert
1672 143 428

@Briggsy you're welcome.

For jquery, if it's not in your theme files then it's coming from an app. I would take oreoorbitz recommendation and start by reaching out to that app and see if they not load jquery if you're theme already has it.

BUT if the 2 jquery's are loading from 2 apps, and you delete the other app, then this app's functionality would break unless you add jquery to your theme.

I'm not sure the exact situation, would require some analysis, but to help ease things for you, you could request the app to first check if jquery is loaded on the page, then if it is, don't load their version (that's pretty common as a best practice, to check for jquery before loading on the page).

To make things 1 more bit complicated :).... there are different versions of jquery and some apps require a specific version, or using a certain could break functionality.

This is why we don't really look for this issue, because it's quite complicated and often can result in a big waste of time / breaking functionality for potential small gains in performance.

Last piece of advice, I would ignore the latest post by @oscprofessional - they've been caught stealing and breaking Shopify terms of service on multiple occasions. (Details here: https://speedboostr.com/shopify-partners-caught-stealing/#copyright-osc). I assume you don't want criminals having access to your business / data, I know I wouldn't.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Briggsy
New Member
6 0 0

@JoesIdeas  @oreoorbitz @_onkar 

Thank you all so much for your help.

I've been through my theme code and somehow managed to work out what I was doing enough to be able to implement the lazy loading on my store.

My store has instantly gone from an 'F' grading to a 'B' grading - and a warning for around 70+ images has now gone down to 4 (plus two oversize images that I've no idea how I can work around that problem).

It was a bit long winded and tedious - it took about 3 hours to go through every file in the 'Layout', 'Templates', 'Sections' and 'Snippets' areas - but I'm thrilled with the improvement already.

Now to find the files with the 'img src' tags that I've missed and change those to 'img data-src' - then it's onto rectifying the other issues and seeing if anything can be done to resolve the oversize image issues. 

Thanks again for the help. Can't thank you enough.

JoesIdeas
Shopify Expert
1672 143 428

Woot woot good job @Briggsy  it's not easy to navigate as a non-developer 🙂

For your last one: plus two oversize images that I've no idea how I can work around that problem.

If your theme controls the image size you can edit that in the code. This guide will help you understand that: https://www.shopify.com/partners/blog/img-url-filter.

If your theme does not control image size you simply need to upload a new image.

Keep in mind, with analysis tools they're just recommendations based on best practices from crawling your site. In best case scenario, you load an image that is exactly 2x the image container of the device the user is accessing the site. But this can be challenging depending on your experience level and familiarity with your theme code, you need to line up the possible screen sizes based on your architecture, then use "img src-set" attributes to assign an image size per screen size range.

Your theme might already have something like that, if they do you'll see src-set attributes on your images, then you can experiment with making the image sizes smaller (that guide I shared will show you the code to look for).

As always, make sure you make edits like this on a backup theme so you can play around with the code freely without affecting the live site. 👍

 

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Briggsy
New Member
6 0 0

Thank you @JoesIdeas  - I was tempted to pay you to do it - but I like to attempt to do things first so that I learn. There's no way of learning by taking the easy route and getting others to do it. Years ago, I used to do a little bit of web coding (well out of touch with it these days though) - so I have a little bit of experience of trawling through code and digging bits out.

Thanks very much for the info on the oversize images - I'm not too sure how my theme has been set up by the developer - so I'll have a look at as my next job once I've sussed out why these last remaining images aren't lazy loading.

My store 'feels' more responsive so far - and your Analyzer has also spotted a difference - but my performance stats using the GTMetrix site still don't look too appealing and says it's taking 11 seconds for my site to full load. Strange.

 

JoesIdeas
Shopify Expert
1672 143 428

I hear ya @Briggsy , same here, learning is fun.

For load time, check webpagetest.org. That's the best tool for measuring load speed. GT Metrix is a nice general tool, I use it on certain projects but it's not geared for ecommerce sites with 3rd party apps so you have to weed through some irrelevant / not feasible warnings.

We did benchmarks on popular tools so you can compare your load speed: https://speedboostr.com/shopify-performance-benchmarks.

Looks like 11 seconds is quite high with GT Metrix, so there may be some issues... or you may just have a lot of 3rd party resources loading. Hard to tell without diving in but that's just another resource you can use on your journey.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Briggsy
New Member
6 0 0

Absolutely @JoesIdeas  - learning is fun. Although it was quite tedious to do, I enjoyed doing it because I saw the effect it had immediately after completing it.

Thanks for that link - according to that site, my store is taking around 5 seconds - is that fairly reasonable, or do you think that can still be improved upon?
Untitled.jpg

 

I went through the code again  - and found a few more 'img src' bits that needed changing. I'm fairly sure I've found them all now - but your analyzer is still finding four images that aren't lazy loading - so that is baffling me slightly.

Might have to have a third look tomorrow - plus taking a look at the oversized image issue using the instructions in the link you kindly gave me.

Thanks again for all of your help. You've been an amazing help!

JoesIdeas
Shopify Expert
1672 143 428

@Briggsy it's hard to say, it really depends on the site and the goals. There's not a good target speed range. For example, one of the heavier contributors to load speed we see are Facebook messenger apps, it can slow a site by seconds depending on the tool used, but some stores have great success with those that help their business thrive. Ecommerce the goal is to have the most sales, not be the fastest site.

My advice is to optimize what possible (that's why we built the Shopify Analyzer tool), and then move on to the next business task (conversion rate optimization is my favorite one to try and improve after speed).

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
olgacorwin
New Member
1 0 0

Well, I am an expert to optimize WordPress speed.

But at shopify, I have just started to learn how to optimize the speed.

Briggsy
New Member
6 0 0

Thanks @JoesIdeas !

My theme was restricting me quit a bit - plus when I was looking through the code to carry out the adding of the lazy loading tags, I found lots of errors in the code due to mis-spelling. It seemed very poorly coded (you get what you pay for I guess - it was a very cheap theme).

I've since switched to the Flex theme by Out Of The Sandbox. I so wish I had bought this when I started my store 4 months ago. It's rapid. Seriously rapid.

My score is now 99 out of 100 with 'A's in every area apart from a 'B' under local file minification. 

It was lower than that yesterday (around 74), but after doing the same tweaks on the Flex theme that you recommended above, it brought it up to 99 (Mainly oversize images - which are now the correct size) - so your help didn't go to waste. It helped yesterday with the Flex theme too. Thanks for your help! 

JoesIdeas
Shopify Expert
1672 143 428

Aw niiiiiiice Flex theme is one of my favorites, so many options!

You can't go wrong with Out of the Sandbox, I think they're the best theme developers for Shopify, my first choice for every site build project. 👍

Good luck with store I hope that new theme and your dedication helps grow your biz well.

• Creator of Order Automator (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people