What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Help Speeding Up My Site

How can I improve my site's speed score?

kbuzz
Excursionist
14 0 4
I need help with improving my site's speed score. The links below are the tests I ran which generated poor results. 
So far, all I've done is download an app that compressed all of my site's images. 
 
 
 
 
Replies 11 (11)

AvadaCommerce
Shopify Partner
3879 839 990

Hi @kbuzz,

 

When it comes to site speed, please note that there are several factors impacting your online store speed, some of which you can control, others you cannot.

 

Factors you can't control

 

  • Your customer's device, network, and location

  • Shopify infrastructure

  • Content delivery network (CDN)

  • Local browser cache

  • Server-side page cache

  • The assets inside the content_for_header Liquid tag

Factors you can control

 

  • Unnecessary Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.

 

  • Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.

 

  • Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.

 

  • Images and videos

High-resolution images usually require large files and therefore slow down page loading times.

 

  • Fonts

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.

 

I suggest you try AVADA SEO Suite which has great features that can help you with improving site speed such as Image Optimization, Speed Up, Lazy Loading, and Minification (removes unnecessary information from the source code)

 

You can also refer to this Shopify post about Improving Speed.

 

I hope my answer can help you achieve your goals.

banned

Shop_Lovers
Shopify Partner
281 46 72

For Better Speed Performance Try

1. Reduce # of Apps
2. Lazyload Images
3. Use Compressed Images.
4. Minify JS/Css
5. Use Google Tag Manager etc.

oscprofessional
Shopify Partner
16116 2410 3126

@kbuzz ,

Hope you are doing well. 

Welcome to the Shopify Community.

I have gone through your store. It really looks nice. You have choosen 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.

  • You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
  • 3rd party apps & codes which take time to load and their size . They decrease the speed.
  • Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
  • If you're removing an app, then consider removing code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
  • Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.

 

You can refer this article :

https://www.oscprofessionals.com/blog/shopify-speed-optimization-reduce-impact-of-third-party-code/

 

Defer offscreen images :

One of the most common recommendations I found is “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once.

So you can use lazy load for these images.

 

  • To defer loading of offscreen images in your Shopify site, you will have to modify your Theme (theme.liquid file) to leverage the lazySizes library. Here's how:
  • Download the lazysizes Javascript library from here and upload it to your theme's /assets folder. 

 

 

  • Note(once check ‘lazysizes Javascript library’ in assets repo. has available or not)

 

  • Add the following lines to your theme.liquid just before the </head> tag:

       

 

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

 

  • Change the image tags in your theme by adding class "lazyload" to the image tags and changing the src attribute to data-src attribute:

 

 

{% for img in product.images %}

 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

 <img class="lazyload" 

 src="{{ img | img_url: '300x' }}"

 data-src="{{ img_url }}"

 data-widths="[720, 1080]"

 data-aspectratio="{{ img.aspect_ratio }}"

 data-sizes="auto">

{% endfor %}

 

We’ve had the best success for our clients by working with our developers to implement the lazysizes, because it's quite complicated for non technical people.

You need to work on 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.

 

Theme Upgrade :

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

 

Refer this blog : 

https://www.oscprofessionals.com/shopify/improve-your-shopify-stores-speed-performance-score-by-upgr...

How to avoid showing invisible text :

 

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

 

Remove unused CSS and unused JS:

  • Check assets folder of the theme and remove unused CSS and JS file
  • Check and remove unused apps
  • If your store has not install any app you can comment {{ content_for_header }} code in theme.liquid (not recommended if you don't have a knowledge about the liquid)

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 !

 

 

 

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

Gamerseo
Pathfinder
149 3 15

there are quite a few basic bugs take a look at the report and fix the basic bugs.

We help by creating professional SEO and marketing services for the gaming industry

Hamzaa
Shopify Partner
20 3 4

Hi @kbuzz,

I hope you are having an amazing day. I have analyzed your store speed and found that there are some unused JavaScript issues and Images are not properly sized. You can set up the proper size for the images using any Image Optimizer App/Website but the JavaScript will be complicated for you if you don't have good knowledge of programming languages. So it's better to hire a professional for this job and I will also recommend just to optimize the images and leave the rest as it is because your store speed looks good to me.

SEO Expert

Cedcommerce
Shopify Partner
718 76 114

Hello @kbuzz

 

For better site speed please follow the below points:- 

 

  1. Remove unused CSS and javascript.
  2. Use Lazy load on images and replace large-size images with small-sized images.
  3. Use minified CSS and javascript files.
  4. Check if resources are blocking the First Contentful Paint (FCP) of our page, use preloaded CSS and javascript files.
  5. Remove unused app code to avoid running code for unused features, and make your theme code lighter and easier to read.
  6. Remove third-party JS scripts and Shopify Apps which are no longer in use and clear the app code as well. 
  7. Some code can be removed or reordered to improve your online store's performance. If you are not using an app, then you can remove it.
  8. Avoid showing invisible text while custom fonts load by showing a temporary system font. With font-display: swap in your @font-face style.
  9. Preload the Largest Contentful Paint(LCP) image.
  10. Used compressed images and adjust your image's explicit height and width.
  11. While removing an app make sure to remove the app code that was added as part of the app installation process.

 

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

Let us know if you need any more help with Speed optimization. 

 

All the best,

Team CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
kbuzz
Excursionist
14 0 4

do you have coding experience? i cannot implement these solutions. 

Shop_Lovers
Shopify Partner
281 46 72

Hi @kbuzz ,

Let's connect on message. I have 7+ experience.

 

Thanks

Stacy_Zhuk
Shopify Partner
510 22 72

Hi @kbuzz,

 

Shortly, you should focus on the high-impact factors first.

Keep in mind that scoring a perfect 100% is nearly impossible for most e-commerce websites. Setting your goal at 85% and above is more than reasonable and fully achievable with the right approach.

And most of these issues require coding expertise and must be implemented by an experienced developer.

You can optimize images. It will help speed up website performance significantly.

These tips will help you to optimize images for Shopify:

1. Use CSS sprites to consolidate multiple images, such as icons, into one. This will limit the number of server requests, thus improving the page speed. The SpritePad tool will quickly create sprites and render the code for you.

 

2. To compress and reduce the size of images without losing their quality, you can try TinyJPG or TinyPNG online services. Just download or drop your files, and download the compressed and ready-to-be-published pictures in a minute. For non-optimized pictures that are already uploaded to the site, you can install one of the available Shopify image optimization apps, like Crush.pics or Image Optimizer. These tools are made to take care of all existing pics and those that will be uploaded to the site in the future.

 

Here https://whidegroup.com/blog/shopify-performance-optimization/ you will learn more details about the ways to optimize Shopify store speed and performance.

If you have any questions regarding your website, feel free to contact Whidegroup anytime.

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

oaichu
Visitor
1 0 0

1. Use CDN
2. Lazyload Images
3. Use Webp Images.
4. Minify JS/Css

# Vietnamese person.
~ Visit PKTL!

marshray
New Member
7 0 0

Try using the images in .webp format and try to make the images as small as less than 100KB. It'll create a positive response on your site.

 

My site oil and gas training courses in Dubai was also facing these issue but as I'm not a coding expert. I just did this and it create a huge positive impact on my site's speed.