Boost performance of your Bubble site (Lighthouse score 79)

Tips
1

Give your Bubble site a performance boost.
Google Lighthouse score is 79.

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["/version-test/assistants", "/version-test","/version-test/agent-details/*"]
    }
  ]
}
</script>

and then click on agents in the main navigation

4 Likes
2

This only works on Chrome.

1 Like
3

I can’t believe it, how fast a Bubble site can be.

4

So what is the strategy in your test setup. To place the script for the /assistants page to be pre-rendered and therefore faster to load onto every page of the app so that no matter where in the app the user navigates to the assistants page from it is pre-rendered and faster to load?

How is this impacting lighthouse performance score? My limited understanding is that the assistants page gets crawled individually and so the pre-render would not necessarily affect that page performance in isolation because if user navigates directly to that page with link, it would not have been pre-rendered.

I’m trying to understand more about how to implement into the app, and what are the expectations in how it will improve performance, either from perspective of just a users experience while on the site or is it actually improving lighthouse scores which in turn can benefit SEO?

1 Like
5

That isn’t the case..

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["/version-test/assistants", "/version-test","/","/version-test/agent-details/*","/version-test/registration","/version-test/admin-dashboard","/version-test/dashboard"]
    }
  ]
}
</script>

Just add all your pages in this script and they will pre-rendered.

1 Like
6

Interesting approach. I’ll certainly give it a shot.
Thanks for sharing!

1 Like
7

I think it works on other Chromium based browsers. It works on Edge too.

1 Like
8

There’s a trade off that might cost you additional WU. What this does in general is to prerender what it thinks you’re going to load next, let’s say a page from a hyperlink, opens a hidden iframe and then a page loads in advance in that iframe.

Good if you know what you’re doing…since you’re opening your Bubble page in an iframe, it will load and run like you opened the page normally. This means any API calls which translates to your searches being run, which means WU.

Best that you test the impact of WU on your app before throwing this around.

9

I don’t use iframes at all.
And I don’t allow to render the app in a iFrame

10

Thank you. I spent some time playing around with this today. Saw a noticeable improvement with it. Asked AI more about it as well and it is pretty cool. Definitely going to play around with it a bit more as it seems to have a benefit for SEO.

2 Likes
11

I don’t know why the pre-rendering doesn’t work for the link to the frontpage :frowning: