How to find conflicting files?

You are here:
Estimated reading time: 2 min

When merge Scripts is enabled it can cause issues at the frontend of your site.
If your website support HTTP/2, fastest solution is to disable Merge Scripts as there is probably no negative impact on pageload.

Regarding to HTTP/2
While concatenation (i.e. merging CSS and JS into fewer files) is considered the best practice under HTTP/1, that’s not necessarily the case with HTTP/2. There is ongoing debate whether some concatenation, i.e. merging files into small groups is beneficial. The real answer is that it may vary from site to site. We tend to think that concatenation won’t be as of much benefit on HTTP/2, but you should test the load time of your site with and without these options since results can vary.

If you want to keep merge Scripts enabled anyway, you´ll need to find the conflicting file(s) and exclude those from combining. So you have to learn what elements to exclude. Merge can break certain things because the mechanism doesn’t always load them in the exact perfect order. You would have this problem with other merge plugins as well.

Using Your Browser to Diagnose JavaScript Errors
If there is a javascript error, then the easies way is using Chrome Inspector (right click on the thumbnail and choose “Inspect element”). Open the console tab of either and refresh the page. If there is an error, it will be reported in the console and provide a link to the relevant line.

Let’s start identifying an issue with Javascript.

In this example we have an issue with Google Maps. After we enabked Merge Script is Swift Performance Settings, the map isn`t working on our contactpage.


Click it to open the Console, then click the file referenced in the error notice:

This takes you directly to the code in the file that is related to the error. This example is pretty easy, as the Google Maps JavaScript API must be downloaded directly from Google’s servers.

So, we need to go to (Swift) Settings->Optimization->Merge Scripts: Exclude Scripts and exclude: maps.googleapis.com

Now we visit the contactpage again, after we first deleted and prebuild cache and check if there are no more JavaScript errors reported in the console. In this example, the Google Map is showing correctly and in browser console all errors are gone.

Sometimes it is not that easy and you need to find the red underline and copy part of that code:

Open a new browser tab and load the un-cached version of the page. You do that by adding ?nocache to the URL—this will load an un-cached, un-minified version of the page. It is necessary in order to find the original URLs of the files.

An un-cached URL would look something like: https://example.com/?nocache or: https://example.com/some-page/?nocache

Open Developer Tools, then click the 3 dots on the right side and select Search All Files:

Paste the problematic code in the search box and it will locate the file in which that code is found:

It’s not possible, unfortunately, to copy the filename from this screen. So to do that, click on the Network tab (reload the page if necessary to pull in the files). Then search for the file in the list:

Once you’ve located the file, right-click on the filename, select Copy, then Copy Link Address.

Paste this into the Exclude JavaScript Files text field in the Settings -> Optimization -> Styles section. If you need to exclude more files just add them here also, see screenshot):

After saving this you can visit your site again, reload the page and check that there are no more JavaScript errors reported in the console.

Was this article helpful?
Dislike 2 1 of 3 found this article helpful.