How to increase performance (speed) of the website

[jnuser]

My company website has a significant speed problem, especially when accessing through mobile, but also through a computer as well.

I have checked various YouTube videos and documents online but could not find anything specifically useful.

I also checked several website performance analysis tools to determine the leading cause of this speed. I figured out that so many unused Javascript and CSS are causing this issue. Here is the link to one of the performance analysis tools that I used for my website: PageSpeed Insights 

When I click on the 'Reduce unused Javascript' button which causes delay the most (attached screenshot), the two javascript files that are having the most potential savings are not showing on my Shopify account as I am using a different theme for my website and also a different chatbot. 

I wonder how they should be reduced. Please let me know if there is any additional information needed.

[kazi]

Hello @jnuser  I have checked your store and you have some issues

Reduce unused JavaScript
Properly size images
Reduce unused CSS
Serve images in next-gen formats
Eliminate render-blocking resources
Defer offscreen images
Efficiently encode images
Minify JavaScript
Avoid serving legacy JavaScript to modern browsers
Minify CSS

You can fix them by searching google or hire any shopify developer.

[Cedcommerce]

Hello @jnuser, 

Here are some tips that you should consider for improving the page speed of your website.

1-) Ensure text remains visible during Webfont load:  Fonts are often larger that take time to load and browsers hide text until the font loads, causing a blank appearance. To avoid this, you can allow only those fonts to load first that are relevant to that page text.

2-) Reduce the impact of third-party code: There are a few third-party codes that reduce page speed while loading the page like Facebook, Instagram, etc.  We can make the theme execute after some time when the whole page gets displayed.

3-) Use passive listeners to improve scrolling performance: Passive listeners enable developers to opt-in to better scroll performance by eliminating the use of mouse wheel scroll or touch scroll when not needed with event listeners. 

4-) Minimize main-thread work: Removing third-party JavaScript, and reducing the complexity of your styles and layouts can help you optimize the page speed.

5-) Avoid an excessive DOM(Document Object Model): Reducing the DOM size can help Increase the speed of your website.

6-) First Contentful Paint: The First Contentful Paint (FCP) metric measures the time difference between a page load start time to the page's first content appearance. According to lighthouse, FCP must Be Below 1.2.

7-) Reduce JavaScript execution time: Javascript code must be optimized and compressed for better page speed.

8-) Serve static assets with an efficient cache policy: Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.

9-) Avoid chaining critical requests: Chaining critical requests is a sequence of requests that depends on each other and are crucial for generating content on the web page. The “avoid chaining critical requests” warning means that the critical resources that load the web page are excessively large.

10-) Largest Contentful Paint element

Largest Contentful Paint (LCP) is a Core Web Vitals metric, that ensures how fast the main content of a web page loads. A good website must have an LCP of 2.5 seconds or less for at least 75% of page visits.

11-) Avoid large layout shifts: Large layout shifts can affect your page speed. It can be reduced by using a media query and fixing the image by assigning the width and height of images thus helping to better page load speed.

Hope it helps, let us know if you have any other queries related to site speed optimization.

All the best, 

CedCommerce

[speedboostr]

I just ran your store through PageSpeed Insights, and your core vitals are really low so to remedy this you need to address the root causes - which can be a challenge to non-technical users because these are mostly caused by Third-party apps. 

Desktop:

Mobile:

Unfortunately although Shopify now provides speed reports for your theme, they do not force Apps to have any speed requirements, and therefore some apps are just really slow, poorly coded and hosted on the cheapest hosting available to maximize their profit.

Right click to select 'inspect element' then click the network tab and refresh the page in order to see a breakdown of your network utilization.

As you can see here it took 20 seconds to finish loading your homepage and there was 25mb of resources downloaded! This is way too much data and you need to redesign for performance. You cannot expect a customer to download 25mb of data on your homepage, it's just too much.

Largest Contentful Paint (LCP)

This is your biggest area of concern right now, costing nearly half a minute on mobile - it's not going to be favourable at all for your customers or Google SERP ranking. 

  

The above list is all of the javascript includes required in order to load your page. The top 3 especially need to be reviewed first because they are using a huge amount of resources - so that's the kendo, webchat and youtube.

1. Kendo simply visit the URL and download the JS it provides: https://cdn.kendostatic.com/2022.1.412/js/kendo.all.min.js

Now you can package this into your theme.js.liquid and load it async to remove this request overhead.

2. Webchat - for the most optimal performance.you will need to conditionally load this app on the product pages, or ideally only load after interaction from the user. This can be done with Javascript and lazysizes 

For example: 

document.addEventListener("mousemove", function(){
  //Load Webchat JS ...
});

More info here: https://www.w3schools.com/jsref/met_document_addeventlistener.asp

3. Youtube currently is being loaded in it's least performant manner, although you are not to blame you just copy-pasted the embed script. The issue with this on performance is that it loads a huge JS library from youtube in order to render their player. To fix this, it's really simple - just make a screenshot of the player thumbnail and upload that your store.

Then edit the theme code, or use custom html in your customizer and add the image with an anchor tag href link to the youtube video.

This will open the youtube app on mobile users so the experience is native and fast.

On desktop it will simply open a new tab.

<a href="youtube video url goes here" target="_blank">
<img src="{{ 'youtube_thumbnail.jpg' | asset_url}}" alt="Youtube video title goes here" />
</a>

 

This will get you started in the right direction and help bring your score up somewhat. Although to reach higher score's you'll need to make a lot more changes. I ran your store through our free Shopify Analyzer and it scored a F - https://analyze.speedboostr.com/result/gdab3nplgd
 

You have 8 404 not found links on your homepage, so there's another thing to clean up because browser can only do 6 concurrent requests so that's not helping performance at all either.

If you'd prefer an expert take care of all these technical tasks for you, that's what our engineers are here for! Send us a message and we'll get your store tuned up and performing better as soon as possible 👍