can anyone let us know how can I solve this issue.
Reduce JavaScript execution time 11.9 s
Topic summary
A user seeks help reducing JavaScript execution time from 11.9 seconds on their Shopify store, sharing performance screenshots showing problematic scripts.
Key Recommendations Provided:
- Minimize & combine files: Merge JavaScript files to reduce HTTP requests and minify code by removing whitespace/comments
- Defer non-critical scripts: Load non-essential JavaScript after initial page render using async/defer attributes or intersection observers
- Lazy loading: Delay loading large scripts until user interaction (scroll, click, keydown)
- Third-party script management: Assess necessity of each script and remove unnecessary ones
- Performance monitoring: Use tools like Google PageSpeed Insights or GTmetrix to measure impact
- Image optimization: Compress images if JavaScript includes them
Code Solution Offered:
One response provides a Liquid template snippet that removes specific URLs from Shopify’s content_for_header and injects those scripts only after user interaction (click, scroll, or keydown events), effectively deferring third-party app scripts.
The discussion remains open with no confirmation of implementation or resolution from the original poster.
1 Like
1- Assess necessity of each script, remove unnecessary ones.
2- Find initial call to costly executions, make them call when they go into view or something with intersection observers. If third party script and immediately executed, you can load the script itself when necessary.
Hello @PoojaHiwade ,
This is Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.
Reducing JavaScript execution time is crucial for optimizing the performance of your Shopify store. Below listed are several steps you can take to accomplish this.
-
Minimize and combine JavaScript files
Reduce the number of JavaScript files loaded by combining them into a single file. This reduces the number of HTTP requests required to fetch the files, improving page load times. -
Minify JavaScript code
Minification removes unnecessary characters like whitespace and comments from your JavaScript code, reducing its file size. This can significantly improve loading speed. -
Defer non-critical JavaScript
Identify any JavaScript code that is not necessary for the initial page rendering and defer its execution until after the page has loaded. This allows the browser to prioritize the loading of critical resources, improving perceived performance. -
Optimize JavaScript performance
Review your JavaScript code to identify any bottlenecks or areas that can be optimized. Use techniques such as caching, code refactoring, and algorithm optimization to improve performance. -
Lazy load JavaScript
If you have large JavaScript files or scripts that are not immediately needed, consider lazy loading them. Lazy loading delays the loading of non-critical JavaScript until it’s required, reducing the initial load time. -
Use asynchronous loading
For third-party scripts or libraries, use asynchronous loading whenever possible. This allows the browser to continue rendering the page while the script loads in the background. -
Eliminate render-blocking JavaScript
Identify any JavaScript files that block the rendering of the page and consider deferring their execution or loading them asynchronously. This allows the browser to render the page without being held up by JavaScript execution. -
Optimize images
If your JavaScript includes images, make sure they are optimized for web use. Compress and resize images to reduce file sizes without sacrificing quality. Smaller image sizes result in faster page loads. -
Monitor and measure performance
Regularly monitor your website’s performance using tools like Google PageSpeed Insights or GTmetrix. These tools can provide insights into specific areas that need optimization, including JavaScript performance.
By implementing these techniques, you should be able to reduce the JavaScript execution time and improve the overall performance of your Shopify store. Remember to test and measure the impact of each optimization to ensure positive results.
I hope this information proves useful.
Gina
yes ho can solve this problem
{% comment %} remove URLs from asyncLoad {% endcomment %}
{% assign urls_to_remove = ’
https:exampleUrl1.com,
https:exampleUrl2.com,
https:exampleUrl3.com,
’
| strip_newlines
| replace: ’ ', ‘’
| split: ‘,’
%}
{% for url in urls_to_remove %}
{% assign content_for_header = content_for_header | remove: url %}
{% endfor %}
{{ content_for_header }}
{% comment %} inject app scripts after user interaction {% endcomment %}