Archana Nagarkar I 2 Min Read I August 7, 2020
1. Quick read
During speed optimization there are various factors that we need to be considered to achieve the site speed. As you know websites contain some static or dynamic content, JS, CSS, images, etc. If these file sizes are more then more requests generated and it slows down the site.
There are many factors that affect website speed like use of high resolution images, more server requests, use of more shopify apps, duplicate JavScript and CSS.
Duplicated scripts hurt the performance by executing the same content more than once.
You can use tools to check the speed of your site like GT Metrix, Google Page speed insight, Pingdom etc. Using these tools you can find your site score, load time, recommendations or warnings to apply fixes on your site so that you can achieve more site speed.
3. How duplicated scripts affect the website:
During website development it takes a significant amount of resources such as HTML, CSS, JS. There are many sections like, logo, headers, footers, etc. where different teams work like JS and HTML developers, so there can be more chances to add duplicate scripts while working on the same section. So in such a scenario duplicate scripts can be added and it harms to the website by generating more requests.
Different web browsers handle multiple instances of a similar script on one page differently. Firefox is the only browser that downloads the content the same number of times as it is available on the page except if it is explicitly cacheable. Anyway all browsers can’t manage the execution of the script and do it the same number of times as it exists.
- Improved loading speed
- Removed redundancies
- Reduced page size
You can do the same in PHP by creating a function called incertScript:
<?php insertScript("yourscript.js") ?></pre>
Additionally, many widget developers have started using the line:
Which means that, if the async SCRIPT element already exists, the script will not be executed again. This is done by giving the SCRIPT element an ID, and checking for that ID on subsequent calls. Using this line is making sure that even if you see multiple script instances on your page only 1 of them is being executed.