8 Tips to increase front end website performance
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:
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.
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.
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
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.
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:
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, , if for whatever reason this is not possible, aim to have them referenced at least below the fold.
BAD:
GOOD:
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;
}
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.
Finally you can use performance test tools to identify areas of improvement.