how data goes from browser to server and what can go wrong

A lot of things happen between the time you request a spider web page and the time it completely loads in your browser. Each of those things takes anywhere from a few milliseconds to several minutes to complete and reducing the time of any footstep in the procedure improves the overall operation of the page.

Some of the steps along the way, such equally the size of your HTML and CSS files, are under your control. With some, such as a DNS lookup to convert domain.com into an IP accost, there's not a lot you can practice to speed upwardly the process.

Last week I began a series virtually website performance. To empathize how we can make sites perform better, I call back it makes sense to know a little about what happens when someone requests a web page in their browser.

I won't pretend to understand every detail and I won't effort to encompass every possible thing that tin happen. Nevertheless, I would like to present a general thought of what happens when y'all request a web page and point out some areas we have influence and some where we can't do much to meliorate functioning.

The Path of a Browser Request

There are a scattering of general steps that occur between the fourth dimension you request a spider web page and the time information technology displays in your browser.

1. DNS Lookup
2. Browser sends an HTTP request
3. Server responds and sends back the requested HTML file
4. Browser begins to render HTML
5. Browser sends additional requests for objects embedded in the html file (CSS files, images, javascript, etc.)

Each of these general steps has additional steps and checks and in the residual of this post I want to go through each of them in a piddling more item.

DNS Lookup

Domain.com is easy for humans to remember. An IP address like 159.122.35.130 isn't. The latter is how servers are located though, so the commencement step in requesting a page is converting the domain to an IP address.

Several hundred root servers are scattered around the earth. Each contains information that maps every domain to the IP accost of the server on which information technology'south located. When you request a web page, the offset step is a asking to one of these servers to allow your browser know the correct IP to ship its request to.

13 servers sit at the top of the hierarchy of all the root servers and these thirteen servers form the root zone. Information technology'south managed by 12 different organizations, each responsible for maintaining one root zone server, with the exception of Verisign which maintains two of them.

Because domain mapping data is fairly consistent and because it takes time to send packets of data around the spider web, it makes sense to cache the information. It'southward much quicker to wait upward a cached static page than it is to send the request and wait for a response.

Too, since about of us tend to visit the same sites again and again, we don't need to store every possible domain to IP mapping. A number of devices you lot interact with to view web pages will store a DNS cache, starting with your browser. Here's a list of devices that will store a cache in the gild they're checked.

• Browser cache
• Operating system cache
• Router enshroud
• Internet access provider DNS cache

First the enshroud stored in your browser is checked, then the cache stored by your operating arrangement, and and so on. If none of these cached files have the information needed, a recursive search of root DNS servers takes place.

If you've ever wondered why changing nameservers for a domain tin have up to 48 hours to take result, it's because all these caches needed to be updated to reflect the new data. It's why you might see the site on its new server while a friend with a cache that hasn't yet updated still sees the site on the one-time server.

A DNS lookup of 1 of the root servers doesn't exactly take a long time, simply it is quicker to check a local cache, and so one matter nosotros can do to improve operation is to suggest the mapping stays in local caches longer.

Browser Sends Request

After a browser has performed the DNS lookup, information technology sends an HTTP asking to the appropriate server. It doesn't have to literally exist HTTP. Information technology can exist HTTPS or more recently an HTTP/2 request. The general idea though it that your browser sends a request for a specific file, often an HTML file.

I say browser, but the server itself doesn't really intendance where the asking originated. It might come from a browser and it might come from a search engine spider or anything else that can send a request.

Here's the request Firefox sent when I requested the home page of this site.

	Become / HTTP/1.i
	Host: vanseodesign.com
	User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0
	Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
	Take-Language: en-US,en;q=0.5
	Take-Encoding: gzip, deflate
	Cookie: _ga=GA1.2.604372764.1484810328; PHPSESSID=7ip53s84rki0mn2rjae5bhin05; bp-activity-oldestpage=1
	Connection: go on-alive
	Upgrade-Insecure-Requests: one
	Enshroud-Control: max-historic period=0

This information isn't a complete list of what can be sent and whatever browser yous utilize has ways to transport boosted header information or to tweak the default.

For example, your browser probably has a fashion to send a different user-agent so you lot can run across what data gets returned to dissimilar browsers. It's something I accept to do too often when a site delivers a video via wink as I don't have flash installed on my laptop. Virtually of the fourth dimension I but shut the page, but in those cases where I really wanted to watch the video, I'll change my user-agent to Safari on an iPad (or something similar) and the site will oft deliver me a not-wink version of the same video.

You can't command the asking headers that are sent to your site since you don't make the request, only there's information in the header suggesting how we can better functioning and I'll telephone call your attending to i.

