Websites that perform well will enjoy a much higher level of visitor engagement, retain more customers and expect a greater rate of conversion.

With almost 20% of global web traffic coming from mobile devices and an ever-increasing number of casual surfers with mere moments to spare, page performance has never been so important.


Performance optimization can no longer be afforded as an afterthought or a “nice to have”, but is an essential part of the development process that should be considered from the very beginning of the project life cycle.

Implementing a number of workflow changes with a build tool like Grunt and CSS preprocessors like SASS or LESS, can quickly help to ease the optimization process and ensure that performance is maintained throughout the entire development process.

Minimize HTTP Requests

Combining external scripts and CSSstylesheets into as few files as possible will cut down on round-trip times ( RTTs ) and delays in downloading other resources. Using a CSS preprocessor such as SASS will enable a developer to write the CSS with a modular approach, while compiling a single, concatenated stylesheet. Similarly, a modular approach can be taken when writing well formed, reusable JavaScript with the same result, a single, concatenated script where possible.

Minify CSS and JavaScript

Production ready CSS and JavaScript should always be minified. Minification is the process of removing all unnecessary characters from the source code, including white space, blank lines, comments and block delimiters, in order to reduce the physical size of the resulting file. The actual physical file-size may not be a massive saving, but every byte helps.


CSS Sprites

Each image included on a web page requires a single HTTP request. Most browsers can only make a set number of simultaneous requests to a single domain, so if there are more requests than the browser can handle simultaneously, queues will form. One method used to reduce the number of HTTP requests is to combine individual images into a smaller number of images or CSS sprites. This is particularly useful for user interface elements such as buttons and widgets.

Losslessly Compress Images

Most images produced using tools like Photoshop or Fireworks willgenerally include a lot of extra, unused data including meta data and colour data that is not required in the browser-based file. All of this extra data can be removed from the image losslessy using tools such as ImageOptim and Trimage, or web services like Yahoo’s which can also be implemented as part of the Grunt build process. Lossless compression means that the image is optimized without changing its look or visual quality.

Defer Parsing of JavaScript

While all CSS stylesheets should be included in the document head, it is not necessary for JavaScript files to be included at this point. Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. For that reason, any JavaScript files should be included as close to the bottom of the page as possible.

Use a Content Delivery Network ( CDN )


Traditionally a server will store a copy of an asset and serve it to whichever location the site visitor is viewing it from. The time it takes from the user first making the request to the time it takes for the server to respond can vary depending on where the user is located geographically relative to the server. Content Delivery Networks ( CSNs ) work differently. Instead of hosting a single copy of the asset, they host multiple copies in various locations around the world. Visitors are then served the assets that are closer to their geographical location, improving speed and optimizing performance in the process.

Further Reading

Google Developers – Web Development Best Practices: