14 golden rules for site optimization

golden rules

1: Minimize HTTP Requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

2: Use a Content Delivery Network

The user’s proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective.

3: Add an Expires 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.

4: Gzip Components

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It’s true that the end-user’s bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.

5: Put Stylesheets at the Top

Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

6: Put Scripts at the Bottom

Rule 5 described how stylesheets near the bottom of the page prohibit progressive rendering, and how moving them to the document HEAD eliminates the problem. Scripts (external JavaScript files) pose a similar problem, but the solution is just the opposite: it’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.

7: Avoid CSS Expressions

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

8: Make JavaScript and CSS External

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

9: 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.

10: Minify JavaScript

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

11: Avoid Redirects

Redirects are accomplished using the 301 and 302 status codes. 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. The body of the response is typically empty. 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.

12: Remove Duplicate Scripts

It hurts performance to include the same JavaScript file twice in one page. This isn’t as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated script. Two main factors increase the odds of a script being duplicated in a single web page: team size and number of scripts. When it does happen, duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

13: Configure ETags

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.

14: Make Ajax Cacheable

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won’t be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It’s important to remember that “asynchronous” does not imply “instantaneous”.

More details about the 14 rules can be found here: http://developer.yahoo.com/performance/rules.html

It is also possible to try all these rules on practice at http://stevesouders.com/examples/rules.php

A great web based tool for site loading time analyze is available at http://tools.pingdom.com/fpt/

Advertisements

Web project estimation advices

Project Estimation

The more specific you are the less problems will appear.

What seems obvious for you might seem very different to you client. Even if there is something about fonts, text and the number of items on a specific area, you should plan ahead and describe it in details. You should firstly write good specifications for the project. A good specification is a document that answers absolutely all possible questions. It could seem impossible to take into account everything at the first glance. But you have to make it. The good news is you have an exhaustive set of tasks at the inception phase. The bad news is you could work a lot gathering the necessary details and consult with the client to find the goals and solution, after which the client will change his mind and abandon the project, or simply use this specifications to shop around a better price for the project that now has a shape. To avoid this- you should make a contract before you start designing the specifications, or consider this phase as a separate one and charge it.

Do not deviate from your path.

The path was established at the specifications phase. You designed the project and estimated in terms of time and money. You could use different pricing methods like rate/hour or rate/task or rate per project – the last one is very tricky because you have to be very experienced at that. But the point in not deviating from your path is not accepting small or appealingly easy changes. You could thing – “Well, if it is really easy I could satisfy the client in 5 more minutes”, but trust us – you won’t. You should always log the changes, document them, re-estimate the work and make a new contract or a simply add a new page to the first contract. Make sure the client properly understand this and agrees on these scheme of changes. It seems clear that the client risks to run out of the budget, but on the other hand – he needs something worth a better price.

Deliver on time

If you think you will manage to deliver the work in 7 weeks for example, but there is still something undiscovered or you are still dependent on some actions of the client like some new details – just consider the work will be finished in 7 week from the date you have cleared everything or received those new details. This is to inform the client that he is responsible for the final delivery date too. Otherwise you alone will be responsible for the faults with deadlines.

The goal of this post is to protect the developer’s team, but this doesn’t mean it’s to the detriment of the client, as very often the client can be his own worst enemy. Be aware that it is not possible to make a project in its perfect state. The scope is to get the things done and achieve the goals, after which there is room for improvements and upgrades.

GOal Oriented Desing is GOOD

 

GOAL oriented design

Once upon a time, when we just began working in web design, our only goal was to impress the client. Today we consider this vision is totally wrong, except the case when a web site has one single user – the client.

Any web site should be built in response to certain needs. The web is medium of information, and the content is king. No matter how good the design will be, without fulfilling the needs for information – the site will be a failure.

Goals are best visualized when you make scenarios for real user experience. A common mistake is focusing on the technologies and forgetting about how easy will the real user find the information he needs, and what will be the overall impressions after using the site. The point is to make the user happy and reward it with something he needs in response to his time spend.

Our advice is to think of a web site as of a two-way dialog medium. Imagine yourself chatting with that site and getting pleasant responses, you will be delighted with the feeling it works for you. Here we would like to introduce the so called – “system intelligence” this concept provides the greatest opportunity to differentiate excellent web products from the mainstreams. Think ahead what dialogues should be anticipated or avoided, what errors can possible occur, how can the site respond in a way that increases the user’s satisfaction. Also the “404 – File not found” solution is actually very rude! You could design the system to pull up a list of similar pages to look through – this is much more user friendly.

A good and intelligent system is always predicting the next step of the user, and acts accordingly. Even if this requires more resources to design such a system there always are win-win approaches that will work for your users and your goals. Here are some examples of win-win solutions:

Advertising messages at resting pages.
Let’s say there is a downloading page, the user is happy with the download and meanwhile can actually pay attention on some advertising.

Inline advertising.
It’s easy to imagine a newspaper and advertising boxes through the lines. The user can easily ignore it, or sneak a look.

Advertising by entertainment.
Probably the most pleasant way of advertising – it’s always very interesting and funny to observe a cartoon message that invites you to click and find out the rest of the story.

The cat and mouse approach.
It’s when you want to sell the cat, but you offer the mouse for free and the user has the impression he still wants more. The user discovers something new or of interest, you are advertising your services and as a consequence sell more. It’s a trivial win-win isn’t it?

Advertising via Newsletters.
It’s a perfect way to provide the right users the right information, without their having to go and get it, as soon as it becomes available. Also it collects the users’ information as contact details which represent a route of direct communication and target oriented actions. Besides, it is a very cost-effective win-win solution.

Even this post has some goals, one of which is to encourage you finding win-win solutions and always use the GOOD philosophy.

 

How to properly begin a project in 10 steps

1. Estimate your capabilities and capacities.

Make sure you have enough time and resources to do the project.

2. Get to know your clients.
Spend as much time with your client as possible.

3. Make sure client knows what he wants.
Find out what the client needs. Not what he wants, but what he needs.

4. Make sure the goal is defined.
Talk with the client. Understand their goals. Once you know this, your solutions can target those goals.

5. Prepare a good plan.
Planning on paper helps you stay focused and ensures you won’t forget any of your ideas as you dive into the work.

6. Create a vision for the project.
An extremely important condition is to have a vision. You will clearly understand the purpose of the project, your client will be satisfied with the end result.

7. Observe the competition.
You want to learn from the mistakes of your competition. Find out what they did right, what they did wrong, and what they didn’t do at all.

8. Get money before you start.
You should always ask the first part of money to begin the work.

9. Brainstorm!
Write down as many random ideas as you can on pieces of paper. Nothing has to make sense or have any real value — but just get the ideas out on paper.

10.Search the truth using critical sense
Consult with someone who has a keen critical sense. Research till you drop. Get as much collateral information about the market, similar projects.