Performance issues with Flowbite on Lighthouse

[aryanshirani]

Describe the bug If you run the website on lighthouse like in our test, where we used the Flowbite website, we really have bad scores.

To Reproduce Steps to reproduce the behavior:

1. Go to any pages of flowbite.com
2. Get the url
3. Run it on lighthouse from the inspection dev tool of chrome or use google site speed checker
4. You will see the error in the results

Expected behavior Those are really simple and small elements that takes a lot of time to load

Screenshots https://imgur.com/a/1SaNj42

Desktop (please complete the following information):

• OS: IOS
• Browser: Chrome
• Version: 120.0.6099.119 / 12 December 2023

Smartphone (please complete the following information):

• Device: iPhone12
• OS: iOS17.2.1
• Browser: Safari
• Version: 17.2

Additional context We tested directly on the website of Flowbite, and look like performance issues are quite big for elements that are really small, so we don't understand how this is possible.

[zoltanszogyenyi]

Hey @aryanshirani,

Thanks for opening up the issue.

I ran a test on Lighthouse: https://pagespeed.web.dev/analysis/https-flowbite-com/rqde219ej7?form_factor=desktop

The Flowbite components and JS are not responsible for the Lighthouse result, our homepage contains a lot of SVG markup and third-party JS plugins (ie. YouTube, Crisp) that block rendering, hence why the pages have a higher loading time.

Of course, we continously try to improve performance for our own website, but currently we're focused on releasing new features and resolving current bugs for the library.

The Lighthouse performance of the homepage doesn't have anything to do with the Flowbite library itself.

Thanks, Zoltan

[aryanshirani]

Hello, I'm sorry to see that you did not dig in the screenshot and just ignored the ones I added, you could see that the test was also runned on basic text pages like this: https://flowbite.com/license/

So there is no other elements than text and in the screenshot we have the details

[zoltanszogyenyi]

Hey @aryanshirani,

I've ran the test for this page: https://flowbite.com/license/ (https://pagespeed.web.dev/analysis/https-flowbite-com-license/b3r1ttty12?form_factor=desktop)

I believe that the rendering issue could be to two reasons:

• font loading
• the antialiased class that is being added for font smoothing

The LCP issue is due to the last and full rendering of the text, and not the initial load. This means that the text is most likely being shown, but not fully rendered as there's font loading and font smoothing that is being applied to it.

[aryanshirani]

Very strange I really have no clue why we get this issues on google page speed

Aryan Shirani CEO & Full Stack Designer at Blurr

+39 377 093 54 29 @.*** www.blurr.it Via III Novembre 35/1, 38060 Calliano, Trento

On 27 Dec 2023 at 19:06 +0100, Zoltán Szőgyényi @.***>, wrote:

Hey @aryanshirani, I've ran the test for this page: https://flowbite.com/license/ (https://pagespeed.web.dev/analysis/https-flowbite-com-license/b3r1ttty12?form_factor=desktop) I believe that the rendering issue could be to two reasons:

• font loading • the antialiased class that is being added for font smoothing

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>