ResourceStartEndRedirectCacheDNSTCPRequestResponseDurationTransfer
Making websites faster
... and better for the planet

Website Crisis and opportunity

If you had to pay for the amount of data downloaded every time you accessed a website, the internet would soon die out. By 2024, median page weights had risen to a whopping 2'500'000 bytes.

The more a page weighs the longer you wait and (according to Google) 53% of mobile users wait a maximum of 3 seconds before leaving.

It's not just the waiting time. Heavy pages, especially those with a large amount of javascript, make your device do more work, causing shorter battery lives, inflated data plans and immense ecological damage. 

But it doesn't have to be this way.

This website was created using a modern website builder that guarantees every page is delivered to its visitors with a maximum, initial data weight of 100KB translating in the vast majority of cases to less than 2 seconds waiting time.

If you're reading this page for the first time then you may have noticed this already. If you run the url of this page on an independent performance testing platform like webpagetest.org, you will see that the numbers are more like 60K in 0.5 seconds.

While admittedly not beautiful, this page is nonetheless a 2000 plus word article with an image, two different web fonts plus about 17K of CSS and javascript.

If you run the same test selecting location Cape Town, South Africa the result will still be about 2 seconds. 

Even areas with reduced telecomms infrastructure can confidently use websites as a cost-free advertising platform

The rest of this page explores in more detail how to get under that 100K barrier. 

Let's start with images

Images are compressed and delivered in optimal format for modern web browsers. For example, this image compresses from the original 1MB JPEG to a 20K AVIF. 

While not perfect, it's perfectly acceptable for most viewers.

 

Some alt text

Whatever device is used by the visitor, the image will weigh as little as necessary while maintaining a reasonable quality. The ultimate goal of an equitable website building platform is to ensure visitors download a minimum of resources in order to engage with the content. 

Images are configured in such a way that the visitor's browser will select the best sized image for the dimensions and capabilities of their device.

Fonts

This website happens to use the Roboto Serif font for headings and the Asap font for text, both available at zero cost from Google Fonts. 

Instead of downloading the complete fonts to the visitor's browser, the platform will only download those characters and styles actually used in the content - the difference can be over 200K less data.

This also means that websites can use multiple web fonts to enhance their design with no loss of performance for their visitors. 

Cascading Style Sheets

This site sends about 8K of CSS which is an opportunity for further improvement. For example, there's quite a lot of CSS rules needed to format blog index pages, but it's obviously wasteful sending this to a page that isn't a blog index.

Same thing with image carousels. Why send a regular visitor lots of CSS rules to format a Netflix-like carousel if the page doesn't include one?

Javascript

About 10K of Javascript was downloaded to your device after the content was rendered. It captures details about your specific experience on the site including how long it took to download, the page weight and other metrics like how long you were engaged on the page. These are all sent back to a database for the owner of the site to review and make informed decisions about improving the site.

This is over 100K less javascript compared to using a regular tag manager.

Privacy

The "easy" way to use free web fonts and have access to site visitor metrics is to include references to Google libraries, for example, in the page header. But as shown this hugely inflates the data download cost for each individual  visitor. 

Moreover, it obliges the visitor to reveal their IP address and device details with an advertising company. Websites should respect their visitors' right to privacy by default and make no assumption that a tacit agreement has been made to the contrary.

Self-hosting web fonts and analytics code assures the privacy of every visitor.

Javascript Modules

This platform lets website owners log in to the platform and directly change the content using an inline What You See Is What You Get editor.

There's a lot of functionality required to edit and publish a website - you need code for the owner to select and download fonts from Google for example. You need code to automatically save changes in a database and upload images.

Inline editing needs code to insert tables, paragraphs, headings, lists, blockquotes, styling text, inserting horizontal lines to name just a few of the features available.

Website owners should never have to download all that code all of the time every time they want to change something. Javascript modules now enable complex web applications to be engineered in such a way that the owner only downloads the Javascript needed for the specific task at hand. 

Take authentication for example. There's a javascript module for that which weighs about 2K, but unless the user needs to authenticate there's absolutely no need to download it.

This is quite contrary to how most websites are built. Javascript frameworks and bundlers for example basically deny web access to all but those living in affluent areas. If you're using the latest iPhone or a $2000 Macbook in California then you probably wouldn't notice much delay downloading a site with megabytes of javascript.

But if you're using a $200 android phone on a patchy 3G/4G connection in Africa, your experience will be much different. You probably wouldn't even be able to connect let alone see the content.

There can be no just reason a modern website forces each and every one of its visitors to download megabytes of javascript in order to access the content. That's borderline crazy, hugely iniquitous and a massive loss of economic opportunity.

Security

There are two fundamental principles behind the design of this website building platform. Performance was one and hopefully you will have seen that for yourself.

The other is security. When you have a content editing application one login away from a world of internet users, you had better be sure that no one can hack in to the application and delete your website or worse unless you pay a ransom.

For this reason the platform uses digitally signed JSON web tokens instead of cookies and passwords.

