Recently I've been working on front-end performance improvements for a large web application and would like to share with you my findings. The following, in no particular order, are simple tips for achieving greater website performance:

1. Use a Content Delivery Network

Content Delivery Networks (CDN) can be used to serve data to your clients. Not only do they provide caching abilities, reducing load on your web servers, they also usually have servers distributed across the globe in order to send responses from nearer servers to your clients.

CloudFlare provide free options for CDN use.

2. Optimise Images

In browser, images can be resized on-the-fly using CSS properties.

img {
    width:200px;
    height:200px;
}

However doing this means that the larger image has to be downloaded to the users device before being resized. This will result in a larger file size than required. Therefore image resize should be done server-side. This can either be done physically by editing the file in photoshop, or if you intend to use the same image in different sizes across your website, an on-the-fly image resizer solution may be more appropriate.

However it's also worth noting that it's best for browser rendering to include the width and height of the image in CSS as this allows the browser to paint elements onto the page beneath the image without having to re-paint once it has loaded the image and knows the width/height that this will occupy.

3. Use CSS Sprites

Each image used on your web pages requires an additional HTTP request which results in extra overhead to your page load.

This can be reduced by grouping several images together into a CSS Sprite.

This is done by adding the contents of multiple images into one image, then use it as a background image with a particular position to show each image.

Here is an example of one of Google's current sprite images:

This can then be used in CSS such as:

.logo {
    width:50px;
    height:50px;
    background-image:url('sprite.png');
    background-repeat:no-repeat;
    background-position: -100px -100px;
}

There are several online CSS sprite generators available, such as SpriteGen which can make creating sprites easier.

For more information on CSS sprites see CSS Tricks in-depth article:

https://css-tricks.com/css-sprites

4. Minification of CSS and Javascript

Minification is the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

Source: https://developers.google.com/speed/docs/insights/MinifyResources

As the above quote states, minification reduces the code in your files, which results in a smaller file size.

There are various online tools to do this, such as JSCompress.com, however this is often best automated by tools like Web Essentials or programatically like ASP.NET's Bundling and Minification.

5. Bundle CSS and Javascript

Just like with images, each CSS and javascript file results in an additional HTTP request.

This can be reduced by bundling multiple CSS and javascript files together into 1 single larger file.

Some frameworks have this feature built in, such as ASP.NET 4.5's ASP.NET's Bundling and Minification.

However, bundling isn't as simple as converting all your javascript into a single file. This can sometimes hinder performance as you are no longer taking advantage of parallel http connections. Therefore it's important to analysis the best strategy, ideally breaking a bundle into multiple equal(ish) sized chunks.

General rule of thumb that I follow for seperate bundles:

JS frameworks (jQuery, Angular JS etc)
Core JS files (Header/Footer/Analytics logic for example)
Page-specific files (Homepage only files for example)

6. Reduce Render-Blocking Javascript

Before the browser can render HTML onto the screen it must first parse the HTML line by line. If the browser encounters a script element while doing this it must stop and execute the script. If the script is stored in an external Javascript file then it must download this file before it can execute it.

Therefore moving javascript references further down the page reduces render blocking of the initial elements at the top.

Ideally javascript references should be placed just before the end body tag, </body>, if for whatever reason this is not possible, aim to have them referenced at least below the fold.

BAD: js-bad

GOOD: js-good

7. Use data-uri in CSS for small images

Small images, such as icons/logos etc, can be optimised by being included in the CSS in a Data-URI format which will reduce HTTP requests.

For example lets say you have the following site logo CSS:

.logo
{
    width:100px;
    height:40px;
    background-image:url('https://placeholdit.imgix.net/~text?txt=logo&w=100&h=40');
    display:block;
}

http://jsfiddle.net/xrn0m0fd/

With this example the browser would detect the image URL and create a HTTP request to download the image. With small icons the biggest performance cost is the Time To First Byte (TTFB). By using a Data URI format the data for the image is included within the size of the CSS request and therefore omits the TTFB for the image specifically.

8. Use Performance Test Tools

Finally you can use performance test tools to identify areas of improvement.

Google Chrome - Developer Tools - This is a great tool for viewing your HTTP Waterfall in the Network tab. There's also the ability to throttle the bandwidth network so that you can emulate users on slower connections. The Audits tab will also give you suggestions on how your site could be further optimised.
YSlow - A browser extension which can be installed and ran to give performance suggestions on your website.
GTmetrix - Similar to Chrome Developer Tools, this tool will report the waterfall of the page request, and also include information on YSlow. Furthermore it'll record reports for up to 30 days allowing you to judge page speed before and after performance changes.

🔖 bundling

8 Tips to increase front end website performance