Slow TTFB for main.js (Vue)

I have a few websites from a Github project built on Vue. I’ve always gotten the error message such as: ‘Failed to load resource: the server responded with a status of 404 () main.js:1’ or
‘GET https://stoic-roentgen-4de1ef.netlify.com/src/main.js net::ERR_ABORTED 404 stoic-roentgen-4de1ef.netlify.com/:1

I’ve never slow load times for my pages until a couple weeks ago. Below is a screenshot of the load time for main.js. Usually the first time I load the website, I’ll get 3-4 second load times (slower than usual), but if i refresh the load time will be 7-8 seconds.

I’m not sure why this is happening now when it was never a problem before. I’ve tried changing the primary domain to the www. version, but that didn’t have any affect. I’m not really sure what to do. Any help will be greatly appreciated!

An example instance is stoic-roentgen-4de1ef.netlify.com

As far as I can tell there is no file “src/main.js” in your deploy; the time spent in returning a 404 doesn’t really seem like the biggest problem :wink: This post may help you debug why you don’t have a file where you think one is:

If you are getting a slow response on an existing file (200) and could send us the value of the x-nf-request-id from that request, that would help us look at the internal log messages that would help us understand why:

From the articles you sent, I see that main.js isn’t in the dist directory. However, the page only seems to load once the response from the main.js request has been received. Here is the x-nf-request-id:
283c10e0-c806-4bd8-b598-c15b3a66bc08-929583 for the main.js request.

Hi @sat!

In your index.html file there is this line:

        <script src=../src/main.js></script>

The page will not show up until this script has been loaded. Because the 404 for that resource is really slow, it seems slow in general.

If you removed that line from your index.html the page will load fine. The resource does not exist in your deploy.
If there is a main.js in your git repository, but it does not exist in your deploy, you need to make sure it gets copied over by your build command. Also make sure you reference the file in the right path. If the main.js ends up in your deploy directory, you’d just use <script src="/main.js"></script>.

We generally can support you better, if you tell us what you are trying to achieve.
What was the reason you added the script tag pointing to ../src/main.js?

If you have a problem with slow loading scripts in general, good advice is to put the async attribute on your script tags.
Warning: This can cause your page to flash, because it shows up before the javascript has done its first render on the page.

Thanks for the help @fool and @marcus, commenting out the main.js script tag worked!

1 Like