Static GitHub Issues

[1702] Help Needed : Loading order incorrect with prefetch and preload, delayed boot time

prev: Dynamic routes along with manually created?
next: Is there any way to customize the 'beforeEach' hook of vue-router?

Hey there. While i'm globally satisfied with Nuxt performance, I'm always trying to achieve a quicker first display for the user.

I noticed quite a delay when coming with a slow network connexion, so I tried to analyse the asset loading using google chrome. here is my discoveries :

waterfall

and the Associated DOM <img width="769" alt="capture d ecran 2017-09-21 a 14 12 56" src="https://user-images.githubusercontent.com/6388929/30695228-aea421e0-9ed7-11e7-83c4-858529d8de94.png">

This is the loading waterfall called just after a request made to a "profession" page, served through SSR. You can see the loading order has a few faults :

  • Vendor, app and manifest are loading first ans simultaneously, thanks to the preload instruction. That's a good thing
  • Then comes all the pages with the prefetch instruction. The three first being loaded are not the files corresponding the the page I'm displaying. That a first issue.
  • Then the "current JS page file", and it's associated layout are downloaded a second time, I guess it's because they are marked twice in the DOM, one with the prefetch instruction, one with no instruction.
  • Boot time is delayed after I got the CSS and asociated font, not sure why since I'm using WebFontLoader in order not to wait for the font.

Several things there.

  • First is the incorrect loading order, and the resources downloaded twice. This may be part of the Vue SSR Bundler.
  • Second is the boot time. I can't find why my app isn't displayed earlier. Point of SSR is not to wait for assets to be loaded before displaying the page. I guess this is on my side, but I can't see anything delaying the rendering.

If anyone encountered the same kind of issue, I'd be happy to have some hints on what to do to improve both loading order, and first display timing.

Thanks

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1525">#c1525</a>)</em></sub></div>