Page speed issues

[benmccann]

Is it fair to assume that https://routify.dev/ was built using Routify?

I get a Google PageSpeed score of 73: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Froutify.dev%2F. You can also reproduce by using the Lighthouse tab in Chrome. I'd hope it could do a bit better

When I look in the network tab over 100 requests are being made to load the index page

The reason I care about this is because I want an idea of what it'd be like to build my site using Routify. If there's this many latency issues then I probably will investigate other solutions

[jakobrosenberg]

Thanks for catching this. This is caused by the site preloading all dynamic imports. As such this isn't a problem with Routify itself, but the way we've chosen to preload files on the website. The code in question can be seen here

  self.addEventListener("app-loaded", async () => {
    routes.forEach(route => {
      route.component();
      route.layouts.forEach(layout => layout.component());
    });
  });

The caching shown here can be done cleaner and better with more recent version of Routify.

[jakobrosenberg]

I should probably add that you have complete control of dynamic imports with Routify. You can set any folder to bundle its content to avoid too many requests. You can even create new bundles within bundled folders, so if admin and admin/crud are both set to be bundled, you'd have two bundles _admin.js and _admin_bundle.js. These two bundles will have no overlap of code. To take it one step further, you can specify files or folders within these bundles to not be bundled.

An example of this can be seen here. https://example.routify.dev/example/transitions/tabs/home

While everything else in the example app isn't bundled, the transitions example folder is bundled into one file. This is to avoid the flickering that would occur if content was loaded while a transition is in progress.

While bundling and preloading determines the number of initial requests, there are additional features which improves performance. SSR, static exports, prefetching and precaching, offline-first etc.

Page request flow (no flowchart expert)

Offline-availability and throttled prefetching of external assets

If you have more questions or comments, feel free. 🙂

[benmccann]

Is there any documentation for the bundling you were mentioning?

[jakobrosenberg]

Not yet, but it's on our documentation todo list. roxiness/routify.dev#129

A folder can be bundled by setting the following metadata in the folder's _layout.svelte

<!-- routify:options bundle=true -->

To except a file or folder from bundling, simply use false/true in a nested folder or file. Only _layout.svelte can be set to true as it bundles nested files and folders of its current folder.

SSR is handled by serverless functions which render the page in JSDOM. This allows SSR without framework semantics and formalities. You can also use Spassr or or our SSR package if you run your own node server.

[benmccann]

How is the application state handled if you don't use hydrate for SSR? E.g. imagine your homepage shows a list of article headlines and you click "more" to load more at the end. If you don't have the initial list of articles in a Svelte reactive variable already, how can you append the new ones?

[jakobrosenberg]

SSR rendered pages load the app in the background. Once loaded, the app then renders in a hidden div. Once the app is rendered, the initial page is replaced with the app. This is seamless and happens near instantly.

[jakobrosenberg]

Fixed. 😎

[benmccann]

nice!!

For whatever reason I don't get the same scores. I only get performance scores in the 70s. Is there a change that hasn't been rolled out yet?

Google has a tool that will help reproduce: https://developers.google.com/speed/pagespeed/insights/?url=routify.dev

[jakobrosenberg]

I use the Lighthouse provided in Chrome.

The one on developers.google.com seems very unreliable. At least compared with my own findings.

[benmccann]

I also get a score in the 70s in Chrome. That's where I noticed it first. I just shared the Google link because I thought it was an easier way to reproduce

[jakobrosenberg]

Ah. Just had a look at Cloudflare and the proxy was disabled. Have enabled it now. Hopefully that should fix it.

[jakobrosenberg]

That led to a 308 permanent redirect error. Will have to investigate Vercel/Cloudflare.