B4J Question [BANano] [SOLVED] Please advise on how to improve performance scores

[Mashiane]

Ola

Below are the test scores of a completely blank website I have done! As one can see, the speed tests are failing.

Located on http://tgifzone.com/abstractdesigner/

In my app, these are my test settings

BANano.TranspilerOptions.UseServiceWorker = True
    BANano.TranspilerOptions.MergeAllCSSFiles = True
    BANano.TranspilerOptions.MergeAllJavascriptFiles = True
    BANano.TranspilerOptions.MinifyOnline = True
    BANano.TranspilerOptions.RemoveDeadCode = True
    BANano.TranspilerOptions.GZipGeneratedWebsite(10)
    BANano.TranspilerOptions.ShowWarningDeadCode = True

Compression:

I was told that our ISP has this enabled, thus me including GZIPGenerateWebsite. I have images on my assets folder, could the 2nd line on compression be related to that? Can one please advise?

Minify Javascript:
I have used cdn versions of the resources, whilst 3% and less seems insignificant, overall its not enabling an A score of 100%. What can one do in this instance?

Browser Caching:
How does one address the issue of expiration? The files are unlikely never going to change anytime soon anyway? Can this expiration be applied to image resources in the assets folder?

etc, etc

Thanks

 

[alwaysbusy]

I was told that our ISP has this enabled

It is not. You can check this in the chrome dev console (right-click on the headers in the network tab, add column Response Headers - Content-Encoding)

Your site:

An example of where gzipping is enabled by the ISP:

Of course the sheer size of your libraries does not help getting you great scores. Here is a comparison between your empty project and an empty BANanoSkeleton project:

In reality (real use of) this may not be a real problem. This is something you have to experience yourself. It may not give good numbers, but if it loads fast enough (under 2 seconds is fine, so you should try to get it there, now it is 4.5s) that may be ok.

I know you love to use code generators and they may give fast results, but they also often produce very dirty code. The use of Vue may not be the best choice either as all it does is add an extra layer of code. What I mean is B4J should've been your 'Vue' layer. BANano was meant to be the tool to write your own 'Vue' library. Vue is also just a tool (that happens to be writting in javascript itself) to help you write a javascript-build website, but that is exactly what BANano does too.

Things you can check in your libraries to allow BANano to do some cleanup (remove dead code) are the following:

1. are you making smart use of BANano.DependsOnAsset? This may require you to split up the javascript/css libraries you are using (or with a bit of luck they already have separate modules for each component)

Example in the BANanoSkeleton SKMenu component. Those assets will only be loaded IF one uses the SKMenu component:

BANano.DependsOnAsset("BANanoSkeleton.menu.min.css")
BANano.DependsOnAsset("BANanoSkeleton.menu.min.js")

2. Avoid circular referencing of classes at all costs. Such references will prevent BANano from removing dead code.

For example you may have a class HTML that is used in MyComponent as a property. At the same time, the HTML class returns somewhere in its code a MyComponent class. If so, this code is considered circular referencing and neither of the classes will be removed, even if neither of them are used.

By keeping track of those two points, my 'empty' BANanoDemo above has not generated any 'not-used' BANanoSkeleton code and hence is very small and fast to load. That is the reason why it gets the 100% scores (together with compression, correct use of cache, CDNs etc on the server side). As you can see in the top images, my app.js takes about 60 ms to load, yours 4.22 seconds.

This is the .htaccess file on my server (for the caching and Charater Set):

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>
AddCharset UTF-8 .html

It does take quite some effort from a library builder to make good libraries, I know. While writing the BANanoskeleton library, I constantly think about stuff like that. Something code generators cannot do.

Alwaysbusy

 

[Mashiane]

Great feedback, thanks a lot!

Yes, you had earlier indicated that Banano was not written for the kind of stuff that Vue does the way it does. With that said you have also helped with Banano to address some of the challenges I had with Vue. Yet, there are things that I still haven’t figured out how can I do with Banano for Vue and I won’t crack my skull about them anyway.

I knew when I started BVM that it won’t be pure Vue and it won’t be optimized to the max like pure breed Vue apps, but then it has been a painful and a joyful invention at the same time.

On the issue of circular referencing, is that about the use of ‘Return Me’?

When I looked at this yesterday I realized that creating large libraries with a lot of components should be avoided at all costs.

This just bloats the base library. Having just one component that can address styles, classes and attributes that one can then use to design their UX using the abstract designer is far more better. One can just create blocks and save them as already made abstract designer layouts.

Now that I know that would have been the approach I would have taken from the beginning.

However in this particular case, vuetifyjs is the culprit in terms of page speeds. I went through their issues log and found out that even a pure breed Vue project failed with googles speed tests. It’s a very good product but then hopefully these issues can be resolved.

We will see anyway when they release the new version based on vue3.

TheMash

 

[Mashiane]

09 November 2020 - Latest updates on this...

1. We have created a banano library with 1 generic custom component. This means all ux blocks need to be created via the abstract designer.
2. This has resulted in a b4xlib that is 60KB.
3. We tested with a blank site now using BANanoVuetifyAD, this is an update to the last beta but now with 1 generic component.
4. Besides the compression issues we have been advised on (not yet implemented), this boosted the overall performance of the blank site.

The results are: http://www.tgifzone.com/bananovuetifyad3

Dareboost.com

Gtmetrix.com

Dotcom-tools.com

PingDom.com

And yes, there are other website speed test sites.

Conclusion:

The new results with the new approach of creating the BVM apps works well and better. Following the abstract designer approach with 1 generic component means, that the library maintenance will be minimal or almost non-existent as designs will rest of individuals.

TheMash