No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Simple page scored low performance using Google lighthouse

    Framework
    5
    25
    2929
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      saifobeidat last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        this is on dev mode?

        1 Reply Last reply Reply Quote 0
        • S
          saifobeidat last edited by

          @metalsadman Nope, it’s on build mode.

          1 Reply Last reply Reply Quote 0
          • S
            saifobeidat last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel last edited by dobbel

              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.

              1 Reply Last reply Reply Quote 0
              • S
                saifobeidat last edited by

                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.

                dobbel 1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @saifobeidat last edited by dobbel

                  @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.

                  1 Reply Last reply Reply Quote 0
                  • S
                    saifobeidat last edited by

                    @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

                    dobbel 1 Reply Last reply Reply Quote 0
                    • dobbel
                      dobbel @saifobeidat last edited by

                      @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.

                      1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by

                        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

                        1 Reply Last reply Reply Quote -1
                        • S
                          saifobeidat last edited by

                          @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.

                          dobbel 1 Reply Last reply Reply Quote 0
                          • dobbel
                            dobbel @saifobeidat last edited by

                            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.

                            1 Reply Last reply Reply Quote -1
                            • S
                              saifobeidat last edited by

                              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.

                              1 Reply Last reply Reply Quote 0
                              • necmettin
                                necmettin last edited by

                                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.

                                1 Reply Last reply Reply Quote 1
                                • s.molinari
                                  s.molinari last edited by

                                  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

                                  1 Reply Last reply Reply Quote 0
                                  • S
                                    saifobeidat last edited by

                                    @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!

                                    dobbel 1 Reply Last reply Reply Quote 0
                                    • dobbel
                                      dobbel @saifobeidat last edited by

                                      @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

                                      1 Reply Last reply Reply Quote 0
                                      • S
                                        saifobeidat last edited by

                                        @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

                                        dobbel 1 Reply Last reply Reply Quote 1
                                        • s.molinari
                                          s.molinari last edited by

                                          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

                                          1 Reply Last reply Reply Quote 0
                                          • dobbel
                                            dobbel @saifobeidat last edited by dobbel

                                            @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)

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post