How to make websites fast
A recent Google study found that 53% of mobile users abandon a site if it takes longer than three seconds to download.
To avoid this happening to your website
- Aim to send no more than 100KB of data to first time visitors
- Send as little javascript as possible
- Capture the actual experience metrics of each visitor
- Test performance on cheap mobile devices
Transfering mostly non-javascript data within the 100KB threshold translates specifically into:
- No use of javascript frameworks
- Optimising fonts
- Optimising images
- Optimising CSS
Avoid Javascript Frameworks
Over the last 10 years or so there's been a steady rise in the adoption of Javascript based frameworks. Most websites on the internet use some sort of framework all of which oblige their visitors to download, parse and execute lots of javascript.
It costs the visitors' device three times more to process javascript compared to other page elements like images. Much of this javascript is often redundant, where, for example, it includes code to handle browsers that are no longer even supported.
Where you do need javascript is to capture and report real user metrics. You also need javascript to make any dropdown actions menu accessible or to support server-based authentication. Modern browsers that support ES Modules enable web applications to download only the functionality specifically requested by the user.
Far better to serve 20 small 5KB javascript modules when needed than a single 100KB library most of which probably won't be used.
Small is beautiful on the web and none more so than when it comes to javascript. Transferring and processing big bundles of javascript harms the environment while depleting your visitors' batteries and data plans.
Optimising Fonts
More than 60% of all websites use Google Fonts. And with good reason. There's lots of them and they are all free to use even on commercial sites. The problem is that the easiest way to use these fonts involves adding a couple of links to the Google font library in your pages.
As a result, your visitors will each download about 200KB of font data when all that's needed is a small fraction of this to support the characters actually used on the site.
This page uses two Google fonts - one for headings and another for text. With only 75 distinct characters used on this site, you've only had to download 20KB of subsetted font data, instead of the 400KB or so that would otherwise be sent.
An additional benefit is that the subsetted fonts on this site are both self-hosted, meaning that details about your geography and demography are not unwittingly revealed to a massive advertising company. In some jurisdictions, it's even illegal to do this.
Optimising Images
Most websites include images on their pages. At the 50th percentile, websites have over 20 images on the home page. Unless you optimise your images your visitors will pay unnecessarily for downloading too much data.
The first thing you have to do in order to reduce image size is convert it to the almost universally supported AVIF format which has superior compression compared to other formats like WEBP and JPG.
You then need to present your visitors' browsers with a choice of images at different widths depending on how much space on the page they will occupy. This is complicated because images with lots of different colours will be larger than those with a small number of uniform colours.
Ideally you should offer a set of all image widths at say, 10k breakpoints between a minimum and maximum width. On this page, for example, the following image occupies 50% of the width of the main content area which is set at 1200 pixels.
This original 2.7MB JPG image is offered at 9 resolutions between 200px and 1200px.
We can ask a good digital asset management service like Cloudinary to compress the image at say 80% quality and convert it to AVIF format.
give us the breakpoints at 10K increments within the range from 200px to 1200px.
Maintaining your site
How do you add new content to your site? Do you pay someone to do it for you or are you confident using a website building tool?
Most website editing tools are too complex for non-technical people. It takes a lot of time to master Wordpress, for example, and master its plugin ecosystem.
Surely the easiest way to build a website is to change it inline and have all your changes saved and reflected in what you see on the screen in front of you. What You See Is What You Get means no surprises when you publish your site.
The ideal platform should maintain a clear separation between what you build and what you publish - in other words you need two websites. You change content exclusively in one until satisfied with how it looks before publishing the same content in your live site - the one you bought a domain for.
Simple editing
The ideal platform should include an intuitive editor application embedded within the website itself. If you're the site owner and have logged in then all you should ever need to do is click, change content and publish your site.
The editor needs to be fully functional, but not complex. Something that looks a bit like like Microsoft Word would be ideal where you can create headings, paragraphs, lists, tables, quotes, links and easily include images, videos and audio.
Design flexibility would be good too - like choosing different fonts for headings and text. There are almost two thousand fonts to choose from Google and they are all free. Being able to use any of these for your site would be great.
Search Engine Optimisation
The ideal platform should cover all of the SEO details for you automatically. Things like unique page titles are important and should be generated intelligently from your content.
No one knows for sure how Google ranks pages other than its algorithm highly rates authentic, informative content. No platform can help you there. AI content generators, by definition, are not authentic.
However, Google also ranks pages based on it's Core Web Vitals. These are measurements of visitors' experience using your site, including how long it took to engage with the content, how stable the content remains in the layout and how responsive the site is to button clicks for example.
The top right menu shows these metrics for your visit and if they are all green then Google will rate this site higher than oher sites with similar content but worse metrics.
My sister migrated her Wordpress site on to this platform and within 2 months was getting up to 50 first time visitors a day where previously she was lucky to get the same number of visitors in a month.
Easy Migration
The ideal platform should make it easy to copy content between pages. For example, it should allow you to copy / paste from say, a Wordpress site, to the new site using nothing more than Control-C and Control-V.
The essential thing here though is that the content must be represented in the new site with semantically correct HTML.
Accessible, inclusive
Accessibility has become a hot topic on the web and with good reason too. A depressingly large percentage of the population have disabilities that prevent them from accessing the content of most web sites. People with poor eyesight for example need to have the content read to them using assistive technologies, but these only work if the content is semantically correct.
Our editor guarantees that all content is structured in such a way that these assistive technologies are able to correctly interpret the contant and convey it to visitors with disabilities.
Making your content accessible is not only the right thing to do, it now becomes a legal requirement for public facing websites in many countries.
The ideal platform goes a long way towards meeting accessibility standards by ensuring that all content is semantically correct. For example, the navigation links at the top of the page are structured in such a way that these can be easily presented and understood by people who are unable to see the content.
Fast pages
The title of this page was about making pages download fast. If the page has something informative to say, then it needs to say it as fast as possible. No one wants to wait more than a couple of seconds to see whether the link they clicked on in Google has the right answers.
The ideal website building platform, therefore, has to guarantee that pages are downloaded to first time visitors within that attention threshold.
Of course, no platform can absolutely guarantee that because mobile networks in particular can be unreliable depending on the location. However, at the 90th percentile we should aim to have pages download within two seconds, even on mobile.
Open this page on your mobile phone and check the download speed for yourself. Even on an old android phone connected to a 4G network it should still be within the threshold. Indeed, this platform was tested almost exclusively on a 10 years' old Android phone on the basis that if it performs well there it will perform well anywhere.
The most satisfaction we had developing this platform was seeing a first time visit of 3.5 seconds from someone in Africa on a 3G network connected at 1.5 mbs. Not within the threshold, maybe, but orders of magnitude quicker than anything you could expect from pages built using popular website builders.
Real User Monitoring
You can only improve your content if you know how your visitors experience it. The ideal platform should allow the site owner to access all visit data whenever they want with minimal overhead.
Most website builders will let Google do this by including their javascript tag manager in your pages. But it's almost illegal to force your first time visitors to download over 100KB of javascript when they haven't asked for it.
There's also the issue of privacy. Not everyone wants Google to surreptitiosly capture their IP address and device details in order to feed their advertising business.
It's the same privacy issue for fonts. If your site references the Google font library then your visitors are unwittingly allowing Google to capture these details about where they are and what device they are using. Indeed, there was recently a legal judgment on this issue in Germany.
For these reasons, the ideal platform doesn't link to Google libraries. Instead of 100K of javascript, we send 5K that captures details that are relevent only to improving the user's experience.
In this way, site owners can see how their pages perform, which pages are popular, how long users engaged with their content, the order in which pages were viewed in a session, how many visitors are first time etc. That's basically all you get from Google but without the inconvenience of learning how to do it.
The key takeaway here is that the ideal website builder should create pages focused entirely on the visitor's experience and in no way influenced by a developer's predilection for using some convenient plugin or worse, a framework.
Lock in
Site owners can download all of the components of their site any time they want. That means all of the HTML, CSS, Fonts, Content Security Policy, Media references and Javascript are sent to their browser's download folder on request.
You could use this actually if you just want to self host optimised Google fonts on some other platform. Just copy your content into the builder, click the "Publish Editor Site" button and then click "Download Site".
The downloaded zip file will include your chosen fonts including only the distinct set of characters used in your content. For example, this website uses about 70 distinct characters of the Google ASAP font - in the dropdown top right you will see that it weighs about 20K instead of 150K for the full font file.
But before you do that...