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
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 smush.it 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.
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.
Google Developers – Web Development Best Practices: https://developers.google.com/speed/docs/best-practices/rules_intro