First we will talk about some performance rules for your website. One way to check for your website performance is to have the Yslow extension for Firefox Firebug installed. This is how to install and use the Yslow plugin. And below you can see a picture how it looks like.
After you get the basics with Yslow, you can test your website and in the report view you’ll see the grade note and all the performance tips you could try. Let’s break them down.
1. Make fewer http requests
Another thing you should have in mind are the images from your website. It doesn’t matter if you use jpeg or png or even gif files, the size it’s all that matters. If you need transparent images, you should use png or gif files if they don’t have too many colors. Just remember to save them “for the web” in Photoshop, or any other image editing program you use. But the best way to compress http requests on images is to use csssprites. Here is a picture showing you how a CSS sprite looks like.
Another method to maximize the performance of your website is to use a compression method like Gzip. Compression reduces response times by reducing the size of the HTTP response. In order to use gzip you have to place some lines of code in your .htaccess file. If your server is using Apache, you have to know which version of Apache, because Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate. A tutorial on how to implement active gzip compression is here.
2. Place your stylesheets higher in the header
When you have many tags in your head section it is best to place your stylesheets at the top of the head section. The first line in the head section should be the “title tag”. This also helps with search engines. After that you should have your css files placed. Here is an example :
<title> Tutorial example </title>
<link rel="stylesheet" type="text/css" href="yourcssfilegoeshere.css" />
<meta name="description" content="tutorial example description goes here" />
When you have scripts inside the <Body> your page, they block parallel downloads. An internet browser in general won’t download more than two components in parallel per hostname, accordingly to the HTTP/1.1 specification. If you host your images on different servers, you can have multiple downloads in parallel. This is a CDN (content delivery network ) tip that I will explain later on. But when a script is downloading, the browser won’t start any other downloads, even on different hostnames.
In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses
document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
5. Use a Content Delivery Network (advanced)
What is a CDN (Content Delivery Network) ?
A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen. As your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site. A free CDN example is here. You should consider linking to Google’s CDN.
Not too long ago, Google began hosting popular scripts such as jQuery. If you’re using such a library, it is strongly recommended that you link to Google’s CDN rather than using your own script.
6. Add an Expires or a Cache-Control Header
Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.
Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. In this example: a far future Expires header, telling the browser that this response won’t be stale until April 15, 2011.
Expires: Thu, 15 Apr 2011 20:00:00 GMT If your server is Apache, use the ExpiresDefault directive to set an expiration date relative to the current date. This example of the ExpiresDefault directive sets the Expires date 10 years out from the time of the request.
ExpiresDefault "access plus 10 years"
Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes (because the visitors will still get the old page until it expires).
7. Reduce DNS Lookups
The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type http://www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server’s IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can’t download anything from this hostname until the DNS lookup is completed.
DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user’s ISP or local area network, but there is also caching that occurs on the individual user’s computer. The DNS information remains in the operating system’s DNS cache (the “DNS Client service” on Microsoft Windows). Most browsers have their own caches, separate from the operating system’s cache. As long as the browser keeps a DNS record in its own cache, it doesn’t bother the operating system with a request for the record.
Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the
DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the
network.dnsCacheExpiration configuration setting. (Fasterfox changes this to 1 hour.)
When the client’s DNS cache is empty (for both the browser and the operating system), the number of DNS lookups is equal to the number of unique hostnames in the web page. This includes the hostnames used in the page’s URL, images, script files, stylesheets, Flash objects, etc. Reducing the number of unique hostnames reduces the number of DNS lookups.
Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.
8. Avoid Redirects
The main thing to know is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html
The browser automatically takes the user to the URL specified in the
Location field. All the information necessary for a redirect is in the headers.
9. Configure ETags
Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f” Content-Length: 12195
The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.
10. Flush the Buffer Early
When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.
... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->
11. Don’t Scale Images in HTML
Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
then your image (mycat.jpg) should be 100×100px rather than a scaled down 500×500px image.
A bigger image means more bytes to download. And if you scale down that image then you load extra bytes that are unnecessary .
12. Embrace Firefox Extensions
13. Utilize Console.log() to Debug
You’ve downloaded the jQuery library, and you’re slowly trying to grasp the syntax. Along the way, you hit a snag and realize that you can’t figure out what the value of $someVariable is equal to. Easy, just do…
Now, load up Firefox – make sure you have FireBug installed – and press F12. You’ll be presented with the correct value.
Now – multiply this by infinity and take it to the depths of forever and you still won’t realize how useful Firebug and console.log() can be.
14. Compress Your Images Even Further
When using the “Save for Web” tool in Photoshop, we can compress our images in order to lower their respective file sizes. But, did you know that the compression can be taken even further without sacrificing quality? A site named Smush.It makes the process a cinch. So, just before deploying a new website, run your url through their service to reduce all of your images – thus speeding up your website. Beware – the service may convert your GIF files to PNG. You might need to update your HTML and CSS files accordingly. While we’re on the subject, 99% of the time, saving as a PNG is the better decision. Unless you’re using a tacky animated GIF, consider the PNG format to be best practice.
15. Be Wise. Use Snippets.
Many IDEs offer a “code snippet” panel that will allow you to save code for later use. Do you find yourself visiting lipsum.com too often to grab the generic text? Why not just save it as a snippet? In Dreamweaver, press “Shift F9″ to open the snippet tab. You can then drag the appropriate snippet into the appropriate location.
16. Use Cuzillion to plan out an optimal web page structure
Cuzillion is a web-based application created by Steve Souders that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.
17. Monitor web server performance and create benchmarks regularly.
The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.
It’s essential that you are constantly checking your web server for performance issues. If you have root-like access and can install stuff on the server, check out ab – an Apache web server benchmarking tool or Httperf from IBM.
If you don’t have access to your web server (or have no clue what I’m talking about) you’ll want to use a remote tool like Fiddler or HTTPWatch to analyze and monitor HTTP traffic. They will both point out places that are troublesome for you to take a look at.
Benchmarking before and after making major changes will also give you some insight on the effects of your changes. If your web server can’t handle the traffic your website generates, it’s time for an upgrade or server migration.