2. How can I recognize that my site contains duplicated JavaScript and CSS?
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:
When your site contains duplicate JavaScript or CSS files, it hurts the performance of the site as the same scripts are available two times. It affects your website speed by generating more requests for the duplicate scripts. Duplicate scripts can also suffer from update anomalies, where just one of a few duplicates of the code is refreshed to address a deformity or include a component, making them gradually advance separated
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.
4. Removing duplicated JavaScript and CSS provides the following Advantages:
- Improved loading speed
- Removed redundancies
- Reduced page size
You can remove duplicated JavaScript and CSS from your website with the following code modifications:
You can do the same in PHP by creating a function called incertScript:
Additionally, many widget developers have started using the line:
if(d.getElementById(id)) {return;}
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.