It’s a well established fact that fast websites lead to more conversions, user retention and a better user experience. Everyone wants to use fast websites, but sadly there are many slow web sites on the internet. We can thank shared hosting servers that have too many websites crammed onto their box, or bloated front end code. We can even thank that client who uploaded a 14 MB high resolution image onto their CMS without a care in the world. Whatever the cause, this epidemic needs to be eradicated.
This article lists the most useful tools and strategies for improving website speed. We will be adding to the list over time and we are happy to incorporate suggestions if you leave us a comment.
Analyzers and Metric Generators
Before you can fix the problem you have to figure out what the problem actually is. The tools in this section will analyze your website and present opportunities for improvement.
GTMetrix: GTMetrix measures the total load time of a web page and provides analysis and suggestions for optimization.
200please.com: Many benchmark tools measure the total time it takes for a webpage to load. This includes the time needed to requests all of the assets from the server as well as the time it takes the browser to actually render the page. If you just want to know how long it takes to get the first response from the server, 200please.com is a great tool. It will ping your server from multiple locations around the world and tell you how long it takes the initial response to complete.
Google PageSpeed: Google maintains a couple tools on their PageSpeed website which are similar to the other tools listed in this section. They have a web based analyzer as well as plugins which can integrate with various browsers.
YSlow: YSlow is a page analyzers from Yahoo that works on various platforms. There are plugins and extensions that work for all of the major browser (except IE) and it even works with node.js servers.
Pingdom: Like GTMetrix, Pingdom will analyze your website and provide an assessment and opportunities for site improvement. While it’s primarily a paid service, Pingdom has some nifty free tools located at http://tools.pingdom.com
Fiddler Fiddler is a debugging proxy written by Eric Lawrence who worked at Microsoft as a Program Manager on the Internet Explorer development team. It captures HTTP and HTTPS traffic an allows users to analyze information. It currently works for Windows, but a Mac/Linux version is in Alpha.
Image size is one of the most critical factors address when trying to improve a website’s performance. Decreasing the size AND number of images can have a dramatic effect on the load time of a webpage.
How to Automate PNG & JPG Image Optimization in Windows: If you’re a windows developer, this is a very useful article that explains how to losslessly compress images PNG and JPG files directly on your computer. It requires installing some command line tools and a BAT file, however, once this is done, you’ll be able to right click on any folder and compress all of the images inside of it. This is one of the first tools we setup on a new development machine.
TingPNG.com: TinyPNG is a simple web based tool for losslessly compressing PNG files. It works quite well and it can dramatically reduce the size of PNG files.
Smush It: Like TinyPNG, Smush It will let you losslessly compress images; unlike TinyPNG it will work with other image formats.
CSS Tricks Guide to CSS Sprites: CSS Sprites are a technique for reducing the number of requests a browser has to make when loading a webpage. Instead of loading each file individually, it is much more efficient to merge images together and download a single (albeit larger) file. From there, we can use CSS to present a specific region of the larger file to display the image we want. Depending on the effect you’re trying to create in an HTML element, this technique may not work, but there are almost always a couple images that make use of this technique.
CSS Compress is a straightforward website for compressing and merging together multiple CSS files.
JS & CSS YUI Minification has options for minifying and combining both JS and CSS files.
How To Lose Weight in The Browser: This is a comprehensive article that presents a number of strategies for helping a browser render a page faster.
We hope you found this article useful. If you see any mistakes, missing features or ways to improve it, please let us know in the comments below so we can update its contents. If you're willing to link to us, we would sincerely appreciate it!