When a website owner logs in they authenticate through their email which they will have secured themselves. The platform's database server sends them an email containing  either a random 6-digit code or a link. Completing the authentication results in the issue of a pair of digitally signed tokens that are unique to the owner's email address and website identifier. These are then stored on the owner's browser. 

The access token is included in every database request sent from the owner's browser and is validated by the server before executing the request. Access tokens are configured to expire after 5 minutes at which point the owner's refresh token is then used to automatically send a request to be issued with a new pair of tokens.

In this way the owner's exposure in case of theft is limited to 5 minutes. In this way also the owner can stay securely logged in for ever since there is no password to expire or cookie to manage.  This system of automatically refreshed digitally signed access tokens is arguably the web industry's best security solution at present. 

While similar solutions are commercially available at very high cost (see Stytch, for example), this website building platform includes it as standard because all website owners must be assured that their website content is secure at all times.

As it happens, it's not possible to steal the tokens online because the platform unconditionally publishes all sites with a strict Content Security Policy.

Content Security Policy

A strict Content Security Policy disables the most common forms of online attack like cross site scripting. The policy instructs the browser to only allow javascript to be executed if the javascript code's digital signature matches the signature declared in the policy. 

You can see for yourself how this platform's security measures up at the Security Headers web site.

This platform guarantees the highest A+ security rating of every web page it builds. Website owners should expect this as standard and wary of any application that uses cookies since hackers exploit the inherent nature of cookies to lure unsuspecting users into cross site request forgeries.

Passwords are a similar anachronism, since they are forgotten and an all round inconvenience. Note also that many hacks are socially engineered and involve some form of breaching password security.

User Experience

Web pages should deliver optimal utility at minimal cost, where "cost" is measured in terms of real user performance. 

As well as information value, user experience is primarily based on how quickly the content can be accessed - the single most important factor in this is how much data the server sends to the client's device.

A modern, responsible website builder focuses primarily on the end user's experience, while website owners can expect all of the following:

All of these features are included in a single web builder application. Try downloading your website from Wix, for example.

Fonts should look great

The editor offers italic and bold styling -

Normal

Normal bold

Italic

Italic bold

However, not all fonts provide italic and bold styles. If your chosen font does not support italics, then browsers by default artificially slant the characters. Same thing if your font doesn't support bold characters - the browser will artificially bolden the characters.

Faux styling like this looks ugly and greatly diminishes the reader's experience.

So what we do in these cases is animate faux-styled text. 

In order to stop the annoying animation either remove the italic / bold styling in the editor or choose a font that does support the styles you want.

Optimising Fonts

Most web pages are over 2MB in weight. 

Font files contribute a lot to page bloat when all of the font's available character set is downloaded. Websites, however, typically use only a small subset of the full character set. 

My sister's website, for example, has 80 pages comprising over 30'000 words but uses only 78 distinct characters - by creating a version of her selected font limited to only these characters, her site visitors download a fraction of the full font file (i.e. 15K compared to 150K).

In this way, the visitor pays a minimum in terms of data transfer in order to view the content. Think of each KB downloaded as a cost to both the visitor and the environment; a cost which increases as more pages are viewed on mobile networks and devices.

The other beneficiary is the site owner - smaller pages load faster which Google appreciates by crediting the website in its ranking algorithm. Sister's website was migrated to this platform from Wordpress in 2024; after a few months it rose to the top of Google's ranking for the relevant keywords and now gets almost 1000 first-time visitors a month (compared to 40 on Wordpress).

Real User Monitoring

When a website page is downloaded to a visitor's device a background process captures details about their experience, one of the most important being how long they had to wait before being able to view the content.

An equally important metric is how long they engaged with the content.

Was this the first time they visited the page? Which pages did they visit and in which order? How were they referred to the site? How much data did the visitor have to download? Was the content stable? How responsive was the page to interactions? What was their connection speed and where did they connect from?

Real User Monitoring is about collecting all of these details so website owners can measure how their site is experienced by real users and thereby make informed decisions to improve it.

Is this thing offered commercially?

Most certainly not.

Our goal is to encourage people to build websites that are orders of magnitude more performant and secure, whilst still offering a reasonable degree of design flexibility.

There's a lot you can do with typography, for example, to bring great personality to a site. By varying font colours, sizes and styles you can almost deliver magazine-style design to your pages.

Presently we only support two different fonts - one for headings and one for text - that is, everything else. However, it would be trivial to allow different font choices for code blocks, blockquotes, even different fonts for different heading levels.

The only cost involved in making this thing more widely available is the database server. Currently we use a free Oracle Cloud database but that wouldn't be happy supporting more than a few concurrent users. 

To extend this to a wider audience we propose sharing database server costs based on actual CPU usage. If we could get a decent server for about 200 USD / month, then we could charge that at an average of 2 USD / month if we had 100 subscribers.

We reckon that's the most equitable way of moving this forward. If you subscribe and don't use it or no one visits your site, then you pay nothing. If you go mad and use 10% of all CPU consumed and get hundreds of first-time visitors a day then you would pay 20 USD / month.

That's still way cheaper than most "plans" offered by commercial players. 

Log in