Remove duplicate JavaScript and CSS

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.

Duplicate JavaScript and CSS files hurt performance by creating unnecessary HTTP requests.If an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

Duplicated scripts hurt the performance by executing the same content more than once.

This blog helps you to understand how duplicated javascripts affect the website and how you can remove the duplicated Javascript and CSS so that you can reduce the http requests which are created due to duplicate javascript and CSS. Let’s see the blog in detail.

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.

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.

• 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.