Generate bundle instance of code splitting

[chiqui3d]

I'm having a lot of indexing problems thanks Google and his Mobile Friendly Test checking tools.

All the problems are related because it can not load the files. The exact error is Page partially loaded

The problem URL is: https://www.taxi-nerja.com/es/blog/colores-del-taxi-en-el-mundo/

But after researching I've seen this happen to many people even I have reviewed large companies where they have made pages with Next.js and I've gone through the validator and have the same problem. They don't finish loading the files.

Nike
https://search.google.com/test/mobile-friendly?hl=en&id=wY2s4RmW_5iCeqZ-w2Vr-A&view=fetch-info
Hulu
https://search.google.com/test/mobile-friendly?hl=en&id=2BUhNByfD1e-TyRywll0Fw&view=fetch-info

So my question is simple, is it possible to have the option to generate a single Javascript file instead of a bunch of JS file. I think that having only one file can solve the loading problems.

What do you think?

[mattcarlotta]

I'll start off by saying that I'm not a backend/server setup expert, but I think there's some unoptimized server configurations that you need to address:

1.) You're serving uncompressed assets in production!
Response header to fetching: commons.7a7e4d9905dd7bb582ec.js

Accept-Ranges: bytes
Content-Length: 180666
Content-Type: text/javascript
Date: Sat, 29 Aug 2020 15:15:35 GMT
ETag: "ac1fdf-2c1ba-5ae044ed1a41b"
Last-Modified: Sat, 29 Aug 2020 13:40:09 GMT
Server: Apache

At a minimum, you should be serving gzipped assets (this is most likely the reason why the mobile friendly test is producing warnings because it's taking too long to load):

Content-Encoding: gzip

2.) None of your image assets are being cached by the server:
Response header to fetching: images/en.png

Connection: Keep-Alive
Date: Sat, 29 Aug 2020 15:15:35 GMT
ETag: "ac0d31-ef9-5ae044e7512a3"
Keep-Alive: timeout=15, max=99
Server: Apache

Ideally, images should have some sort of cache control:

Cache-Control: public, max-age=31536000

Also, I noticed that your image assets are using the Keep-Alive connection which may hurt your website's scalability as more users attempt to connect to your server. The Keep-Alive connection downloads all assets over the same connection; however, if you have many users attempting to establish a connection, then your Apache server must queue incoming connections until the previous connections have closed.

---

So my question is simple, is it possible to have the option to generate a single Javascript file instead of a bunch of JS file. I think that having only one file can solve the loading problems.

This won't solve any problems but create more. Serving one large Javascript file results in slower TTFB/TTI because it puts unnecessary strain on client/server resources (bandwidth/JS execution time). For example, when a user lands on ANY page they must download and consume the entire website. Webpack introduced code-splitting to reduce this unnecessary overhead by only fetching the assets required to view the page during run-time (assuming the Webpack optimization.splitChunks configuration has been set up properly and optimized).

As for the test results, the websites you've mentioned above appear to block bots (read more about robots.txt) and prevent crawling. In addition, most of the assets that fail to load appear to be external metrics/ads/tracking from other domains.

[chiqui3d]

Hey @mattcarlotta,

Thank you very much for taking the time to respond.

I will inform you:

I disabled the cache and gzip compression on the server in case Google is get other data(because i made some changes in the Next.js the js file was renamed). I just activated it anyway, but the same problem persists.

In my case the robots.txt is not blocking anything, neither before nor now. https://www.taxi-nerja.com/robots.txt

About the code spliting in some cases I do not agree, and even if that page(web.dev) says otherwise sometimes it has nothing to do with the real Google bot, and I think that there should be the possibility to make bundle, and everyone chooses his option. I've been looking for a way to do it, but I can't find it, I'd really like to try create only one file. Since I used to do it like this with Webpack(without Next.js) and I never had any problems.

About Keep-Alive shouldn't be a problem, but I will still investigate further and contact the hosting provider. Because it's true that I would be limited, but it's 100 connections, I don't have more than 3 visits a day. Actually, the visits I have now are only from the Google bot :(

Thank you for your great response

[c0b41]

google bot not crawling js file, because they don't need to. that's why showing warning nothing wrong

[chiqui3d]

Yes, I just read on Google's support forum that sometimes Goolge does not crawl JS files because he doesn't need to.

[mattcarlotta]

I disabled the cache and gzip compression on the server in case Google is get other data

I'm not understanding this thought-process as gzip compression only compresses served assets during run-time (unless you've specifically enabled it during build-time and are telling your server to only serve those .gzip assets). But even that shouldn't impact 3rd party requests/assets.

About the code spliting in some cases I do not agree, and even if that page(web.dev) says otherwise sometimes

Code splitting allows your JS/CSS assets to be divided up over multiple requests and multiple pages. By bundling everything as one unit, you're forcing the server to serve the entire application and the client to consume it. When you start working with older devices and slower connections, the UX will drastically decline.

I just activated it anyway, but the same problem persists.... About Keep-Alive shouldn't be a problem, but I will still investigate further and contact the hosting provider.

My guess is that this could potentially be where the problem lies and it's why I'm seeing unstyled content in the preview. Since the Keep-Alive response property downloads all assets in one connection, the test may be timing out all requests if it takes too long. Again, just a guess.

[chiqui3d]

Yes, it could be a Keep Alive problem or if you run it through second time it reads back well, only showing the errors of files that are not loaded. Then it makes me think that it could be a Google problem, but I am not going to decide for Google and I will contact with the hosting and in any I am going to change of Hosting with one that does not have the option Keep-Alive.

I'm not understanding this thought-process as gzip compression only compresses served assets during run-time (unless you've specifically enabled it during build-time and are telling your server to only serve .gzip assets). Also, this will not impact 3rd party requests/assets.

Here I was wrong, because I was trying so many things to get it right, that I decided to turn off related to compression and caching.

thank you really.