If you look dorsum at the request above, you can see Firefox accepts gzip (as practise other browsers) so 1 way nosotros can improve operation is to use gzip and have zipped content delivered from the server. Zipping and unzipping takes less fourth dimension than sending everything unzipped over the network.

Server Responds

Once the server receives a request, it will respond, though how will depend on a number of things. For example, the page requested may no longer exist on the server and the server will send dorsum a 404 (file not found) error. It'due south as well possible the file has been moved to a new location and requests are being redirected temporarily (302) or permanently (301). If this is the case your browser needs to make another request for the file at the new location.

As you tin gauge redirection slows performance as each redirect is an extra asking. There are reasons why you'd desire to add a redirect, but go along in mind fewer are amend for performance and unless you have a good reason you don't desire to chain redirects one after the other, since each will merely dull operation.

Lots of other things can happen and the server sends different status codes based on those things. Ideally it sends a 200 OK, which ways success, simply again it might send a 404 or 301 or 500 (internal server fault).

Anything other than 200 success means your browser volition either send additional requests or allow you know something is wrong so let's focus on success. Here'due south what my server sent back to the request Firefox sent information technology.

	Engagement: Thu, 26 Jan 2017 23:39:09 GMT
	Server: Apache
	Expires: Thu, nineteen Nov 1981 08:52:00 GMT
	Cache-Command: no-shop, no-enshroud, must-revalidate, post-check=0, pre-check=0
	Pragma: no-enshroud
	Link: <http://vanseodesign.com/wp-json/>; rel="https://api.w.org/", <http://vanseodesign.com/>; rel=shortlink
	Connexion: go along-alive, Keep-Alive
	Keep-Live: timeout=three, max=10
	Transfer-Encoding: chunked
	Content-Type: text/html; charset=UTF-8
	200 OK

You can see the status code at the lesser, the engagement and time at the top, information about the server, and other header information nigh the blazon of content requested, the length of the content requested, what kind of encoding, etc. Assuming a successful response the server likewise sends the requested file, which, in this case and in full general, will be an HTML file.

The response fourth dimension of the server is normally not the chief clogging in performance. If it is, yous probably need a new host or a better hosting package with the same host. All the same there are some things you can practise to improve response times, such as removing unnecessary redirection.

If your site relies on a database you tin optimize the database and since the response ultimately leads to files being sent across the network, reducing the size of the files is something we should try to practise.

Browser Renders Page

One time your browser receives an HTML file, information technology needs to render the page and it has to go through a few steps before you see information technology displayed. These steps are called the critical rendering path in which your browser needs to:

1. Process HTML markup and build the DOM tree.
2. Process CSS markup and build the CSSOM tree.
3. Combine the DOM and CSSOM into a return tree.
4. Run the layout on the render tree to compute the geometry of each node.
5. Pigment the private nodes to the screen.

Much of what you'll practice to improve functioning involves this role of the process. To get through the higher up steps your browser probable needs additional files embedded in the HTML. It depends on the specific page, simply there's a expert chance your HTML makes additional requests for CSS and Javascript files. Information technology probably includes requests for images and might request a font exist downloaded. Chances are your pages require more than 1 these.

Some of these files are return blocking resources in that the page can't render at all until the resources is delivered. Step 2 above is to process CSS and build the CSSOM tree so CSS is considered a render blocking resource past default. JavaScript files tin as well block DOM construction and can also exist render blocking resources, though they don't have to exist.

Hopefully you can already guess at a few things we tin can to to improve the fourth dimension it takes to return a web page. Fewer embedded file requests, smaller files being requested, and reducing the number of render blocking resource will all amend performance, only they aren't the merely things.

Endmost Thoughts

That was a pretty quick walk through of what happens when you type a URL into a browser or click a link from ane folio to another. It absolutely skips a lot of details, only hopefully it'south enough to understand that a lot of things happen before a spider web folio loads.

There are things y'all can do to improve each and every step, but most of what nosotros'll do involves the concluding step, which is probably where performance is impacted the almost. Even if we only focus on the terminal step in the critical path, there's even so a lot of different improvements we tin can potentially make.

Before nosotros get-go making changes we should understand a few more things. We should know where the bottlenecks are so we tin spend our time where it'southward most needed. We should also have some goals in mind to make up one's mind how much effort to put into each possible improvement.

Next calendar week I want to talk about the goals nosotros should set up. I'll talk about operation budgets, what they are, and how to set them. The following week I'll show you lot how to find the performance bottlenecks in your site.

« Prev Postal service Next Postal service »

Download a free sample from my volume, Design Fundamentals.

wesleythomong.blogspot.com

Source: https://vanseodesign.com/web-design/browser-requests/

Share this post