How to Build the Fastest Website in the World
From the Amp project and Google’s Lighthouse, to Offline First and service workers
While browsing the web on desktop and mobile, I’m seeing more and more links with “Amp” in the URL or next to an Amp logo (⚡). The Amp project is an initiative by Google to make web pages load more quickly. Website speed is important because users clicking on a link want their content immediately, otherwise studies show they are likely to hit “back” and go elsewhere. Another incentive for site owners to speed up their sites is that page load time is rumoured to be a factor in the search engines’ ranking algorithm. A fast site makes your users happy and may bring you more traffic.
Amp works by installing some JavaScript that controls how the page is loaded, caching content on Google’s servers, and dictating a restrictive form of HTML that results in the page dimensions being easily calculated early in the page-rendering cycle. An Amp-conformant page can then be rendered quickly, especially on mobile devices where network bandwidth is at a premium.
The Amp team are on to something. Webpage markup is growing in size and complexity, using bulky JavaScript libraries, CSS, images, and video content. Compare the Amp version of a news story with the standard version. Which loads faster on your browser?
But Amp is not the only way to build really fast websites. In this article, we’ll explore some ways to make your website go faster without necessarily drinking the Amp Kool-Aid.
Measure it
Unless you test the speed of your website, you won’t know whether you are improving the situation with the changes you make. All of the major browsers have great Developer Tools that allow you to dive into detail of each page load cycle.
You can also use external tools like Pingdom’s Website Speed Test tool to generate a report:
As you can see from the above image, even Amp-based websites don’t look good with these metrics because the whole page takes 4 seconds to load, but importantly, a workable first view of that page may be available much sooner than that.
Google Lighthouse is a command-line tool — and powers the Chrome browser’s “Audit” function in Developer Tools — that calculates the time it takes to render a website in a Chrome browser.
Install it with:
npm install -g lighthouseAnd run a performance report with:
lighthouse --perf --view http://www.bbc.co.uk/news
Test your site before you make any changes to get a baseline report. Here’s the the baseline for my home page, as it was then:
Cutting the bloat
Your users only have a certain amount of bandwidth, so the smaller (in terms of bytes) your website is, the faster it’ll load. Here are the worst offenders:
- Video and audio are the biggest bandwidth hogs. Whatever you do, don’t auto-play videos. Your users will hate your site if you do and precious bandwidth is consumed.
- If you have an image-heavy website, try to keep your assets on a Content Delivery Network (see later) and only load the minimum image resolution that is needed (e.g., a thumbnail will be many times smaller than the original, full-size image).
- The major JavaScript frameworks are not insignificantly small (React 371k, Angular 1.2M, jQuery 261k). If your webpage is very simple, you may not need a framework at all. Otherwise, use the minified versions of the frameworks or choose simpler alternatives like Vue.js 258k, Preact 21k or Zepto.js 58k.
- Minify your HTML, JavaScript, and CSS before publication. A JavaScript file can drop to 10% of its size through minification.
- Bundle your assets. Using tools like Webpack, you can turn all of your JavaScript dependencies into a single file in a concise form, only including the parts of the code that are needed. Your HTML will have fewer
<script>tags—and therefore, fewer client-server round trips—and the code size will be reduced too.
Content (delivery) is king
Your website’s assets should be served through a Content Delivery Network (CDN) for optimal delivery. The CDN providers ensure that their server hardware is a small number of network hops away from every human on the globe. Your static content is therefore geographically local to those users, avoiding cross-ocean network requests and slow load times.
You can also employ a service like Cloudflare, which sits between your users and your site and provides HTTPS termination, caching, and other performance enhancements.
Ensure that your HTML, CSS, and JavaScript files are zipped when served out by your web server or CDN, squeezing the size down even further.
Static is fast
It is tempting to build all of your web pages on the fly using a PHP or Node.js server-side script, but if your content doesn’t need to change frequently, then it is more performant to generate the static HTML and put it on your CDN. This takes the load off your app servers and leverages the geographic reach of your CDN.
Check out Jeykll, which allows a static site to be generated from Markdown content. A Jeykll-powered blog can be as easy to maintain as a WordPress site, but can be served as static HTML files for free on GitHub Pages.
The fastest website in the world
Using all of this advice, I set about remodelling my personal home page, which contains my bio, photo, contact links, and recent works. I modelled the rewrite on the lines of the homepage of the inventor of the World Wide Web, Tim Berners-Lee, who likes to keep things minimal. I wanted https://glynnbird.com to be as fast as a website could be, so I was brutal:
- no JavaScript or CSS frameworks or libraries
- no external CSS
- no JavaScript
- no images — only ASCII art
- the page must load in a single HTTP request
And I did it!
Faster than 100% of tested sites
That makes my homepage the fastest website in the world!
Ok. I’m being slightly tongue-in-cheek with this example, but it contains the same information as my old site and loads many times faster.
Offline First: Faster than fastest
Another technique to consider is to convert your website into a Progressive Web App. A PWA is a website that installs a service worker to cache assets on the device. Once visited, a PWA can work with or without a network connection, and because the HTML/JS/CSS is coming for a local cache, it makes for the fastest possible page load times.
PWAs don’t just have to be static websites. By storing state in an in-browser data store such as PouchDB, your users get an “always on” dynamic website.
An example PWA is Drummer which, after the first page view, can run perfectly well while disconnected from the internet, storing its loops in a PouchDB database. A more sensible static example is the Vue.js documentation which, once visited, remains accessible offline — handy when coding off the grid!
If you’re interested in building a PWA, see the Offline First home page, read up on Progressive Web Apps, or check out the Hood.ie framework.
Hopefully these ideas will help you reduce your page load times. Your visitors will thank you. And feel free to post your own Lighthouse score here as a response, including some of the techniques you used. Cheers.
