Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

17 website optimization tips for Web Developers

A few posts ago, we have started talking about website optimization tips and promised will follow up with more stuff later. Good news, we have compiled a list of 17 essential optimization tips to make your website load faster, to simplify your CSS rules and JavaScript code and many other bits and pieces that every Web developer should know.

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. Here 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

Here you’ll see how many JavaScript and CSS files will be loaded when someone enters your site. It is best to have a small number as possible by combining them or removing the extra code. The basic idea is: if you want a faster website you have to use fewer http requests. Just remember, not just http requests influence your rendering time. See the picture below.

In order to minimize your JavaScript files you could use JSMin. For your CSS files, try to combine them and use a csscompressor to load fewer bytes (like in this this tutorial). Just a quick remember, copy your CSS rules there, select compression level and how to handle the comments and press “Compress-it”. After that you will see the difference from the original and how much it was compressed in percentage points. Oh, I almost forget please paste the new compressed CSS rules into your file.

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.

A tutorial on how to use css-sprites is here. Another way how to use CSS sprites is to use SpriteMe.

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 :

<head>
<title> Tutorial example </title>
<link rel="stylesheet" type="text/css" href="yourcssfilegoeshere.css" />
<meta name="description" content="tutorial example description goes here" />

3. Place your JavaScript code at the bottom of the page

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.

4. Make your CSS rules and JavaScript  external

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. If you have inline coding in your html document this means that the code is downloaded every time the HTML document is requested. And also you are increasing the html document size. For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.

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 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 Expires or Cache-Control, indicate it should be. The meta refresh tag and JavaScript are other ways to direct users to a different URL, but if you must do a redirect, the preferred technique is to use the standard 3xx HTTP status codes, primarily to ensure the back button works correctly. Here’s an example of the HTTP headers in a 301 response:

      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 ETagresponse header.

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.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:

      ... <!-- 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

The number of helpful plugins available for the browser is astounding. Here are some of them : Firebug, IE tab, FireFTP, Yslow, FirePHP, Web Developer Toolbar.

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…

console.log($someVariable);

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.

If you have any other optimization tips, please share them. And if you have any questions you can send them at : support@extendstudio.com .

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.

Facebook comments:



14 Responses to “17 website optimization tips for Web Developers”

  1. 17 website optimization tips for Web Developers- Extend Studio Blog…

    Thank you for submitting this cool story – Trackback from Servefault.com…

  2. [...] 17 website optimization tips for Web Developers Submitted by extendstudio [...]

  3. [...] 17 website optimization tips for Web Developers [...]

  4. Some of the first tips are in Yahoo! Performance Rules. They’re really popular. I often use YSlow to monitor them.

    There’s second bunch of rules from Google Site Speed, that I think can be the supplement for this post. They discover some useful tips like: use efficient CSS rules, delete unused css rules, etc.

  5. Smush it is really great. But they recently changed their API so the Wordpress smush.it plugin is down…such a bummer!

  6. iliuta says:

    these are tips for web developers, but we can write an article for wordpress optimization tips if we have a high demand. I think we’ll make a poll and see .

  7. [...] for the search engines. This is an search engine optimization tip. I’ve done an article about website optimization tips. So here are the rules for these two [...]

  8. [...] PS: you can shrink your external style sheet as explained in this tutorial. [...]

  9. [...] 17 website optimization tips for Web Developers window.fbAsyncInit = function() { FB.init({ appId: '136223443057618', status: true, cookie: true, xfbml: true }); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); [...]

  10. [...] your work. There are programs like Yslow to help you optimize your files. I have written also an article about optimization tips. window.fbAsyncInit = function() { FB.init({ appId: '136223443057618', status: true, cookie: [...]

Leave a Reply