Building a new Website builder

Last year my sister was complaining about how few visitors she was getting to her website and whether it was worth forking out $2000 a year on hosting and agency costs.

How could a simple Wordpress site be so expensive and so ineffective at the same time? A quick look at Chrome's network tab showed multiple megabytes of javascript and images being downloaded - even the font weighed in at 170kb.

No wonder the Largest Contentful Paint was over 6 seconds and she was only getting 40 visits a month. With all that JS code, the Interaction to Next Paint rating was equally "poor". No amount of money paid for SEO services would convince Google to improve this poorly performing website's ranking.

What we need is a paradigm shift in Website building that focuses on serving the website visitor with pages that appear as quickly as possible at minimal cost to the website owner.

If a successful website is measured by the number and quality of visits it receives, then it's reasonable to charge its owner on the same basis. For this reason, each website page includes a javascript module that gathers core web vital metrics and sends these to be stored in a central database. The owner can then analyse their website performance and visits with the same data that is used by Google.

The same database acts as the Content Management System in which the website owner creates and publishes their website. Owners that want to publish their website on a custom domain will have 2 connected but discrete websites - one for editing and one for publishing. In this way, the owner has complete control over the editorial process.

Content is created in the editor website using a WYSIWYG editor. Digital media are uploaded to a dedicated asset manager which ensures optimised images and videos are delivered to the website visitor. All pages are created in pure, semantic HTML to facilitate accessibility.

Security is a fundamental building block of the CMS - the website owner logs on to their editor and custom sites through email authentication. No cookies or passwords are involved in a process which is based entirely on refresh and access JSON Web tokens. Owners are fingerprinted using a combination of their IP address and User Agent - this will prevent exposure in case their laptop is stolen, for example.

Websites are protected by strict Content Security Policies to guard against attack. This is essential for any modern web application using javascript. Editor functionality is a collection of javascript ES Modules each of which is signed and declared in a dedicated import map.

When the owner publishes their website, all pages and supporting resources (e.g. site-specific CSS, navigation labels, sitemap.xml) are transferred to a hosting service where they are committed transactionally and stored on a Content Data Network.

Offering a plethora of design choices can be intimidating. How does a technically limited user choose from over 1000 different templates or 1500 different fonts? Which fonts are best for headings and text? The CMS aims to simplify the process by offering a range of font pairings recognised as optimal for combining the need to "see" headings and sedately read text.

Rather than offer 1000 templates, the CMS provides a basic semantic HTML structure comprising separate navigation, header, main and footer elements along with a "sensible" set of CSS rules. For the technically capable, the CMS allows any page to be opened in Codepen where they can develop their own CSS rules and have these replace the default set.

The CMS is a database hosted on an elastic cloud service. All communication with the database from the editor website is through javascript fetch calls to REST endpoints, using the owner's JWT access token. The owner's refresh token is used to request a new access token which expires after 5 minutes. This limits exposure in case the token is hacked. The refresh token is always renewed along with a new access token. The refresh token is stored in the owner's client's local storage. In this way, regular users can stay logged in for ever.

How to create one of these websites? Go to any website that was created with the CMS and click a button labelled "Create Website". After authenticating through your email (either passcode or link), an editor website is created after about 5 seconds to which your browser is redirected.

You'll already be logged on and be able to make changes like:

Create new pages (regular, blog, portfolio)
Choose different heading and text fonts
Upload digital media (image, video, audio)
Design page header optionally including an image
Design page footer including contact email and socials
Change text and background colours
Change the URL (default is email.netlify.app)
Link to custom domain

It can't be right that so few accessible, affordable options are available to build websites. Over 50% of all websites are served through Wordpress, Wix and Squarespace and none of them are "modern" in the sense that delivered web pages are properly optimised for an internet that is increasingly accessed through mobile phones. Last time I looked, Squarespace's most popular template was still downloading after 14 seconds!

The last web almanac says that average web pages are weighing in at over 1mb. The CMS proposed in this article guarantees that no page is greater than 100k, thereby ensuring "good" Google web vitals.

My sister's website now runs on this CMS and gets at least 40 first time visitors a day - the content is identical to the Wordpress site that was barely getting 40 visits a month. The only difference is that her site now has A+ security and optimal performance - the 75 percentile LCP is about 1 second. I don't think Google includes security headers in its ranking algorithm.