Lighthouse is a fun tool from the developer team at Google. You just point it at any website and it tells you how performant that site is in various dimensions (like SEO, performance, or accessibility). Lighthouse is a great way to get a reality check on your site: will it perform decently well across the variety of platforms (mobile, desktop) and differing bandwidth conditions (it simulates low bandwidth as part of the tests).
I recently open sourced a project called Svekyll which offers the simplicity of Jekyll blogs but with the futuristic power of Svelte. SvelteKit has a lot of power inside it; one thing I’ve learned as a developer is that “with great power comes great responsibility” which means typically “just getting it built is 10% of the story, you need to spend a LOT of time tweaking for performance and usability.” Yet, when I ran Lighthouse on it without doing any of that, I was amazed at the results.
TL;DR: What blows my mind is that with an almost brand new SvelteKit project where I have spent zero time optimizing the code for SEO and performance, the results are best of class. SvelteKit is doing something really special here. If you are not using this revolutionary project (and Svelte as well) you are missing out on a big change.
So, I started poking around at other sites. You can run Lighthouse on any site. The results were fun and a bit surprising.
First, I’ll show a few home pages of the upstarts, including Svelte and SvelteKit itself. Then, I got curious about some of the bigger projects, and even the home pages of some of the largest companies on the Internet. I was not expecting the results I got.
(I’m unsure if Lighthouse can optimize its results for problems on the client side, so take these results with a grain of salt. Having said that, they were all compiled at the same general time of day on the same network connection with identical network conditions, so it seems like a decent sample.)
It would stand to reason that Svelte.dev, the main site for Svelte, would have good scores. And, they indeed had the best scores I found. What’s amazing to me is that this is a project led by a few people without, as far as I know, the financial backing of a huge FAANG type company like AngularJS and Facebook. It’s astounding their site is so good.
SvelteKit is about the same, just a bit lower in the accessiblity scores.
ElderJS is a recent arrival to the Svelte landscape. It prides itself on great SEO, and their results show that. It’s a great alternative to Svekyll.
NextJS pioneered a lot of the SSR and filesystem based routing that SvelteKit modeled (copied). Good scores.
VueJS has relatively poor performance and SEO practices, but otherwise not bad.
The biggest surprise by FAR was that AngularJS had the worst scores of the bunch. AngularJS, of course, is a project backed by the huge resources of Google, which is another arm of the team that built Lighthouse. What gives, Google?
Though the scores weren’t as bad as Angular’s, ReactJS scores poorly compared to the other small upstarts.
Then, I decided to look at some home pages of large Internet companies.
Apple scores relatively poorly, with low performance, and even lower SEO.
Amazon had one of the worst scores I found. Maybe they are so big and the first destination that people use when shopping that they no longer have to care about SEO?
For a company that prides itself on performance, their Lighthouse scores didn’t reflect it. I ran this test over and over and the test results were always poor. This was one of the best ones.
These are not conclusive tests. The Amazon home page is a different beast than the CloudFlare home page. But, it was surprising to see there are landing pages which appear to be poorly optimized in simple-to-fix ways. As one tip says when you are running the tests, 100ms of speed increase led to 1% revenue increase. These things matter.
And, check out SvelteKit.