Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSR: Preloading and critical CSS injection features are not functioning

See original GitHub issue

Describe the bug I’m not sure if that’s a bug, maybe that worked before and stopped working now, or it is a feature that hasn’t been implemented yet, but vue-server-renderer has the ability to detect the currently rendered components and actively inline the critical CSS into the HTML source and then preload the rest of the files.

I’m currently migrating from the standalone vue-cli + ssr based app to the quasar standalone app and had encountered this issue that results in low scores for medium-large projects with lots of code (not noticeable if you run the demo quasar app in perf tester) compared to our vanilla vue ssr version.

Codepen/jsFiddle/Codesandbox (required) Install the default demo

To Reproduce Run quasar build -m ssr Start the server and open localhost:3000

Expected behavior If we hit the / route backed by the code

  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },

The components layouts/MainLayout.vue and pages/Index.vue should be preloaded and some of their CSS should be inlined as part of critical CSS technique.

Current behavior The render-critical components layouts/MainLayout.vue and pages/Index.vue js and css assets are loaded by the low-priority prefetch tag which significantly decreases the performance.

https://w3c.github.io/resource-hints/#prefetch The prefetch link relation type is used to identify a resource that might be required by the next navigation

The mentioned assets are not needed on the next navigation, they are needed on the current navigation.

Here’s what Lighthouse tool thinks about this and hits the website with a huge penalty CleanShot 2020-12-24 at 20 28 26@2x

Issue Analytics

State:
Created 3 years ago
Reactions:6
Comments:13 (7 by maintainers)

Top GitHub Comments

2reactions

hawkeye64commented, Feb 1, 2021

Meh, not much improvement or changes. And looks like it’s not maintained either.

2reactions

laekem34commented, Feb 1, 2021

@dmitry No, until the issue is fixed, i use a white overlay on the viewport and i remove it when window was loaded to avoid to see elements that do not have their css loaded yet

Worst solution ever 😅 (directly in index.template.html, very bad but temporary)!

 <style>
      #overlay-screen {
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
      }
 </style>
<body>
    <div id="overlay-screen"></div>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
    <script>
      window.addEventListener('load', function() {
        document.getElementById('overlay-screen').remove();
      })
    </script>
</body>