Once you have your website established and running properly it may be time to take a look at your server load and loading times. Over time, websites can start to get bogged down with large images, multiple pieces of Javascript, and hefty CSS files. All of these can contribute to a website that is less than optimized and may run slower and become irritating to the end user. Today, we will have a look at 21 great scripts, tips, and tools you can use to decrease your website’s server load.
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 the Yahoo Developer team for optimized websites. YSlow can show you exactly how many resources and downloading times are required for your site, as well as provide tips on how to improve this.
2. Use Smush.it 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 a large number 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 your main HTML and necessary files on yoursite.com and all of your images and videos on images.yoursite.com. This way, you are maximizing the number 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 on your page, all you would need to do is a 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 any way 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, 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 to 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 some time 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 the 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 analysis 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 analysis 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 website’s 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, scripts, 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!
