Roadmap to Lightning Fast Websites

It’s a fact that an average user gets annoyed if a website takes to load more than 2 seconds. After three seconds, chances that the user abandons your website increased by a whopping 60%! It’s an avalanche out there.

When one user bids “adios amigo”, he shares his reviews with his network. Boom! Can you possibly imagine how many users you lost because of 3 seconds? Well, you are in big trouble. Amazon’s study on their user response states every 100ms delay costs 1% of sales. Speeding up your website is not a luxury anymore, but a necessity.

Aberdeen Research Group’s studies state,

• • • 47% of people expect a web page to load in two seconds or less.
    • 60% will abandon a web page if it takes more than three seconds to load.
    • 52% of online shoppers say quick page loads are important for their loyalty to a site.

Here are my 4 Tips for Lightning Fast Websites:

Reducing HTTP requests

Speeding up a website is all about reducing HTTP resource requests. Say you have multiple CSS files for a page, concatenate CSS files into a single CSS file and reduce requests into 1 instead of many. CSS concatenation can be achieved using a task runner like Grunt or Gulp.

Consider a situation where sites have lots of icon images. Instead of loading each picture individually, a sprite sheet of all small images can be used, reducing the number of requests exponentially. An image sprite is a collection of images put into a single image. Using image sprites will reduce the number of server requests and save bandwidth.

Another best practice is to place all scripts at the end of the page because JS blocks other parallel downloads until JS downloads are completed.

Pro Tip: Spend 2 hours analysing each page. Reduce the number of components and look for better alternatives for elements that take a good part of HTTP request delay in each page.

Reduce Server Response Time

Google recommends that server response time should be less than 200ms. There are dozens of potential factors which may slow down the response of your server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation.

A basic strategy for a better server response time will be finding the best web host. Roadmap of best hosting will be starting from Shared Hosting to VPS hosting, then Dedicated hosting and finally Cloud Hosting, with cloud being the fastest. CDNs (Content Delivery Network) stores your files all over the world providing user files from the nearest accessible CDN.

Google PageSpeed Tools advises you on the best practices to reduce server response time.

Minifying Resources

Minifying resources is an absolute must to speed up a website.

Minifying CSS: Minifying CSS can help reduce the size of a CSS file and improve loading time. Minification compresses your CSS by removing whitespace characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute, keeping the functionality of the code intact. CSS minification can be performed using a task runner. I use Grunt for minifying the concatenated CSS, which reduced my 15.9KB CSS file to 10.2KB.

Uglifying JS: Similar to CSS minification, JS can be minified to compress your JS.

Custom Bootstrap: Bootstrap is needed nowadays for responsive sites. But you should use custom bootstrap setup with just the required components for your page. Bootstrap provides you a way to create your own custom bootstrap file for elements that are used in your page. Analyse bootstrap CSS, Components, JavaScript components and jQuery plugins used in your page and uncheck all other components which you don’t need.

Pro Tip: Grunt is a JavaScript task runner which runs the default task defined in your Gruntfile.js file. For more details on how to minify and uglify using Grunt, visit gruntjs.com.

Optimising Images

It’s needless to say loading images take an even bigger bite of bandwidth than your friend takes from your burger. 70-75% of optimising your web page can be achieved by optimising images in your web page. Optimise images without compromising on image quality. Is it possible? Of course, it is. I’ll show you how.

Sprite Images: An image sprite is a collection of images put into a single image. Using image sprites will reduce the number of server requests and save bandwidth. You can create Sprite sheets online using spritepad. With Spritepad, you can upload individual images, position them however you like, and the CSS is updated in real time. When you’re done, download the image and copy the CSS over to your project.

Image compression: There are a series of image compression offline and online tools. Finding the best compressor depends on the format of the image.

Overview of online image compressors: In my experience, Compressor.io is the best online tool for jpeg image compression. tinypng provides maximum png compression without quality compromise. Kraken.io is another online tool which provides good image optimisation without affecting quality of the image.

Overview of offline image compressors: From the series of npm image compression tools, imagemin provides you better image quality with maximum compression.

Compressing images doesn’t always do the trick. When it comes to images, you’ve got to do an extra mile of removing the EXIF data on the image to bring down the image size further. Here’s an example of image size reduced by removing the EXIF data associated with the image.

Removing EXIF data can dramatically reduce the size of an image as shown in this example. Removing EXIF data from an image can takedown image size from 19kB to 3kB. Surprised?

Now for the best part, Google is creating a new image format named webp which takes only 8-10% size of your original jpeg or png images but gives equal quality.

Quoting Google, “WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.”

As of now, WebP formats are only supported in Chrome and lack browser compatibility.

This was part 1 of 2 part blog about web page optimisation and improving page loading time. In part 2, we will look more about caching and prioritising content.