Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the steps involved from entering a web site address to the page being displayed on the browser?

And how can the process be speeded up from a developer point of view?

like image 803
Dpp Avatar asked May 24 '10 10:05

Dpp


1 Answers

There are a lot of things going on.

When you first type in an address, the browser will lookup the hostname in DNS, if it is not already in the browser cache.

Then the browser sends a HTTP GET request to the remote server.

What happens on the server is really up to the server; but it should respond back with a HTTP response, that includes headers, which perhaps describe the content to the browser and how long it is allowed to be cached. The response might be a redirect, in which case the browser will send another request to the redirected page.

Obviously, server response time will be one of the critical points for perceived performance, but there are many other things to it.

When a response is returned from the server, the browser will do a few things. First it will parse the HTML returned, and create it's DOM (Document Object Model) from that. Then it will run any startup Javascript on the page; before the page is ready to be displayed in the browser. Remember, that if the page contains any ressources such as external stylesheets, scripts, images and so on, the browser will have to download those, before it can display the page. Each resource is a separate HTTP get, and there are some latency time involved here. Therefore, one thing that in some cases can greatly reduce load times is to use as few external ressources as possible, and make sure they are cached on the client (so the browser don't have to fetch them for each page view).

To summarize, to optimize performance for a web page, you want to look at, as a minimum:

  • Server response time
  • Bandwith /content transfer time.
  • Make sure you have a small and simple DOM (especially if you need to support IE6).
  • Make sure you understand client side caching and the settings you need to set on the server.
  • Make sure you make the client download as little data as possible. Consider GZipping resources and perhaps dynamic content also (dependent on your situation).
  • Make sure you don't have any CPU intensive javascript on Page load.

You might want to read up on the HTTP Protocol, as well as some of the Best Practices. A couple of tools you can use are YSlow and Google Page Speed

like image 110
driis Avatar answered Nov 15 '22 07:11

driis