Simple page scored low performance using Google lighthouse



  • Hello,

    I am a building a Web App using Quasar framework, and so far I have a very simple page (a drawer and header), I tested the performance of a build version using Google lighthouse and I got a low score 65%.

    Here are screenshots from the WebApp and lighthouse:

    The dashboard page ( the simple one )

    e43b2fff-6f5b-4d67-9bfb-9795c5fbe2a9-image.png

    The lighthouse score

    ef82c82d-4b41-4007-9630-c663cd22c147-image.png

    And below are the the components:

    MainLayout.vue

    <template>
      <q-layout view="lHh Lpr lFf">
        <q-header elevated>
          <q-toolbar>
            <q-btn flat dense round icon="menu" aria-label="Menu" @click="leftDrawerOpen = !leftDrawerOpen" />
            <q-toolbar-title>Task App</q-toolbar-title>
          </q-toolbar>
        </q-header>
    
        <q-drawer v-model="leftDrawerOpen" show-if-above :width="400" :breakpoint="400">
          <q-scroll-area
            style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd"
          >
            <q-list padding>
              <q-item active clickable v-ripple to="/posts" >
                <q-item-section avatar> <q-icon name="article" /></q-item-section>
                <q-item-section>Posts</q-item-section>
              </q-item>
    
              <q-item active clickable v-ripple to="/users"> 
                <q-item-section avatar><q-icon name="group" /></q-item-section>
                <q-item-section>Users</q-item-section>
              </q-item>
            </q-list>
          </q-scroll-area>
    
          <q-img class="absolute-top abwaab-logo-container" src="/statics/abwaab_logo.png" style="height: 150px" >
            <div class="absolute-bottom bg-transparent">
              <div class="text-weight-bold">Razvan Stoenescu</div>
              <div>@rstoenescu</div>
            </div>
          </q-img>
        </q-drawer>
    
        <q-page-container>
          <keep-alive>
            <router-view  :key="$route.fullPath" />
          </keep-alive>
        </q-page-container>
      </q-layout>
    </template>
    
    <script>
    import EssentialLink from "components/EssentialLink";
    
    export default {
      name: "MainLayout",
      components: {
        EssentialLink
      },
      data() {
        return {
          leftDrawerOpen: false
        };
      }
    };
    </script>
    
    <style lang="scss">
    .abwaab-logo-container {
       box-shadow: -7px 3px 8px 3px rgba(0, 0, 0, 0.12);
      .q-img__image {
        background-size: 70% !important;
      }
    }
    
    .q-router-link--exact-active {
      color: #000 !important;
    }
    </style>
    
    

    Dashboard.vue

    <template>
      <q-page class="q-pa-md bg-grey-3">
        <div class="text-h1">Dashboard Page</div>
      </q-page>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    

    Normally when it is a normal website I can manage somethings ( JS Bundling, Critical CSS, etc… ) to get the score higher, but with VueJs as per my knowledge I think such a thing, is handled and managed by the Vuejs/Quasar framework.

    So please give me some insights to fix this.



  • this is on dev mode?



  • @metalsadman Nope, it’s on build mode.



  • Just to confirm that my code is not the issue, I just created a fresh project with Quasar starter-kit (I didn’t touch the project), and I tested it on build mode and I got low score again : 53%. I believe there is something missing, can anyone replicate this step?



  • You can increase the performance by turning it into a SSR Quasar app. You can see the difference by lighthouse auditing the Quasar docs site. That’s a BIG Quasar app using SSR and PWA. Still no 90+ scores but better.



  • Hi, @dobbel thanks for the response.

    The requested from me is to have the application as PWA, which even has a lower score than SPA.



  • @saifobeidat Why a PWA has a lower score then SPA is not clear to me. The PWA’s I developed with Quasar load almost instant when you have already visited or installed it before.( and way faster then standard “HTML” sites) But I don’t think the Lighthouse bench will take that into consideration.

    btw with the rest of the marks Quasar scores pretty good with 90+ scores out of the box.



  • @dobbel , sorry but what do you mean by the rest of the marks?

    And yes, you’re right, the actual performance that we see and feel in our eyes differs than what the lighthouse records. but in my case, I need have a high score using the lighthouse, as it’s one of my client’s requests.

    Have you tried to test the performance score of a fresh quasar project? I just need to hear that it’s from setup and configuration



  • @saifobeidat My scores are about the same ( 1, or 2 points difference). With other marks I mean the SEO, Accessibility and Best Practices. You can always make your landing page with something more speedy.



  • Check this out.

    Quasar.dev
    a6046bf2-991a-4c0f-b8d2-c217f51aea50-image.png

    Vuetifyjs.com
    38b399b6-1de3-4807-838f-77c137743254-image.png

    Ionicframework.com
    e7f48197-44a2-4db7-847c-091218dc64d9-image.png

    buefy.org
    f00ba41e-e1eb-4da0-b692-dd92552822ac-image.png

    Bulma.io
    c61666dc-5bb8-4e1e-8483-5f71cef15448-image.png

    bootstrap-vue.org
    f9269eeb-e97d-475b-979e-daf3422ed865-image.png

    vuematerial.io
    2ac176c4-9566-4dc6-9302-6b5af7a9c11e-image.png

    That should tell you something.

    Scott



  • @dobbel @s-molinari thanks guys for your responses!!

    Okay, I feel now comfortable about Quasar and I am pretty sure that my Quasar Web App should have gotten a high score, more than 45% !

    But I need your assistance to figure it out, as my test was on a fresh quasar project, which comes with a drawer and a header I didn’t do anything,!

    Is there a documentation/steps should be taken into consideration while creating Quasar project ? Am I missing something?

    Please, excuse me, I am very new here.



  • Bootstrap is still king! You should know the basics of Vue.js . But other than that the Quasar docs are awesome and all you need most of the time.



  • Thanks @dobbel for the response.

    Okay, I am good at VueJs and I have the basics, but really I am not sure what this and the Bootstrap relate to the main performance issue? could you please clarify this for me.



  • Guys, how about we try to actually help?

    I’m nowhere near an expert (and I haven’t used Quasar for a while), but here is my 2 cents.

    First of all, make sure your web server gzips everything. This is standard practice.

    Second, if I recall correctly, regarding component loading, Quasar/Vue has options to load everything, or only load used components. Make sure you employ the second method. The difference between bundling two components and bundling fifty components when you only use the two is huge.

    Although not as big, the same goes for icon fonts and CSS. When you are using only two icons, no need to load all icon components. If you set Quasar/Vue to treeshake (remove unused resources from the bundles), your files will get much smaller, which will lead to much faster loading of the page.

    Regarding “preloading key request”, have a look at https://web.dev/uses-rel-preload/
    I don’t know/remember how it’s done in Quasar but it probably has some option for this too.



  • I just ran a fresh install on my computer and ran quasar build -m ssr and got this score using the built in server offered by Quasar (ie. going into the dist folder and running yarn start).

    f0a7a64b-5e0a-45b4-8ccf-fcaaf48fc5af-image.png

    There are simply way too many variables to properly help and to figure out why the score is so poor. We don’t even know what you did in terms of the server. The light house score board shows possible ways to improve the score. That is a start, but only a rough one.

    As I said on Discord, don’t concentrate on this performance score. Just build your app. Worry about performance, IF it becomes an issue with your users. If you aren’t in the know as to what makes an app perform poorly, then that takes a good bit of learning and not asking “Why?” in a forum. Sorry, if that sounds dismissive. That isn’t my intention. It’s just that this isn’t the way to go about finding out why you are possibly setting things up wrong with your server or your app and more importantly, as I said, don’t start building your app worrying about any relevancy of this score. You’ll never build what it is you want to build, if your knowledge on how to make it right in the beginning is missing. You are probably going to hit a whole bunch of other snags before performance should even be considered and the cool thing is, they, in turn, will help you learn those things you need to learn.

    Scott



  • @necmettin Thanks for your response.

    Okay, as for your points:

    1. As for the GZIP point, checked out the quasar.conf.js and gzip property is set to true, but I check the app to see if it’s really gzipped or not and it seems it’s not., so this point should be checked.

    2. As for the components loading, yes you’re correct while I was creating a new quasar project, I had to choose an option among these three: [1] Auto-import needed Quasar components & directives [2.] Manually specify what to import [3.] Import everything from Quasar… and I chose the first option which is the recommend one.

    3. To figure out what slows the app, I went to the dist folder, and I commented out the main quasar CSS file, and the performance result increased to 85% , I checked the CSS file, and it has all classes regardless they are used or unused. shouldn’t this file be minimized by Quasar? or it should be handled by my side using something like PURGCSS ?.

    4. How can I figure out, if I am loading all fonts and icons? and is this can be controlled by Quasar?

    5. Regarding preloading keys requests, I’ve searched the documentation, and unfortunately I found nothing talking about it

    Thanks for you help!



  • @saifobeidat

    1# You can check that in the network tab of the Chrome inspector/debugger.

    2# Seems fine ( could lead to unused components/directives being loaded if a component is first used and later not)

    3# That is a big increase! I found this:

    https://gist.github.com/codenamezjames/cbc882b89c9e7db8145898efc8183306

    https://quasar.dev/quasar-cli/quasar-conf-js (search for ’ minify’)

    4# icons and font sets that are loaded are defined in the quasar.conf file



  • @s-molinari Thanks for your tips.

    isn’t the purpose of this forum is to post the “Why and How” questions and to help each other?
    and I have not posted the question in vain, sure I have my reasons I just asked some help



  • This forum (or any system for support for that matter) is for help with specific problems. This isn’t a specific problem. It’s asking how to add performance to your project. Performance isn’t a problem. It’s a feature. If you asked, I am seeing the CSS of all the components being added to the dist css file, how can I stop that? That is a specific problem? See the difference?

    Nonetheless, we’re looking into that possible problem with the CSS.

    Btw, Quasar minifies the CSS automatically. The minify build prop is to turn off minification, if so desired.

    Scott



  • @saifobeidat Well s.molinari answer is kind on ‘spot’ about optimizing performance strategy.

    He’s saying that it’s generally a better approach to worry about optimizations only when it becomes a problem, after you build (most) of the app. The why is explained in his second last post.

    btw You might have found your first quasar bug! ( css thing)


Log in to reply