avatar

Trying Real™ Websites in the SerenityOS Browser

Published on 2022-07-07.

Well hello friends! After the recent release of Ladybird, a prototype browser GUI written in C++/Qt using the LibWeb engine, SerenityOS and specifically its browser engine subproject got quite a bit of attention on the internet again — everything from the usual "nooo you can't build a web browser from scratch" and "y tho", to excitement, to heise online suggesting we're "competing against Google" now, and while this is not a goal we set for ourselves, it's a noble one! :^)

I know better than to engage with the negative comments, but it did spark my interest in seeing where we're actually at right now in terms of usability. Now, being one of the developers, I obviously test websites all the time; but on the other hand browser devs like artifical test cases — colorful boxes, Lorem Ipsum, or the infamous border-radius-shadow-egg.

Getting these individual building blocks to work nicely on their own is a lot easier than the result of combining them into a modern website. To make things even more difficult, I'm only going to try landing/login pages, which are usually much more complex than your average "text in a box" pages. Custom fonts, plenty of images, complex layouts, you name it.

Setup

I did not prepare for this in any way, I'm simply using a regular build of Serenity, at commit b3deec0.

To compare each result to the expected rendering in a mature browser, I'm running Firefox 101 on Fedora, i.e. the Gecko browser engine 🦎. I did change the user agent string to Serenity's (Mozilla/5.0 (SerenityOS; x86_64) LibWeb+LibJS/1.0 Browser/1.0) to make sure I'm being served the same content. Google for example falls back to their old/legacy/simple version of search (not sure what they call it) when using an unrecognized UA string.

All pages were visited via a VPN connection into the US.

Results

Below are the screenshots of 22 websites I tried: some of them are the most visited websites worldwide, and some are random ones of things I like & use. Enough talking, let's have a look!

Summary

As you might have noticed, I'm rating quite favorably here, always keeping in mind that this is a from-scratch engine that just turned three years old, mostly developed by hobbyists in their spare time; and Andreas :^)

The top two poorly performing features are clearly images not appearing consistently (which could be anything from using methods to load/apply them that we don't support to using formats we can't decode) and custom fonts (same reasons). And then of course there's a plethora of layout issues everywhere.

Of course most of these are far from perfect, and (hopefully) no one is claiming otherwise. However, just a year ago or so many of these would have crashed the browser or rendered a blank page (especially when JS language support was much weaker), so personally I find the progress we have made so far convincing enough to believe that we'll have results in a couple of years that are worthy of saying: "they're the same picture".

And even before then, I'm looking forward to doing this again in a few months to see what's changed!