Ultimate Guide To Web Optimization (Tips & Best Practices)
Web optimization is a vital part of web development and maintenance but also something often overlooked by webmasters. Just think of the money you can save, and how it can potentially help increase your readership and traffic when they are properly done.
If you have not done any optimization to your website (or blog) so far or merely curious how it can help speed up your site, please take a look at this list of optimization tips we've put together.
Choose a decent Web Host
Your web hosting account has no direct relationship with the optimizations you are about to perform but we figured choosing the right web hosting account so important we decided to bring it to your attention first. Hosting account is the foundation of your website/blog where it's security, accessibility (cPanel, FTP, SSH), server stability, prices and customer supports all play important roles. You need to make sure you are in good hands.
How to Choose a Web Host by wikiHow is a great article that gives you steps and tips you should know before purchasing any web hosting account.
Host Assets Separately
Maximizing Parallel Downloads in the Carpool Lane.
Compression with GZip
In short, contents travel from server side to client side (vicet versa) whenever a HTTP request is make. Compressing the content for sending greatly reduce the time needed to process each request.
GZip is one of the best ways to do this and it various according to the type of servers you are using. For instance, Apache 1.3 uses mod_zip, Apache 2.x uses mod_deflate and here's how you do it in Nginx. Here are some really good articles to get you familiar with server side compressions:
Avoid Redirects by Google Code gives you a good overview on the matter. The article also recommends some practical ways to minimize redirection to increase serving speed.
Reduce DNS Lookups
According to Yahoo! Developer Network Blog, it takes about 20-120 milliseconds for DNS (Domain Name System) to resolve IP address for a given hostname or domain name and the browser cannot do anything until the process is properly completed.
Author Steve Souders suggested that splitting these components across at least two but no more than four hostnames reduces DNS lookups and allow high degree parallel downloads. Read more on the article.
by manipulating the .htaccess and using PHP. Click here to read more.
Compress them online!
Customize Header Expiry/Caching
Off-load The Assets
- Images: Flickr, Smugmug, Paid hostings*
- Web Forms: WuFoo, FormSpring
- RSS: Google Feedburner
- Survey and Polls: SurveyMonkey, PollDaddy
*Paid hostings ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ Paid services always have better reliability and stability. If your website is constantly requesting for the assets, you'll need to make sure they are in good hands. We recommend Amazon S3 and Cloud Front.
Handling Web Images
Images are important part of your website. However if they are not properly optimize, they can become a burden and end up utilizing unpredictably large amount of bandwidths on daily basis. Here are some best practices to optimize your images:
- Optimize PNG Images
Folks at Smashing Magazine describes some clever techniques that may help you optimize your PNG-images.
- Optimizing for Web ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ Things you need to know (the formats)
Learn more about Jpeg, GIF, PNG and how you should save your images for web.
- Don't Scale Images
Always practice inserting the
heightfor each images. Also don't scale down an image just because you need a smaller version on the web. For example: Do not force scale a 200ÃƒÆ’Ã¢â‚¬â€200 px image to 50ÃƒÆ’Ã¢â‚¬â€50 px for your website by altering the
height. Get a 50ÃƒÆ’Ã¢â‚¬â€50 px instead.
Optimizing with Web Services and Tools. Good news is, you don't need to be a Photoshop expert to optimize your images. There are plenty of web services and tools to help you do the job.
Probably one of the most efficient online tool to optimize images. There's even a WordPress plugin for it!
- JPEG & PNG Stripper
A Windows tool for stripping/cleaning/removing unnecessary metadata (junk) from JPG/JPEG/JFIF & PNG files.
- Online Image Optimizer
Lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site, by Dynamic Drive
Effortlessly make all your GIF images and animations smaller.
- Here's more.
- Optimize PNG Images
Modern websites uses CSS as the foundation of the style, as well as the look and feel. Not only CSS gives great flexibility to changes, it is also lesser in terms of codes needed. However, if they are badly coded, it could be a backfire. Here are some checklists, or rather guides to you make sure your CSS are properly optimized:
- Keeping Your Elements' Kids in Line with Offspring
How to keep your markup clean with CSS Selectors.
- Keep CSS short
When they give the same style, the codes are better the shorter they are. Here's a CSS Shorthand guide you'll probably need.
- Use CSS Sprite
CSS Sprite technique reduce HTTP request each time a page is load by combining several (or all) images together on a single image file and control it's output with CSS
background-positionattribute. Here are some useful guides and techniques to create CSS Sprites:
- Using every declaration just once
When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.
- Reduce amount of CSS files
The reason is simple, the more CSS files you have the more HTTP request it'll have to make when a webpage is being requested. For example, instead of having multiple CSS files like the following:
- <link rel=“stylesheet” type=“text/css” href=“main.css” />
- <link rel=“stylesheet” type=“text/css” href=“body.css” />
- <link rel=“stylesheet” type=“text/css” href=“footer.css” />
<link rel="stylesheet" type="text/css" href="main.css" /> <link rel="stylesheet" type="text/css" href="body.css" /> <link rel="stylesheet" type="text/css" href="footer.css" />
You can combine them into the one single CSS:
<link rel="stylesheet" type="text/css" href="layout.css" />
- Useful Tools To Check, Clean & Optimize Your CSS File
Some of the useful tools that you can use to optimize your CSS code, even if you have completely no knowledge of CSS coding.
- 7 Principles Of Clean And Optimized CSS Code
Optimization isn't just minimizing file size ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Å“ it's also about being organized, clutter-free, and efficient.
- Best Practices to optimize CSS
Consider this article more like an academic exercise rather than real-life optimization tips.
- Keeping Your Elements' Kids in Line with Offspring
Optimization for WordPress
From time to time, we monitor, benchmark and analyze the performance of our WordPress blog. If the site is running slow, we need to know why. Here are some basic changes we've done and we figured will significantly increase the speed of your WordPress blog.
Cache Your Worpress Blog
WP-Cache is an extremely efficient WordPress page caching system to make you site much faster and responsive. We also recommend WP Super Cache which enhances from the previous mentioned plugin and too does a great job.
Deactivate and Delete Unused Plugins
When you notice your blog is loading real slow, see if you have a lot of plugins installed. They might be the culprit.
Remove unnecessary PHP Tags
If you take a look into your theme's source codes, you will find a lot tags like these:
<?php bloginfo('stylesheet_directory'); ?>
<?php bloginfo('description'); ?>
They can be pretty much replaced with text content that don't cause load to the server. Check out Michael Martin's 13 Tags to delete from your WordPress Blog
- 3 Easiest Ways to Speed Up WordPress
John Pozadzides shares how his blog sails smoothly through a Digg traffic spike.
- 13 Great WordPress Speed Tips & Tricks for MAX Performance
Here are a few things to try if you find that your WordPress site is not performing as well as it could be due to high traffic or hidden issues you don't know about.
- 40 WordPress Optimization Tips
Optimization tips in slides. 40 tips in 40 minutes.
Last but not leastÃƒÂ¢Ã¢â€šÂ¬Ã‚Â¦
Here are some useful web services and tools that gives you a broader perspective and better analyzation to help you in web optimization.
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It gives you a good idea what needs to be done in order for the website to load faster.
Similar to Yahoo! YSlow, Google Page Speed is an open-source Firebug add-on to evaluate the website performances and how to improve them. (Firebug required)