Simple page scored low performance using Google lighthouse

saifobeidat

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 )

The lighthouse score

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.

metalsadman

this is on dev mode?

saifobeidat

@metalsadman Nope, it’s on build mode.

saifobeidat

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?

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.

saifobeidat

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

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

saifobeidat

@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

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

s.molinari

Check this out.

Quasar.dev

That should tell you something.

Scott

saifobeidat

@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

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.

saifobeidat

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.

necmettin

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.

s.molinari

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

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

saifobeidat

@necmettin Thanks for your response.

Okay, as for your points:

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.
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.
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 ?.
How can I figure out, if I am loading all fonts and icons? and is this can be controlled by Quasar?
Regarding preloading keys requests, I’ve searched the documentation, and unfortunately I found nothing talking about it

Thanks for you help!

dobbel

@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

saifobeidat

@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

s.molinari

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

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)