1. Use YSlow for Firebug
YSlow is a Firefox add-on that integrates into the firebug web development tool. YSlow grades website performance and download speeds based on a set of rules set by Yahoo Developer team for optimized web sites. YSlow can show you exactly how many resources and downloading times are required for your site, as well as providing tips on how to improve this.
2. Use SmushIt for your images
Smushit.com is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. You'll get a report of how many bytes you can save by optimizing your images and all the changed images as a single zip for download.
You can use Smush.it as a Firefox add-on, or you can simply go to their site and use the uploader that is provided. Smush.it is a must have plugin if you are a blogger or frequently use images on your website. Rest assured, no quality is lost when decreasing the size.
3. Move your Javascript files to the bottom of your page
Though this isn't always possible to do, it is a good idea to do so if you can. When a browser goes to download CSS, scripts, and images from your site, it usually has a maximum amount of information it can stream at once. By placing the scripts at the bottom of our page, we can allow the essentials to load first and then load the scripts at the end.
4. Compress your Javascript
This is something that is a great idea to do once you are completely done developing your website. By compressing and removing the whitespace from your scripts, you can greatly reduce their file size, and thus, reduce the overall loading time of your website. There are plenty of online tools to do this for you, such as Javascript Compressor or JSMin.
5. Use CSS sprites
When you use CSS sprites, you combine your background images into one image, and position then using CSS. This means that instead of downloading multiple images for your CSS, only one image file need be loaded. Google is one of the many websites that takes advantage of CSS sprites. You can read more about sprites and how to achieve them in this great article found at A List Apart.
6. Split up your data across different domains
If you are running a larger site that brings in a medium to large amount of visitors, you might consider placing your static information and data (such as images for your posts) on another domain. For instance, you could have all of you main HTML and necessary files of yoursite.com and all of your images and videos on images.yoursite.com. This way, you are maximizing the amount of parallel downloads you can have. Many prefer to use services such as Amazon s3 to host their static content.
7. Use the Google Ajax libraries.
Were you aware that you can let Google host certain popular open source libraries for you? Libraries such as jQuery, MooTools, and Prototype are all included. To load jQuery in your page, all you would need to do is link to http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js. How does this help us? Well, for one if the user has already been served that script by Google, there is a good chance it will be cached and they won't have to download it at all! Next, you get improved speeds and parallelism because it is hosted on a separate domain.
8. Reduce your HTTP requests
Open up your favorite code editor and have a look at the HEAD section of your page. Are there some scripts you can combine into one? What about all of those CSS files? Is there anyway they could be reduced some? Ask yourself these questions and inspect your website, take a good look at how many different requests your site needs to make for scripts and such and try to reduce this number if possible. We will talk more about tools you can use to analyze your scripts below.
9. Compress your CSS files
Just as we talked about compressing our Javascript files when the website is completed, it is a good idea to compress your CSS files also. Doing so will strip the whitespace (and strip comments if you wish, you can always keep a backup on our hard drive) and reduce the overall file size. There are many tools to do this for you, one of which is CSS Compressor.
10. Use GET when using AJAX
This is a wonderful tip from the Yahoo developers. They found that when using a POST request and AJAX, that it requires a two step process. GET on the other hand usually transfers the packet all at once. Yahoo! also argues that according to the HTTP specs, GET should be used when requesting data, so it makes sense to use GET when using AJAX. You can read more tips from the Yahoo! developers on their performance page.
11. Do your best to remove any 404s
When a user hits a 404 page not found, it is not only frustrating but it is also a costly HTTP request. This is especially true if Javascript and CSS files cannot be found, in some instances, the browser will try to parse the file looking for anything it can use. Over time, a lot of 404s can really put a dampen on your server.
12. When possible, declare height and width
This tip comes to us thanks to Daily Blog Tips. When possible, it is best to declare the width and height of your image tags, as this will improve the load speed of your site. If you do not declare them, the browser will figure out the dimensions on its own, taking up valuable time.
13. Mon.itor.us
Part of decreasing your server loads and optimizing your website is knowing what needs to be optimized and dealt with. This is where Mon.itor.us comes in. Completely free, mon.itor.us allows you track CPU, memory, and hard disk usage as well as a plethora of other information. Very useful for finding out what is consuming the most resources.
14. Create a website template
Credit to NETTUTS for this wonderful tip. Say you want to create a simple portfolio or small website. It makes sense to create a pre-optimized template with all the scripts and files you will need to get started. This will save you a lot of time considering you won't have to go back and make all kinds of changes. Just take sometime to build a nice optimized template folder and you're good to go!
15. Check out Pylot
Pylot is a free open source tool for testing performance and scalability of web services. It runs HTTP load tests, which are useful for capacity planning, benchmarking, analysis, and system tuning.
16. Webload
Webload is another completely open source load generation engine. Webload is one of the most widely used software products for developers looking to optimize their sites, so it makes sense to mention it here.
17. Online analyzation tools
Maybe you don't want to download or work with any external software to monitor your website speed and download times. Luckily, there are plenty of online tools that will give you a good idea of what components of your site need attention. One of such tools is the analyzation tool found at WebsiteOptimization. Simply enter the URL and you're done.
18. Site-Perf
Another online tool that one may use is by Site-Perf, which allows you to analyze load times as well as set test-points.
19. Choose link over @import
A quick CSS optimization tip is to always link to CSS files instead of using @import, as there are some speed benefits. This allows for what is known as 'progressive rendering' and you can read all about it on the Yahoo! optimization site.
20. Wp Super Cache
Since so many of us seem to use Wordpress or another popular CMS, it makes sense to mention a few plugins that can help decrease the loading time of your site. A wonderful Wordpress plugin called WP-Super Cache takes care of all of the tricky cache work that can really boost a websites speed.
21. Wordpress Gzip Plugin
Lastly, we will have a look at the WP gzip plugin. This plugin does exactly what it sounds like it does, it allows you to gzip (compress) certain pages on your Wordpress site, thus, allowing faster download speeds.
That'll do it!
Hopefully, you have found some of the above tips, script, or tools helpful for optimizing your website. Are there any tips or tools we didn't mention that you take advantage of? Let us know in the comments!
_____________________________________________________________________________________
Written by Drew Douglass
Sakume, 8 November, 2011
Let's not also forget that another excellent way to increase speed and reduce server load of any site, regardless of running a blog like Wordpress.org (self hosted), running your own video site like wtftube.tk or just a plain HTML site, doesn't matter. Using the CloudFlare service (it's free) will boost you up there as well with caching and security both.
Also, for help with sprites, I recommend spriteme. I utilize the spriteme service to generate css sprites for me and assist me with converting my current CSS to using it.
Thanks for the details. Mon.itor.us was something I wasn't aware of, however it doesn't seem to work on my end (DNS errors and the like darnit). Pingdom can help though.
Also when running your own blog or site, try to have streaming content loaded off your own server. Youtube, Vidilife, Metacafe, Vimeo, etc are excellent resources for streaming video via embeds. No need to use your server space and bandwidth when you can use someone else's free and legitimately.
Andrew, 12 May, 2010
This only helps part of the problem.
A lot of CMS's struggle with database optimization with no or poor indexing, over normalization (too many joins) or just poorly written queries from the ORM.
Do some DB profiling to see what your expensive queries are as well as where can you add additional indexes (though at the cost of write speeds) if required.
You'd be surprised how a few small DB tweaks can improve performance 10-15 fold.
Sujit Shrestha, 11 May, 2010
With your help http://www.medchrome.com is now fast and less load to server than anytime before.
thank you again
webreaders, 23 March, 2010
great list thx!
VINIT PRATAP SINGH, 17 February, 2010
cool!!!.... thx for good article.
Issack Rajan, 14 January, 2010
www.weblinksnetwork.com
Thanks for your great help in telling us how to optimize our website with these tools. Great work.
Vic, 13 January, 2010
Why do people keep recommending gzip as a method to speed up site performance? My server support guy has tuned the heck out of my server and says that gzip puts a big strain on the cpu and is not really a good thing to do.
Other than, that, good stuff. :)
rakhi, 25 December, 2009
Really a good and useful article.. Thanks||
Anne, 18 November, 2009
Thanks for a great stuff......Good software and tools information for web page loading time. Kindly continue these types of technology information.Thanks again.
http://www.webdesigndevelopmentfirm.com/
mouli, 6 October, 2009
useful information...Thanks a lot.
Rafay baloch, 12 September, 2009
I was looking for this thanx
AskApache AskApache, 22 July, 2009
Yes this is a fantastic bunch of tips.. Some of the best of the best here. Thanks!
Markus, 27 May, 2009
Chris: Thanks for sharing! Some of them were kind of lame but I also found some new really neat things to tweak my site with. Rezpect!
Brian Franklin, 27 May, 2009
love it!
jon, 27 May, 2009
sweet, thanks. these are some valid tips