In times like this where we have to stay home we are rapidly moving our daily offline life to online. Networks are suffering of our highly increased usage and we experience this as users by longer loading times and even unreachable websites. Should the websites we use go on a diet, to increase our user experience?
The average web page is about 2 megabytes, according to HTTP Archive, a site that tracks the performance of websites and the technologies they use. Sure you can download 2 megabytes in less than a second on a good 4G mobile connection. But today’s web pages are problematic for people on slow connections or with small bandwidth caps. Not all that long ago, a complex game or software program fit on a 1.4-megabyte floppy disk.
There are many reasons today’s web is so bloated, including the ads and tracking scripts that saddle so many pages. Another reason is that websites do much more than just display text and images. Many sites now look and feel like full-blown desktop applications.
To build these interactive sites, many web developers turn to open source packages that handle common tasks. These tools liberate programmers from a lot of grunt work, but they can add heft to a project. Facebook’s popular open source React library for building user interfaces, for example, weighs in at 100 kilobytes. Throw in some other tools and graphics, and soon you’re talking many megabytes.
“It was a big ‘wow’ moment,” Wang says. “I wasn’t even trying to optimize for size and it just dropped.”
Harris, a graphics editor for The New York Times, created and released the first version of Svelte in 2016 while working for The Guardian. Many of his projects involved interactive graphics and animations, but he worried that the graphics could take too long to load or would chew through users’ data limits.
Frameworks add heft to websites because they traditionally serve as a middle layer between an app’s code and the user’s browser. That means developers need to bundle the entire framework, in addition to their own code, with an app, even if they don’t use all of the framework’s features. Wang compares this to a rocket ship that needs massive fuel tanks to launch into space.
Harris took a different approach. Svelte performs its middle-layer work before a developer uploads code to a web server, well before a user ever downloads it. This makes it possible to remove unnecessary features, shrinking the resulting app. It also reduces the number of moving parts when a user runs the app, which can make Svelte apps faster and more efficient. “Svelte is like a space elevator,” Wang says. The framework was tricky to create, but advocates say it makes it easier for developers to build efficient apps.
Wang says he likes to use Svelte for web pages, but he still uses React for larger applications, including his professional work. For one thing, the larger an app, the more likely a developer will use all of React’s features. That makes it less wasteful. In fact, some Svelte apps are bigger than apps made with React or similar tools. And there’s much greater demand for React developers than Svelte developers.
Svelte is still a hobby project that Harris and other developers work on primarily in their free time. Harris only works on it “on the clock” when he needs to fix something or add a feature that helps him with his work for the Times.
Harris says Svelte is best suited for cases where performance and file sizes are particularly important, such as apps that run on smart TVs or low-power devices.
But some Svelte developers use it to build larger apps. Ryan Atkinson is the founder of Felt Social, which makes tools for building highly customizable social websites. He says he chose Svelte because it makes for faster, more responsive applications, even if they’re not always the smallest. “Svelte’s architecture can fundamentally change the game of building user interfaces,” he says.
Atkinson says programmers often dismiss tools that are good for building small things, thinking they’re “toys” that can’t be used to build big things.