How can I fix the error of serving legacy JavaScript to modern browsers?

[zakuntsart]

Click to expand...

How to deal with this Error: Avoid serving legacy JavaScript to modern browsers. Website link https://www.wearablehealingarts.com/ 

 

[kaalTechGeeks]

Hi @zakuntsart,
You can see the performance of your homepage in the screenshots attached below: 
Mobile: 

Desktop: 

Conclusion: 
For desktop your website speed is decent but for the mobile version is very poor as it is just 14/100. 
Some of the major issues you can work on are: 
1. Eliminate render blocking resources: to fix these you need to preload the CSS files and use defer and async attributes to optimize the script files.   
2. Defer off screen images - you need to lazy load the images of your website

3. Properly sized images: you need to work on the image optimization for your store and make sure that the intrinsic size for your images should not be much greater than the rendered size. 
4. Reduced unused JS & CSS - you need to work on lazyload the script and css files (both from shopify & coming form third party apps), but at the same time you have to make sure that the functionality of your store does not get effected. 
5.  Minify CSS and JS files - there are multiple online tools available to minimize your files you can take help from them.  
6. Ensure text remains visible during web font load: you have to optimize the font of your website using font-display: swap css property. 
7. Images do not have explicit height & width: you have to provided proper dimension to your images on the websites. 
8. Minimize main thread work:  Work on optimization of the resources coming from the apps and other third party cdns. 

9. CLS issues - they are the major issues that needs to fixed and they account for 10-15% of your website score, these issues are basically designing issues due to which there is shifting in layout of website during initial page load times. 

10. Avoid serving legacy JavaScript to modern browsers: this means that you have to prevent the large javascript files from being loaded before hand or during web page so that they do not impact the other resources required for the webpage. 

So the above 10 points are the major points on which you have to work in order to ensure that you get good speed scores for the website. 

NOTE: working on the speed part for the store requires a hefty knowledge of coding in shopify liquid and JavaScript. So you should hire a developer if you do not have enough confidence to work with the codes. You can let me know if you are willing for speed optimization for your website. 

Thanks & Regards
KaalTechGeeks   

[Ishan_Makkar]

Hi @zakuntsart 

Lets first discuss why the speed score is low for your website - 
1- You have a low score on mobile and Desktop score is already good enough.
2- Now what is the specific reason for a low mobile score - 
i) Javascript execution time is too much.
ii) Render blocking - This means certain important files have not loaded yet and this is stopping the page from loading.
iii) We are loading content before somebody scroll downs to that part of page, this can be resolved with lazy loading.

Resolve these issue can improve your mobile speed by upto 5 times. 

Now you either need a really good developer to do this, or you can use any apps or tool for this.
I would recommend using websitespeedy.com , this will fix these issue without changing any code on your website, it will also monitor speed so you will know if you page speed fall again. 

Thanks,
Ishan 

[flareAI]

Hello @zakuntsart,

I am Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot. I am here to support you.

The "Avoid serving legacy JavaScript to modern browsers" error in a Lighthouse report suggests that the website is serving older, outdated JavaScript code to modern browsers that support newer JavaScript features. This can slow down the performance of the website and negatively impact the user experience.

To address this error, you can follow these steps.

1. Identify the outdated JavaScript code
Use a tool like the Lighthouse report to identify which JavaScript files are causing the error. You can also use your browser's developer tools to check which JavaScript features are not supported by modern browsers.

2. Update the JavaScript code
Once you have identified the outdated code, update it to use modern JavaScript features that are supported by most modern browsers. This will improve the website's performance and user experience.

3. Use feature detection
Use feature detection to serve different JavaScript code to different browsers. This will ensure that modern browsers receive the latest JavaScript code while older browsers receive a fallback version that is compatible with their features.

4. Use a build tool
Use a build tool like webpack to transpile and bundle the JavaScript code. This will ensure that the website serves the appropriate version of the JavaScript code to each browser.

5. Test the website
After making changes to the JavaScript code, test the website to ensure that it works correctly in all supported browsers.

Hope this helps

Gina