On a recent client project I decided to ditch bootstrap in favor of something a little lighter. This coupled with our new hosting partners CloudWays resulted in a website that loads faster than www.google.co.uk

The CSS framework I used was Skeleton CSS which weighs in at about 400 lines of code- compared to bootstrap which is around about 6000 lines of CSS that’s quite a saving. You could customise Bootstrap, stripping out the bits you don’t need – but I don’t see the point in doing that, much better to use something that’s optimised in the first place and as this is a bespoke design, I am only going to be using a grid and mobile nav anyway.

A slim CSS framework is only half the story. A lot of the grunt involved in pushing this website faster than Google comes from the hosting setup. In this case it’s using CloudWays with a Digital Ocean Droplet. CloudWays have a highly optimised setup which includes Nginx, Varnish, Apache, HTTP2 and Memcached. All of the infrastructure management and optimization work is done for you and managed by the CloudWays team, allowing Website Developers to concentrate on building websites. The setup works especially well on WordPress powered websites.

The results of this particular website build can be seen below. The first screenshot is from Google Chrome dev tools network interface. The figure in red shows loading speed in milliseconds. As you can see www.google.co.uk loads in 252ms.

google-co-uk-load-time

The second image shows www.ositoys.co.uk loading time. The status column which shows ‘304’ is the server telling the browser that it should use it’s locally cached copy of this page, rather than fetch the page again.

osi-toys-load-time

With this server setup I can easily achieve load times of around 500ms with Bootstrap based websites. WooCommerce comes in at about 650ms. Still fast enough to keep visitors on your site rather than going elsewhere.