How can I fix outdated Javascript libraries and speed up my website?

[AtoOmoS]

Hi everyone,

I've just ran a Lighthouse report to see how my website's going. I face multiple issues, and I am worried about the issues described in the "Best practices" section with issues related to obsolete Javascript libraries. I tried to manually update the Jquery library version (currently 2.2.3) to the latest one (using the latest following script directly - https://code.jquery.com/jquery-3.6.1.slim.min.js), - that I manually changed within the JQuery file + in the vendor.js - but it doesn't work, as the Jquery library gets back to the 1.1 version. I would like to know if those issues are critical and if I need to fix them ASAP, and how to do so.

Also, I would like to have tips in order to enhance my website rapidity. As you can see on the screenshots, I am facing some rapidity issues and I would have EASY tips to fix them, as I do not have enough money to hire a developer.

Thank you for your reply.

[Andrei_Kuchuk]

Hi @AtoOmoS !
There is a pretty good performance result for the Shopify stores.
If you have some third-party apps on your store, they might to use also jquery and load it for themselves.
It is related to the most popular apps, that can show something on the page (like Klavio, bread, etc)
If you have such apps, you might not avoid jquery usage.
  
Some Shopify themes can also use jquery to provide sidebar and cart functionality.

The best way that I can recommend - is a try to run the lighthouse on the fresh theme, without any app, and compare the results

[Cedcommerce]

Hello @AtoOmoS,

Thank you for the brief explanation of your issue. The problem might be occurring due to Third-Party apps or theme which is using an older version of JQuery, which is obstructing any updates to the code.

We advise you to get it fixed by a Shopify developer. 

For optimizing the speed you can consider the below points :

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