Ancient history
Nowadays many web developers around the world underestimate the impact page size has on their sites performance. Back in the days before broadband was considered a standard, people was sitting on slow internet connection with their modems. Back then web developers had to make their pages small enough for those modem users, the page structure was not that complicated, the images and javascripts were kept to a minimum or else people had to wait for ever to load a single webpage.
New times
Today the story is different, most visitors are sitting on lightning fast internet connections, so the page speed doesn’t have such an impact on the visitors anymore. This has given web developers the freedom to utilize much more images, css and javascript in their designs which has resulted in some pretty amazing designs. The focus has been shifted from optimizing the code and minifying images to perfecting the design inside photoshop or fireworks. This shift of focus has made designers sloppy, they doesn’t have the optimizing mindset in the back of their head like the old school designers had to have.
Not only have the load time of the pages improved (a lot), but peoples expectations has gotten higher, if a page takes too long to load people are getting annoyed and bored, and the threshold for pressing the back button and go to the next page in the search results are considerably lower now than before. Studies have shown that most people lose loyalty and interest for your page if it loads slow, and are not likely to come back.
[adsense-banner]
Search Engine Optimization
The visitors are not the only ones that get bored with slow pages, now Google also takes page load times into account when calculating page ranks. And since the goal in SEO is to get to the top of the search results in search engines this is a area we as web developers can’t ignore, although pages speed doesn’t have a huge impact on page ranks as other factors of SEO has it’s worth taking a look at.
Minify Page size
This step is pretty straight forward, go through your HTML or template files, see if there is some way you can simplify your design, remove unnecessary elements, maybe you can do somethings a different way, try utilize CSS to get the same results. Make sure all your CSS is in external files instead of inline mixed with your HTML. Also make sure you properly reset your CSS styles and remove unnecessary styles and that CSS shorthand is used.
Remove Whitespace
Unnecessary whitespace does not add any value to your page other than making it larger in size. The web browser strips it away before rendering the page anyways, so you can lose some weight by removing them for good. How far you want to take this is up to you, by removing the whitespace you also reduce the readability, so if you plan on editing the code later on I would recommend you to only remove as much as you can while still being able to read it, take away double line breaks, If you plan on keeping indentations make sure they are done with tabs instead of spaces (1 tab usually converts to 4 spaces – This would cut the “indentation cost” by 75%) You have to consider how much you can get out of this, and if it’s worth it.
[adsense-banner]
Optimize images
Make sure your images aren’t stored in larger dimensions than you are presenting them to the visitors, it’s a waste to have the visitor download a 1024×768 image if all they see is a thumbnail or sized down version of the image. When you are sure your images aren’t unnecessary large, make sure they are compressed and optimized to decrease the file size. You can use an online tool like Smush.it to remove unnecessary data from the images.
Parallel loading
Browsers has a limitation on how many concurrent connections they can open to a single domain, this means it will queue the downloading of resources from your server, but if you place your javascript and images on multiple domains e.g. www.domain.com and images.domain.com (it can still be on the same server) the browser won’t have to wait for 1 resource to finish before starting on the next one. You should also considering a content delivery network for storing your resources on. Note that the client will have to do a DNS look-up for each domain you present it with, so it’s not recommended that you use more than a few since it takes some time to look-up the domain.
Caching resources
Check that all your static resources are being cached properly, this can be done by placing a .htaccess file inside the folder for your resources that will add and Expires header to all files inside that folder.
ExpiresActive on ExpiresDefault "access plus 1 year"
Placement of JavaScript
Place JavaScript that is not precarious for the loading of the page at the end of the document. This is because the sequential processing of JavaScript holds up the rendering of the page. You should also consider compressing the JavaScript files if you have lots of JavaScript.
Compressing files
There are several ways to compress our files before sending them to the client, if you are running apache there is mod_deflate which will compress the files you have specified in the .htaccess file like this:
AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
If you are using PHP you got an even more powerfull compression at your disposal, namely gzip. To enable gzip compression of your output you need to enable output buffering at the beginning of your php files and specify that it will compress using gzip before sending it to the client. Be sure to check if the client accepts gzip, or else it will get garbled data. 😉
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start("ob_gzhandler");
else
ob_start();