Website Performance Optimization… The Why & How

Development Practices to Improve Page Load Time

You get the point, right?  Website performance is important and cannot be ignored.  Now let’s discuss a few best practices to improve your website’s page load time.

1. Reduce what you send to the browser. Reducing the amount to data transferred to the browser should be your number one priority when it comes to reducing page load. This can be accomplished by compressing and optimizing images and always serve scaled-to-size images. Remove any unused CSS or JavaScript and then minify your CSS and JavaScript. Finally, enable a server-side compression like GZip. Most modern browser supports this data compression, and it will significantly reduce the amount of data passed from the server to the client browser.
2. Optimize what you send to the browser. Remove all JavaScript errors and 404 errors that occur on the page. These types of requests can cause long delays and often cause browsers to crashes. Also use efficient CSS selectors. A poor performing selector that has to search the entire DOM object can significantly slow down your load time. Remove any unnecessary markup, avoid CSS expressions & imports, and put your CSS declarations in the document header. Look for opportunities to condense and combine CSS files and JavaScript files. Finally, defer parsing of JavaScript on page load is extremely helpful to mobile devices.
3. Let the browser cache resources for you. Take full advantage of browser caching. It does not cost you anything, and it significantly reduces the number of requests for static resources from your server. Make sure you read the Google’s Page Speed section about browser caching best practices to understand it fully. This alone will reduce your server load and improve user experience.
4. Implement Data Caching from the server side. One often overlooked caching option is data and server side caching. From the application side, you can choose which parts of the page can be cached on the server. For example, headers and footers rarely change and can be cached from the server side using techniques like output caching. Dynamic content delivered from a database should also be cached when possible. Content delivered from data cache is usually stored in memory on the server, so the server can access and deliver the data faster than making a round trip to the DB. Make sure to implement data caching for the heaviest requested areas of your site!
5. Reduce DNS look-ups and redirects. Reduce the number of unique domain requests as much as possible. This will reduce the number of DNS lookups, which can be costly in the loading process. Also, ensure that your DNS Time to Live (TTL) are not too low because this forces some browsers to do more frequent and unnecessary DNS lookups. Finally, reduce or eliminate unneeded redirects.

There are many different platforms and frameworks available, but these concepts are the same across all of them, whether it’s Linux/PHP or Windows/.NET or some other framework. There are also some excellent development tools to manage site performance such as Firebug, Chrome, etc. Personally, I find the Firefox – Fire Bug development tool with the Google Page Speed Plugin as my most valuable tools in this process. These two tools together will allow you to see every resource that is downloaded and will quickly identify 404 and JavaScript errors. You can view the headers to see if the resources are compressed and see how long it takes to download each one. Your target goal should be 3 seconds or less for page load time before you turn on browser caching. Start with the homepage and other high traffic entry pages, then as time permits, hit the other pages.

Well, that’s it for now… Happy performance optimizing, and remember: it’s everyone’s responsibility to manage site performance, from graphic designers to developers and even content publishers.