I am building a website with SvelteKit. SvelteKit makes things a blast, especially server-side rendering is easy. Currently, I am serving the website using SvelteKit's node.js adapter due to the high amount of database generated web pages.
However, despite the server-side rendering, I am facing an issue of low-performance mobile connections, as per PageSpeed Insights.
First Contentful Paint is slow (4.0s) which I find quite unacceptable myself.
I analyze this issue mostly to do with blocking the loading of vendor.js
.
Node.js adapter loads the vendor.js as the following:
<link rel="modulepreload" href="/_app/chunks/vendor-87f5cdbf.js">
Some other modulepreload
bundles are also included, but they do not cause significant loading time
vendor.js
is 350kb and the cause of the most blocking for the site load.
My question is
- How can I analyse what goes into vendor.js
- How can I reduce vendor.js size in SvelteKoit
- How can I make some of the JavaScript code load lazily, as for the server-side rendering I believe most of this code could be run after the first content full paint
My frontend is open source for further information. I am using svelte-bootstrap library.