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

You can also use external tools like Pingdom’s Website Speed Test tool to generate a report:

Pingdom’s Website Speed Test. The Guardian gets a grade of “C” here, loading in 3.98 seconds.

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 lighthouse

And run a performance report with:

lighthouse --perf --view http://www.bbc.co.uk/news
Running a Lighthouse performance test on the BBC’s news site: 8.2 seconds.

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:

Running a Lighthouse performance test on the old version of my website: 4 seconds.

Cutting the bloat

  • 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

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

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

  • 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!

The Lighthouse score for the new version of my website gets a perfect performance grade and loads in 144 milliseconds.

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

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.