Performance Optimization - Lighthouse scores (WeWeb crushes!)

[clncsports]

After being a bit bummed by a couple of my projects’s poor performance scores in Lighthouse, I was pleasantly surprised to see stellar scores on the docs.weweb.io page (weweb.io also scores great):

This shows me that a highly performant site (in Google’s eyes at least) is indeed possible with Weweb - yay!

So, Weweb team (@Joyce @aurelie etc), is there anything you can share in terms of optimization tips and tricks, starting with low hanging fruit?

After testing lighthouse performance across several Weweb-built sites that I’m aware of, I see most are suffering from lack of text compression for instance. Your docs page does not.

How did you approach the page to get 0ms of total blocking time?

What other tips and approaches to page load can you share to help us reach this level of performance?

Thanks!

[clncsports]

And to help form the business case for investing the time to make this type of “how to” available…

TLDR: sharing the best practices here will lead to new business, from me and probably others.

I was previously under the assumption that I would use WeWeb only for the webapp portion of my application, but would be stuck using something else for my main content pages (home page, blog, etc) for the purpose of optimizing for performance and page ranking.

Seeing your well-optimized pages makes me think it’s possible for my entire site to be built on WeWeb without any performance sacrifices.

That will mean a new subscription from me, as I intend to keep the webapp and content portions of my site in separate packages, deployed on separate subdomains.

I suspect I’m not the only one here. I’m eager for you to take my money - show me how!

[Joyce]

Hello @clncsports

Great question!

Unfortunately, the Lighthouse scores of WeWeb apps don’t perform quite so well (yet! )

When you click publish, WeWeb generates a Single-Page Application with a bundle of files inside a js app. As a result, the content is not there on page load.

Lighthouse scores don’t like that.

We pre-render the static content, i.e. content that is hard-coded on your app or bound to a static collection. That improves Lighthouse scores but doesn’t beat tools that are specialized in SEO.

If SEO is a primary concern, we recommend you use a specialized tool like Webflow or Vuepress. This is what we do for our own SEO-focused projects like the website or user docs.

WeWeb really shines when user interactivity and applicative features are your primary concern. That’s why we built our public roadmap and the upcoming academy in WeWeb.

We know users would love to have only one tool to build all of their frontends but we’re not quite there yet. We’re working on it though! We know it would help a lot of people.

Does that make sense?

That doesn’t mean that there aren’t performance improvements you can make or that we are discarding SEO completely

Here are some things that you can do on your WeWeb apps that will improve its Lighthouse scores and, most importantly, the user’s experience:

• follow SEO best practices when building:
  ** add titles & metadata to all your pages
  ** add alt text on all your images
  ** use headings for titles
  ** use elements with the correct HTML tags (e.g. buttons, select, etc.)

• don’t load too much data on the page:
  ** compress images
  ** keep your pages short and simple
  ** avoid superfluous nested containers
  ** add backend filters on big sets of data
  ** fetch collections only when you need them
  ** use linked sections to avoid reloading data the user has already loaded

Let me know if that helps and if you have any further questions. I’d like to write a complete guide on the topic to help you and others build the best performing apps possible

We are also recording 2 video courses for the upcoming WeWeb academy to help you with all of this! Feel free to send me a direct message if you’d like to be onboarded as a beta tester in early March.

[clncsports]

Ahh! I should have inspected the sites a bit further before assuming they were built on weweb.

Your tips definitely serve as a helpful checklist, so thank you. Looking forward to the weweb academy content to optimize further.

[unboxengage]

Hi Friends,
I am relatively new to lowcode in general and weweb.io in particular… But so far LOVING it.

I am trying to put together a webapp on weweb.io (in production), but am struggling with the app latency.

Homework:
I looked through the following community posts on reduce page load latency (Need help, speed rendering of the page is really slow (VIDEO) - #5 by Broberto
Performance Optimization - Lighthouse scores (WeWeb crushes!) - #2 by clncsports
Image rendering latency in weweb - #7 by dorilama
Best practices / strategic advice for fetching and displaying data
Page Navigation Performance (Located in Sydney) - #4 by Broberto
)

Here are a few things i have done to improve based on what i could understand,

• converted all media to compressed (webp/m format)
• setup pagination for collections
• setup a controlled collection pull (as much manual, avoid repetetive loading)
• fixed any errors on the page

Status:
and YET… when i load a specific page (pidm), load time is a mind numbing 14secs… Lighthouse score is like 20-30

1. There is no detail in the weweb editor log to know what is driving these 14secs…
   

2. Using Chrome web developer tools on the browser, i found that there is some 12s of ‘scripting’
   

   

Ideally i would like to check out these JS to understand what’s really happening behind the scenes thats causing this atrocious delay, but since I am not very techy and definitely quite early on frontend (CSS, JS) tech, am clearly at my wits end.
Any advice, suggestions on tools or experience sharing on how you resolved such issues would be much appreciated.
Thanks

[danielmigizi]

Thanks for sharing. This is great. And vv helpful.