doppnet.com

In this article I'll describe a few tricks I've used to make my blog load faster, i.e. load time of around a quarter of a second with cold browser cache on my connection. The same methods can be used for other static pages and most of them can be re-used for dynamically generated pages as well.

For start you can get some generic but useful advice using online tools such as Google's PageSpeed tool. You should probably aim for score around 90/100. Most people stop there and that might be good enough. However if you're looking to speed up your page bit more, read on.

Loose weight

This is the most obvious thing to do, less bytes to transfer means shorter loading page. Nowadays pages are on average the size of the original DOOM PC game - that's a lot of bytes. There are few ways to reduce the footprint of your website/webapp:

• Loose jQuery. Don't get me wrong, jQuery is a wonderful library, however with IE virtually gone and other browsers evolved, jQuery is no longer required. Browsers are now more than capable, all the legacy glue that made ancient versions of IE behave in a reasonable fashion are irrelevant. If rewriting your code base without jQuery is not feasible, try replacing it with a lighter alternative such as cash or ki.
• Similarly: don't use frameworks you don't really need. There's no point in loading entire underscore.js if you're using just one function from it. Lodash is offering a modularized builds so you can use just the function you require.
• Another idea is to load polyfills or code variants dynamically depending on browser's capabilities. Want to use wonderful (and seriously overdue) fetch API in your app but can't because of IE/Safari/iPhones? Load a polyfill only in these browsers. You can use Modernizr or even better write a custom loader and embed it in your html.
• Optimise images, especially PNGs. If you use GIFs, it might make sense to replace them with either DOM/CSS animations, videos or animated SVGs.
• If you're using glyph fonts, remove unused glyphs or even better build your own font from scratch using something like Font Custom.

Reduce the number of requests

Many things need to happen before your page actually loads (here's a great, in-depth write-up about it). Each DNS request, and each subsequent HTTP request requires time (latter uses TCP which goes like this). If possible, avoid hosting any files that are required to display the page on domains other than the main domain of your website. For the HTTP requests: simply switch to HTTP 2 - if you use an edge cache (see below), you will most likely get it with no extra effort.

Use Edge Cache

If you're hosting your website/webapp somewhere in California, visitors from the UK will need to wait additional 150ms to get your page, double or even triple that for users in Japan or Australia. You could however save them the trip (and the delay) by hosting your entire page closer to their location. This is done by having your domain automatically resolved to a server closer to the visitor where a mirror copy of the same page is hosted. It can be easily done with a CDN provider, personally I can recommend Key CDN for the job, but you can use any one you like. Key CDN will even offer a "push zone" so you end up not needing your own web server at all.

Enhance the UI for that snappy feel

There's a relatively new trend you can observe on heavy, content-driven website such as Facebook: the content is drawn early as a wireframe while the real data is being fetched asynchronously. There's no spinner and the general look-and-feel of the website is very similar with and without the content. Put together, this is one of the examples for a nice, "snappy" feeling for your webapp. Another example would be letting user use input filters even before the content loads (it should be rendered filtered once loaded) or displaying a fake progress bar.